{"id":18245355,"url":"https://github.com/mouatezbenariba/template-html-css-01","last_synced_at":"2025-09-04T19:43:28.955Z","repository":{"id":114045381,"uuid":"456555696","full_name":"mouatezbenariba/template-html-css-01","owner":"mouatezbenariba","description":"Elzero Web School HTML/CSS Template 01 Challenge Solution : LEON Template - Elmouatez Billah Benariba","archived":false,"fork":false,"pushed_at":"2023-05-18T13:03:26.000Z","size":1826,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T13:39:51.358Z","etag":null,"topics":["css","css3","elzero-frontend-challenges","elzero-web-school","html","html5"],"latest_commit_sha":null,"homepage":"https://mouatezbenariba.github.io/template-html-css-01/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mouatezbenariba.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-07T15:08:14.000Z","updated_at":"2024-12-26T04:52:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"48a85b99-349b-4fcf-8b02-18d4b6127dea","html_url":"https://github.com/mouatezbenariba/template-html-css-01","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mouatezbenariba/template-html-css-01","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouatezbenariba%2Ftemplate-html-css-01","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouatezbenariba%2Ftemplate-html-css-01/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouatezbenariba%2Ftemplate-html-css-01/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouatezbenariba%2Ftemplate-html-css-01/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mouatezbenariba","download_url":"https://codeload.github.com/mouatezbenariba/template-html-css-01/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouatezbenariba%2Ftemplate-html-css-01/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263291411,"owners_count":23443754,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","elzero-frontend-challenges","elzero-web-school","html","html5"],"created_at":"2024-11-05T09:20:03.574Z","updated_at":"2025-07-03T08:36:37.803Z","avatar_url":"https://github.com/mouatezbenariba.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Elzero Web School - HTML CSS Template 01](https://mouatezbenariba.github.io/template-html-css-01/)\n- This is a solution to [\u003cb\u003e\"HTML \u0026 CSS Practice n°:01\"\u003c/b\u003e](https://elzero.org/practical-html-css/) on [\u003cb\u003eElzero Web School\u003c/b\u003e](https://elzero.org/).\n\n## Overview\n\n### The challenge\n\n- Build out the project to the design provided:\n  - [Leon - Free Html Agency Website Template](https://www.graphberry.com/item/leon-html-agency-template)\n\n### Screenshot\n\n![Landing Page \u0026 lightouse report](https://github.com/mouatezbenariba/template-html-css-01/blob/main/images/screenshot01.PNG)\n\n### Links\n\n- Live Site URL: [Leon Template](https://mouatezbenariba.github.io/template-html-css-01/)\n\n### Built with\n\n- HTML5\n- CSS3 custom properties\n- Flexbox\n- CSS Grid\n- Desktop-first workflow\n\n### What I learned\n\n- :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)\n- Wraping Fontawsome Icons elements in anchor tag make them clickable : [source](https://stackoverflow.com/questions/26814297/want-to-make-font-awesome-icons-clickable)\n- 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)\n- 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)\n- 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)\n- 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)\n- 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)\n- 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)\n- 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)\n- How TO - Parallax Scrolling [source](https://www.w3schools.com/howto/howto_css_parallax.asp)\n- 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)\n- How to make buttons accessible to screen readers [source](https://web.dev/button-name/?utm_source=lighthouse\u0026utm_medium=devtools)\n\n### Continued development\n\nAreas and concepts that I want to continue focusing on in future projects :\n  - Semantic HTML5 markup\n  - Responsive Images Syntax in HTML\n\n### Useful resources\n\n- [Purify CSS Online](https://purifycss.online/) - This helped me removing unused CSS code.\n- [Unminify](https://unminify.com/) - This helped me unminify CSS HTML code.\n- [Web.dev](https://web.dev/) - Contains very helpful articles.\n- [webAIM](https://webaim.org/resources/contrastchecker/) - This helped me checking the contrast between the Foreground Color and the Background Color.\n\n## Author\n- [Graphberry - graphic resource](https://www.graphberry.com/)\n\n## Cloned By\n- Linkedin - [Elmouatez Billah Benariba](https://www.linkedin.com/in/mouatezbenariba/)\n- Twitter - [@mouatezbenariba](https://twitter.com/mouatezbenariba)\n- Instagram - [@mouatez.benariba](https://www.instagram.com/mouatez.benariba/)\n\n## Acknowledgments\n- I would like to express my special thanks of gratitude to eng [Osama Mohamed](https://github.com/OsamaElzero).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmouatezbenariba%2Ftemplate-html-css-01","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmouatezbenariba%2Ftemplate-html-css-01","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmouatezbenariba%2Ftemplate-html-css-01/lists"}