Writing good Alt Texts:
Do not use "image of"
Describe it over the phone
Keep the text concise and up to 125 characters
Initial State of the Card
<body>
<div>
<img
class="profile-img"
src="images/henna.png"
alt="Henna Singh is coding on a laptop under a lamp in her room">
<h3>Henna Singh</h3>
<p>Community Manager</p>
<h4>Dublin, Ireland</h4>
</div>
</body>
Flexbox Model: Child Containers
Flexbox display places each direct child in a separate column. Flexbox containers are - block elements by default. They can be centered using margins. (The values are kept auto)
Adding a Utility Class
A class for a single CSS property. If the same property has to be applied to multiple selectors, creating a utility class is helpful.
CSS Inheritance
Some properties when applied to parent containers are inherited by children, but not all. The inherited properties are listed on SO post.
Font-Basics
Fonts are important. Choose the font that suits the project. A serious text should not be displayed in a casual or funny font. If you use web-safe fonts, you don't need to send fonts over the network.
Margin and Padding Shorthands
margin: top right bottom left; or margin: top/bottom right/left (vertical and horizontal lines)
The order can be remembered with the hands of a clock (clockwise)
Color Palette
I found out coolors.co is a super cool website for selecting a color palette. You can save palettes by creating an account. You can also upload an image to pick colors from that.
The updated Digital Card looks like below:
Deploying on Netlify
Upload the code on GitHub. Create an account on Netlify. Add Netlify to all repositories. "Add a new site", select the Github repository and wait for it to deploy =)
The card below and I am happy how it turned out =)
