Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gzixnine/css_course

This repository contains a thorough compilation of CSS assignments from Elzero Web School, encompassing a diverse array of topics. It begins with fundamental CSS syntax and styling principles, advancing to more intricate methods like responsive design, animations, and preprocessor utilization. Focused on clarity, depth, and practical application.
https://github.com/gzixnine/css_course

css css3 elzero-frontend-challenges elzero-web-school elzero-web-school-css-assignments flexbox-grid front-end-development web-development

Last synced: about 1 month ago
JSON representation

This repository contains a thorough compilation of CSS assignments from Elzero Web School, encompassing a diverse array of topics. It begins with fundamental CSS syntax and styling principles, advancing to more intricate methods like responsive design, animations, and preprocessor utilization. Focused on clarity, depth, and practical application.

Awesome Lists containing this project

README 

        
# CSS Basics



Welcome to the CSS Basics repository! This repository serves as a comprehensive guide and reference for learning CSS (Cascading Style Sheets), the standard language for styling web pages and web applications.



## Overview



This repository is designed to provide you with a solid foundation in CSS, covering everything from basic styles to more advanced concepts. Whether you're a beginner just starting out or looking to refresh your knowledge, you'll find valuable resources and examples here to help you understand and master CSS.





    Completion      

    Visitors




![CSS Course](https://www.codespot.org/assets/css.jpg)



### What is CSS?



CSS (Cascading Style Sheets) is the language used to style and layout web pages. It allows you to apply styles to HTML elements, control the layout of multiple web pages all at once, and make your web pages responsive and visually appealing.



### Key Features



- **Styling**: CSS provides a wide range of properties to style HTML elements, including fonts, colors, margins, padding, and borders.

- **Layout**: CSS enables you to control the layout of web pages using techniques like Flexbox, Grid, and positioning.

- **Responsive Design**: CSS includes media queries to create responsive web designs that adapt to different screen sizes and devices.

- **Animations**: CSS allows you to create animations and transitions to enhance the user experience.






### Course Reference



The content and examples presented here are based on the high-quality tutorials and lessons from [Elzero Web School](https://elzero.org).



#### About Elzero Web School



Elzero Web School is a premier online platform offering a wide range of web development tutorials and courses. With a focus on practical, hands-on learning, Elzero Web School helps students and professionals alike to enhance their skills and stay up-to-date with the latest web technologies.



#### Additional Resources



- Visit the [official website](https://elzero.org) for more courses and tutorials.

- Check out the [YouTube channel](https://www.youtube.com/@ElzeroWebSchool) for more video content.

- Check out the [GitHub account](https://github.com/ElzeroWebSchool) for more data and codes.

  
OR


- You can learn [CSS](https://www.youtube.com/watch?v=h1mNPEjva8U) from [Abdelrahman Gamal Channel](https://www.youtube.com/@AbdelrahmanGamal)






### Course Progress



#### Course Study Plan

- **Weeks Completed**: [08 of 08]  

  ![100%](https://progress-bar.dev/100/?title=Done)



  `Watched` - [Plan For Eight Weeks](https://elzero.org/study/css-2021-study-plan/)



#### Videos Watched

- **Total Videos**: [88 of 88] - Duration: 11 Hours, 28 Minutes, 51 Seconds  

  ![100%](https://progress-bar.dev/100/?title=Watched)  



  


    👉 Click Here To Watch Videos In YouTube



  1. `Watched` - [Introduction And What I Need To Learn](https://www.youtube.com/watch?v=X1ulCwyhCVM&t=4s)

  2. `Watched` - [Your First Project And Syntax](https://www.youtube.com/watch?v=89VLfs-wpEY&t=7s)

  3. `Watched` - [Element Styling](https://www.youtube.com/watch?v=66sjwQ-hB64)

  4. `Watched` - [Name Conventions And Rules](https://www.youtube.com/watch?v=xkNpIsbxMuo)

  5. `Watched` - [Background - Color, Image, Repeat](https://www.youtube.com/watch?v=-srybsn3YDM)

  6. `Watched` - [Background - Attachment, Position, Size](https://www.youtube.com/watch?v=8sooTBY5C4w)

  7. `Watched` - [Padding](https://www.youtube.com/watch?v=-wdlA-wFv9A)

  8. `Watched` - [Margin](https://www.youtube.com/watch?v=LEJkJ0AiKDw)

  9. `Watched` - [Border](https://www.youtube.com/watch?v=XE7d1OoljyI)

  10. `Watched` - [Outline](https://www.youtube.com/watch?v=NyOaxP-Adac)

  11. `Watched` - [Display - Block, Inline Block, Inline](https://www.youtube.com/watch?v=-qbGxua98To)

  12. `Watched` - [Element Visibility And Use Cases](https://www.youtube.com/watch?v=g2URo6kLtgg)

  13. `Watched` - [Grouping Multiple Selectors](https://www.youtube.com/watch?v=NTccbXHW7AM)

  14. `Watched` - [Nesting](https://www.youtube.com/watch?v=wo_S_Mfl3yg)

  15. `Watched` - [Dimensions - Width And Height](https://www.youtube.com/watch?v=GIWYpmiv1Hc)

  16. `Watched` - [Overflow - Overflow-X And Overflow-Y](https://www.youtube.com/watch?v=FQLRSbVdk28)

  17. `Watched` - [Text - Color And Shadow](https://www.youtube.com/watch?v=P3xdm7md7AE)

  18. `Watched` - [Text - Alignment](https://www.youtube.com/watch?v=IqCXELTTymo)

  19. `Watched` - [Text - Decoration And Transform](https://www.youtube.com/watch?v=E-7k6sySXwE)

  20. `Watched` - [Text - Spacing](https://www.youtube.com/watch?v=Hphs2vBjmQs)

  21. `Watched` - [Text - Overflow And Use Cases](https://www.youtube.com/watch?v=0uWk0Ucz3c4)

  22. `Watched` - [Inheritance](https://www.youtube.com/watch?v=fXcY14cm4_I)

  23. `Watched` - [Typography - Font Family](https://www.youtube.com/watch?v=ftjKy7AAjVU)

  24. `Watched` - [Typography - Font Size And CSS Units](https://www.youtube.com/watch?v=LDGfu6O5mI8)

  25. `Watched` - [Typography - Font Style And Variant And Weight](https://www.youtube.com/watch?v=-siTKk8QqHo)

  26. `Watched` - [Mouse Cursor](https://www.youtube.com/watch?v=l2Oz9QKd1PU)

  27. `Watched` - [Float And Clear](https://www.youtube.com/watch?v=ZAb-oI23Oc4)

  28. `Watched` - [Mastering The CSS Calculation](https://www.youtube.com/watch?v=Sujl_fq_Ofc)

  29. `Watched` - [Opacity](https://www.youtube.com/watch?v=-3Q7sjYxStM)

  30. `Watched` - [Position](https://www.youtube.com/watch?v=-q5IyjKkKSc&t=472s)

  31. `Watched` - [Z-Index](https://www.youtube.com/watch?v=Parqs9bbRMY)

  32. `Watched` - [Lists Styling](https://www.youtube.com/watch?v=8VH59jP5s1M)

  33. `Watched` - [Table Styling](https://www.youtube.com/watch?v=WgUbPZBh5cI&t=349s)

  34. `Watched` - [Pseudo Classes](https://www.youtube.com/watch?v=vEAPPfJfpk0)

  35. `Watched` - [Pseudo Elements - First Letter, First Line, Selection](https://www.youtube.com/watch?v=6bZCaDyimCI)

  36. `Watched` - [Pseudo Elements - Before, After, Content](https://www.youtube.com/watch?v=OIWZ4EXwlnA)

  37. `Watched` - [Pseudo Elements - Content And Trainings](https://www.youtube.com/watch?v=4WT2eO8aM7U)

  38. `Watched` - [Vendor Prefixes](https://www.youtube.com/watch?v=ZLNzjq4U8Ws)

  39. `Watched` - [Border Radius](https://www.youtube.com/watch?v=76-r7wWCdkM)

  40. `Watched` - [Box Shadow And Examples](https://www.youtube.com/watch?v=QGdK5Lrqxcg)

  41. `Watched` - [The Box Model And Box Sizing](https://www.youtube.com/watch?v=9PDCOviQOwo)

  42. `Watched` - [Transition](https://www.youtube.com/watch?v=B9wYvMHLCVE&t=1s)

  43. `Watched` - [!Important Declaration And Use Cases](https://www.youtube.com/watch?v=Lpy5XkEpp2A&t=126s)

  44. `Watched` - [The Margin Collapse](https://www.youtube.com/watch?v=0Zek-O9bzAo)

  45. `Watched` - [CSS Variables And Trainings](https://www.youtube.com/watch?v=qATtKrSvvEo)

  46. `Watched` - [Flex Box Parent - Direction, Wrap, Flow](https://www.youtube.com/watch?v=JkCLL1CzNZk)

  47. `Watched` - [Flex Box Parent - Justify Content](https://www.youtube.com/watch?v=_ScoBsCdJ7U)

  48. `Watched` - [Flex Box Parent - Align Items](https://www.youtube.com/watch?v=Nn-tFHepLoo)

  49. `Watched` - [Flex Box Parent - Align Content](https://www.youtube.com/watch?v=sOlpkte0gPs)

  50. `Watched` - [Flex Box Child - Grow, Shrink, Order](https://www.youtube.com/watch?v=F5a6wj3hfbg)

  51. `Watched` - [Flex Box Child - Flex Basis, Flex Shorthand](https://www.youtube.com/watch?v=0W8KopNcyRY)

  52. `Watched` - [Flex Box Child - Align Self, Games, Task](https://www.youtube.com/watch?v=t2e4aYHrowQ)

  53. `Watched` - [Finish Flex Froggy Game](https://www.youtube.com/watch?v=-sUqEXFzbII)

  54. `Watched` - [Filters](https://www.youtube.com/watch?v=2v9ZhqX6YOk)

  55. `Watched` - [Gradients](https://www.youtube.com/watch?v=Skjr9fycnio)

  56. `Watched` - [Pointer Events And Caret Color](https://www.youtube.com/watch?v=I6zKVKCewDc&t=209s)

  57. `Watched` - [Grid - Parent - Template Columns](https://www.youtube.com/watch?v=wYSAjaB3mL8)

  58. `Watched` - [Grid - Parent - Template Rows And Gap](https://www.youtube.com/watch?v=gZ3XNPelC5Y)

  59. `Watched` - [Grid - Parent - Justify Content And Align Content](https://www.youtube.com/watch?v=IsXAEilbm64)

  60. `Watched` - [Grid - Parent - Complete Layout With Template Areas](https://www.youtube.com/watch?v=q6VtSllQHHo)

  61. `Watched` - [Grid - Child - Grid Column And Grid Row](https://www.youtube.com/watch?v=7RZr_1qvR2g)

  62. `Watched` - [Grid - Child - Grid Area And Trainings](https://www.youtube.com/watch?v=BJupwn_ii8g)

  63. `Watched` - [Grid - Min, Max And Auto Fill](https://www.youtube.com/watch?v=NO4IeLSKNdw)

  64. `Watched` - [Finish The Grid Garden Game](https://www.youtube.com/watch?v=-UvL4OoIsHo)

  65. `Watched` - [2D Transform - Scale](https://www.youtube.com/watch?v=9KQP22oVCMg)

  66. `Watched` - [2D Transform - Rotate](https://www.youtube.com/watch?v=AtOB_b0Cjyo)

  67. `Watched` - [2D Transform - Translate](https://www.youtube.com/watch?v=PklNgYpJSXs)

  68. `Watched` - [2D Transform - Skew](https://www.youtube.com/watch?v=N2G8JUK7kJs)

  69. `Watched` - [2D Transform - Matrix](https://www.youtube.com/watch?v=OsypTHsvnVI)

  70. `Watched` - [Transform - Origin](https://www.youtube.com/watch?v=DW0-7s_xJ90)

  71. `Watched` - [3D Transform - Rotate](https://www.youtube.com/watch?v=WF9LU1IIERM&t=28s)

  72. `Watched` - [3D Transform - Translate, Perspective, Perspective Origin](https://www.youtube.com/watch?v=FnIdCYWmJ8A)

  73. `Watched` - [3D Transform - Backface Visibility And Flip Product](https://www.youtube.com/watch?v=7G-a-PHsGyM)

  74. `Watched` - [Animation - KeyFrames, Name, Duration](https://www.youtube.com/watch?v=cfq7u52lvfI)

  75. `Watched` - [Animation - Iteration Count, Timing Function, Spinner Loading](https://www.youtube.com/watch?v=NPy2GGDX-kg)

  76. `Watched` - [Animation - Direction, Fill Mode, Play State, Delay](https://www.youtube.com/watch?v=P2QAAXONOac)

  77. `Watched` - [Up And Down Loading Animation Training](https://www.youtube.com/watch?v=9Q8W2YK3dyk)

  78. `Watched` - [CSS Selectors Reference Part 1](https://www.youtube.com/watch?v=PbKHU1Fb1oQ&t=340s)

  79. `Watched` - [CSS Selectors Reference Part 2](https://www.youtube.com/watch?v=WPOpfk_eCVE)

  80. `Watched` - [CSS Selectors Reference Part 3](https://www.youtube.com/watch?v=NJThXQrhmB0)

  81. `Watched` - [CSS Selectors Reference Part 4](https://www.youtube.com/watch?v=s6vDg-XoZ_Y)

  82. `Watched` - [CSS Selectors Reference Part 5](https://www.youtube.com/watch?v=eN9HxtDHREM)

  83. `Watched` - [Media Queries And Responsive Designs Intro](https://www.youtube.com/watch?v=F9FAcVwSV4c)

  84. `Watched` - [Media Queries And Responsive Designs Standards](https://www.youtube.com/watch?v=b2rWjPIZDT0)

  85. `Watched` - [Media Queries And Responsive Designs Practice](https://www.youtube.com/watch?v=QdXQ0Wa9oPY)

  86. `Watched` - [Create Your Framework](https://www.youtube.com/watch?v=xkFDwIPOzik)

  87. `Watched` - [CSS Global Values](https://www.youtube.com/watch?v=iueBHixQyX0)

  88. `Watched` - [The End And How To Master HTML And CSS](https://www.youtube.com/watch?v=YKUkssSbVls)



#### Assignments Solved

- **Total Assignments**: [76 of 76] - Topics: 20  

  ![100%](https://progress-bar.dev/100/?title=Solved)  

  Check Out The Assignments [Here 🤏](https://elzero.org/category/assignments/css-assignments/).

  




👉 CSS Courses & Articles

  
    

        
  1.  Learn CSS - MDN Web Docs
    2. 

        
  2.  CSS Tutorial - W3Schools
    3. 

        
  3.  Basic CSS - freeCodeCamp
    4. 

        
  4.  CSS-Tricks
    5. 

        
  5.  Learn CSS - Codecademy
    6. 

        
  6. Learn CSS - web.dev
    7. 

        
  7. Flexbox Froggy - A game for learning CSS flexbox
    8. 

        
  8.  Grid by Example - CSS Grid Layout
    9. 

        
  9.  CSS Reference
    10. 

        
  10.  Basic Concepts of Flexbox - MDN Web Docs
    11. 

        
  11.  Basic Concepts of Grid Layout - MDN Web Docs
    12. 

        
  12.  Complete Guide to CSS Functions
    13. 

      






  

    

      Status

      Assignments

      Solutions

    

  

  

      

      

                         

                        

      All Lessons

    

    

      Solved

      Assignments From 01 To 04

      Code

    

    

      Assignments From 05 To 08

      Code

    

    

      Assignments From 09 To 12

      Code

    

    

      Assignments From 13 To 16

      Code

    

    

      Assignments From 17 To 21

      Code

    

    

      Assignments From 22 To 26

      Code

    

    

      Assignments From 27 To 29

      Code

    

    

      Assignments From 30 To 33

      Code

    

    

      Assignments From 34 To 37

      Code

    

    

      Assignments From 38 To 41

      Code

    

    

      Assignments From 42 To 45

      Code

    

    

      Assignments From 46 To 53

      Code

    

    

      Assignments From 54 To 56

      Code

    

    

      Assignments From 57 To 64

      Code

    

    

      Assignments From 65 To 67

      Code

    

    

      Assignments From 68 To 73

      Code

    

    

      Assignments From 74 To 77

      Code

    

    

      Assignments From 78 To 82

      Code

    

    

      Assignments From 83 To 85

      Code

    

    

      Assignments From 86 To 88

      Code

    

  

  

    

      

                         

                         

        

          100%

        

      

    

  





  

Feel free to explore the repository, follow along with the course material, and practice with the provided assignments. Happy learning!



## Contribution

Contributions are welcome! If you have suggestions, improvements, please open an issue or submit a pull request.



## Contact

You can reach me via [Gmail](mailto:[email protected]) or on [Telegram](http://t.me/GziXnine).



## License

This project is licensed under the [MIT License](LICENSE).