Elzero Web School - HTML CSS Template 01

• This is a solution to "HTML & CSS Practice n°:01" on Elzero Web School.

Overview

The challenge

• Build out the project to the design provided:
  • Leon - Free Html Agency Website Template

Screenshot

Links

• Live Site URL: Leon Template

Built with

• HTML5
• CSS3 custom properties
• Flexbox
• CSS Grid
• Desktop-first workflow

What I learned

• :before and :after pseudo elements do not work with img elements : source
• Wraping Fontawsome Icons elements in anchor tag make them clickable : source
• z-index is relative to the elements of the same stacking context : source
• Get a child element to show behind its parent using translateZ();-"child" and "transform-style: preserve-3d;"-parent : source
• The border need to belong to the element not a parent element in order to consider box-sizing : source
• Q: Pseudo element not full container width when border used? : source
• Role of normalization in CSS : Normalizing css tries to even out the differences between browsers when rendering html-elements. Many browser have "pre-settings": p and h-elements have vertical margins, lists have some margin and padding too. em and strong tags have bold font-weight. All this pre-settings are reset, so that you have a consistent working-base in all the browsers : source
• It is not possible to use different types of styles in GitHub markdown : source
• How to Create a Drop Down Menu on click using the "Button" hack : source
• How TO - Parallax Scrolling source
• Button title vs aria-label: The title - attribute Is used if your mouse go over the button and shows the text of title as a tooltip. With aria-label is not supported in this way : source
• How to make buttons accessible to screen readers source

Continued development

Areas and concepts that I want to continue focusing on in future projects :

• Semantic HTML5 markup
• Responsive Images Syntax in HTML

Useful resources

• Purify CSS Online - This helped me removing unused CSS code.
• Unminify - This helped me unminify CSS HTML code.
• Web.dev - Contains very helpful articles.
• webAIM - This helped me checking the contrast between the Foreground Color and the Background Color.

Author

• Graphberry - graphic resource

Cloned By

• Linkedin - Elmouatez Billah Benariba
• Twitter - @mouatezbenariba
• Instagram - @mouatez.benariba

Acknowledgments

• I would like to express my special thanks of gratitude to eng Osama Mohamed.