This repository serves as a comprehensive portfolio showcasing my progress and proficiency in HTML5 and CSS3 through the completion of over 100 targeted exercises. Each exercise focuses on mastering specific web development concepts and techniques, from foundational HTML structures to advanced CSS layouts and styling.
The goal is to demonstrate my ability to translate design concepts into clean, semantic, and responsive web interfaces.
I initiated this project with the primary goal of solidify my understanding of core web development principles, practice problem-solving, build a strong foundation for more complex frontend projects, achieve mastery in crafting semantic HTML and responsive, aesthetically pleasing CSS.
By diligently working through a high volume of diverse exercises, I aim to achieve a deep and practical understanding of frontend fundamentals.
- HTML5: For structuring web content semantically.
- CSS3: For styling and layout, including modern techniques.
- Git: For version control and tracking changes.
- GitHub: For hosting the repository and collaborating.
Each exercise is organized into its own dedicated folder. The naming convention for folders is typically exercise-XXX.
Inside each exercise folder, you will typically find:
exercise-xxx-xxx.html: The main HTML file for the exercise.style.css: The associated CSS file.README.md: A brief description of the exercise.screenshot-001-a.pngorscreenshot-001-a.gif: A visual representation of the completed exercise output.
To explore any of the exercises locally:
- Clone the repository:
git clone https://github.com/meez-111/HTML-and-CSS-over-100-excersies.git
- Navigate to the project directory:
cd HTML-and-CSS-over-100-excersies - Choose an exercise folder (e.g.,
exercise-001). - Open the
exercise-001-a.htmlfile for that exercise in your preferred web browser.
Tip: If you use Visual Studio Code, the "Live Server" extension is highly recommended for real-time previews of your changes.
Through the completion of these 100+ exercises, I have gained practical experience and a deeper understanding of:
- Semantic HTML5: Correct and effective use of HTML elements (e.g.,
<header>,<nav>,<main>,<article>,<section>,<footer>,<figure>,<figcaption>). - CSS Selectors & Specificity: Mastering various selector types (class, ID, attribute, pseudo-classes, pseudo-elements) and understanding how the cascade and specificity rules apply.
- The Box Model: In-depth application of
margin,padding,border, andcontentfor precise element spacing and sizing. - Flexbox: Building powerful, one-dimensional, and responsive layouts using
display: flex,justify-content,align-items,flex-wrap,flex-grow,flex-shrink, andflex-basis. - CSS Grid: Creating complex, two-dimensional layouts with
display: grid,grid-template-columns,grid-template-rows,grid-gap,grid-area, and explicit/implicit grid placement. - Responsive Design: Implementing media queries for mobile-first and desktop-first strategies, ensuring optimal viewing across various device sizes.
- CSS Positioning: Understanding and applying
static,relative,absolute,fixed, andstickypositioning for element placement. - Typography & Colors: Effective use of
font-family,font-size,line-height,font-weight, color palettes, and considerations for web accessibility. - Form Styling: Designing user-friendly and aesthetically pleasing forms with custom styling for input fields, buttons, and labels.
- Transitions & Transformations: Adding subtle animations and interactive effects using CSS
transitionandtransformproperties. - Problem-solving: Breaking down complex design challenges into manageable HTML and CSS components and debugging layout issues.
- Version Control: Proficient use of Git and GitHub for tracking progress, managing different versions of code, and preparing for collaborative environments.
I am committed to continuously expanding my frontend skills. Future plans for this project include:
- Refactoring older exercises to incorporate new best practices or more efficient solutions.
- Potentially integrating selected exercises into a personal portfolio website for live demonstrations.
I'm always open to connecting with fellow developers, recruiters, and enthusiasts!
- LinkedIn: My LinkedIn
- GitHub: My Github
- Email: meez.sabra.111@gmail.com
This project is licensed under the MIT License - see the LICENSE.md file for details.