https://github.com/mouatezbenariba/template-html-css-01
Elzero Web School HTML/CSS Template 01 Challenge Solution : LEON Template - Elmouatez Billah Benariba
https://github.com/mouatezbenariba/template-html-css-01
css css3 elzero-frontend-challenges elzero-web-school html html5
Last synced: 10 months ago
JSON representation
Elzero Web School HTML/CSS Template 01 Challenge Solution : LEON Template - Elmouatez Billah Benariba
- Host: GitHub
- URL: https://github.com/mouatezbenariba/template-html-css-01
- Owner: mouatezbenariba
- Created: 2022-02-07T15:08:14.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-18T13:03:26.000Z (about 3 years ago)
- Last Synced: 2025-04-04T13:39:51.358Z (over 1 year ago)
- Topics: css, css3, elzero-frontend-challenges, elzero-web-school, html, html5
- Language: CSS
- Homepage: https://mouatezbenariba.github.io/template-html-css-01/
- Size: 1.74 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Elzero Web School - HTML CSS Template 01](https://mouatezbenariba.github.io/template-html-css-01/)
- This is a solution to ["HTML & CSS Practice n°:01"](https://elzero.org/practical-html-css/) on [Elzero Web School](https://elzero.org/).
## Overview
### The challenge
- Build out the project to the design provided:
- [Leon - Free Html Agency Website Template](https://www.graphberry.com/item/leon-html-agency-template)
### Screenshot
### Links
- Live Site URL: [Leon Template](https://mouatezbenariba.github.io/template-html-css-01/)
### 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](https://stackoverflow.com/questions/7396469/why-dont-before-and-after-pseudo-elements-work-with-img-elements)
- Wraping Fontawsome Icons elements in anchor tag make them clickable : [source](https://stackoverflow.com/questions/26814297/want-to-make-font-awesome-icons-clickable)
- z-index is relative to the elements of the same stacking context : [source](https://stackoverflow.com/questions/2503705/how-to-get-a-child-element-to-show-behind-lower-z-index-than-its-parent)
- Get a child element to show behind its parent using translateZ();-"child" and "transform-style: preserve-3d;"-parent : [source](https://stackoverflow.com/questions/2503705/how-to-get-a-child-element-to-show-behind-lower-z-index-than-its-parent)
- The border need to belong to the element not a parent element in order to consider box-sizing : [source](https://stackoverflow.com/questions/54389658/pseudo-element-not-full-container-width-when-border-used)
- Q: Pseudo element not full container width when border used? : [source](https://stackoverflow.com/questions/54389658/pseudo-element-not-full-container-width-when-border-used)
- 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](https://stackoverflow.com/questions/11578280/what-exactly-does-normalization-in-css-do)
- It is not possible to use different types of styles in GitHub markdown : [source](https://stackoverflow.com/questions/65508832/how-to-use-margin-padding-in-github-readme-md)
- How to Create a Drop Down Menu on click using the "Button" hack : [source](https://stackoverflow.com/questions/18786546/creating-drop-down-menu-on-click-css)
- How TO - Parallax Scrolling [source](https://www.w3schools.com/howto/howto_css_parallax.asp)
- 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](https://stackoverflow.com/questions/27953425/what-is-the-difference-between-aria-label-and-title-attributes)
- How to make buttons accessible to screen readers [source](https://web.dev/button-name/?utm_source=lighthouse&utm_medium=devtools)
### 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](https://purifycss.online/) - This helped me removing unused CSS code.
- [Unminify](https://unminify.com/) - This helped me unminify CSS HTML code.
- [Web.dev](https://web.dev/) - Contains very helpful articles.
- [webAIM](https://webaim.org/resources/contrastchecker/) - This helped me checking the contrast between the Foreground Color and the Background Color.
## Author
- [Graphberry - graphic resource](https://www.graphberry.com/)
## Cloned By
- Linkedin - [Elmouatez Billah Benariba](https://www.linkedin.com/in/mouatezbenariba/)
- Twitter - [@mouatezbenariba](https://twitter.com/mouatezbenariba)
- Instagram - [@mouatez.benariba](https://www.instagram.com/mouatez.benariba/)
## Acknowledgments
- I would like to express my special thanks of gratitude to eng [Osama Mohamed](https://github.com/OsamaElzero).