Lab 11:
Design Fundamentals
Welcome to the eleventh lab of Team Edge!
In this lab, we cover design fundamentals to make appealing and effective websites.
Challenge : CSS Avatar
Go to this link and fork the project in Stackbliz
New Skills :
Modify the CSS properties of containers using the parts of the box model
Overlap elements using positioning elements
Review Skills :
Styling elements using CSS selectors and properties
Selecting multiple elements using classes and IDs
Reference
The Box Model
Content: Contains text, images, other child elements, etc. The width and height is dependent on the element's content .
Padding: Defined by the padding property and creates space between the content and the border. If padding is zero, then the padding's edge is the same as the content's edge.
Border: Defined by the border property and can be customized by border width, color, and style. If no border is defined, then the border edge is the same as the padding edge.
Margin: Defined by the margin property and adds space outside of the border. This is useful to space out elements.
Background: Note that the background property is applied to the content and padding rectangles.
Common Layouts of Webpages Using Containers
What is a <div>?
The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute.
Design Fundamentals
How do you decide on your color palette?
Find Your Primary Color
Which color do you want associated with your site?
The primary color should be used for "hot spots" of the page. In the example on the right, the teal color is used as the main background color of the header, which will be the first thing users see when they arrive on the web page.
Select the Number of Colors (Recommended: 3)
Too many colors can be distracting. You can use colors to direct your viewer to specific parts of the page. Look at the example on the right. Where does your eye get drawn to?
Use Secondary Colors When Needed
These colors are used to highlight items, such as buttons, menus, or supporting content like FAQs.
Don't Forget The Neutral Colors!
Neutral colors help create contrast and give reader a break to digest the info. These colors are generally used for text.
Web typography is a beautiful art of designing and arranging different types of web fonts, letters, words and paragraphs used to create great web design as per priorities.
How do you decide on the typography of your website?
Choose A Font
The font of the page controls the readability and mood of your page. Sans Serif fonts are generally easier to read on a web page.
Modify the Font Size
Rule of Thumb: Font size should be 15-25px. Larger fonts help with readability and the larger the font, the stronger the feeling that is conveyed.
Look at the font size in the example on the left. What do you feel when you read the header?
Scale Your Headings
A good tip is to only have two levels of headings.
Primary heading should be 180-200% of the body text
Secondary heading should be 130-150% of the body text
Set the Line Spacing
Spacing the lines helps make the text more readable and prevents the user from being overwhelmed or straining their eyes.
Set the Character Spacing
You can add spacing above, below, and between characters. You can use it for style or to add emphasis to the text.
It is also important to add space between headers and body text.
