Don't forget to hit the ⭐ if you like this repo.
CSS exercises are designed to help web developers and designers practice and enhance their CSS skills. These exercises usually involve creating and styling web page elements, such as text, images, and layout, using CSS. They may also involve using CSS properties and selectors to manipulate various aspects of the page design, such as font size, color, background, borders, and positioning.
CSS exercises can vary in difficulty level, from beginner to advanced, and often include challenges that require critical thinking and problem-solving skills. Completing CSS exercises can help web developers and designers to improve their proficiency with CSS, and develop the ability to create complex and visually appealing website designs.
| Lab | Topic | Title | Files |
|---|---|---|---|
| 11 | CSS | HTML Text Appearance |  |
| 12 | CSS | Text and Box Model | |
| 13 | CSS | Layout (Mock & Style) | |
| 14 | CSS | Website Layout | |
| 15 | CSS | Layout | |
| 16 | CSS | Form Layout | |
- This task must be done in groups (4 people per group).
- Please enter the group member's name into Google Sheets.
There are various online platforms and resources that offer CSS exercises and challenges:
-
Codecademy Codecademy is a popular online learning platform that offers interactive tutorials and exercises on web development skills, including CSS. Their CSS course covers a range of topics, from basic styling to advanced layout techniques.
-
W3Schools W3Schools is a well-known online learning platform that provides tutorials and exercises on various web development skills, including CSS. Their CSS exercises include challenges on selecting and styling HTML elements, working with text and fonts, and creating responsive layouts.
-
FreeCodeCamp FreeCodeCamp is a nonprofit organization that offers a full web development curriculum, including a course on responsive web design that covers CSS. Their CSS exercises include challenges on styling HTML elements, creating responsive layouts, and implementing CSS animations.
-
CSS Diner CSS Diner is a fun and interactive website that teaches CSS selectors through a series of restaurant-themed challenges. Users can select different menu items and apply different selectors to style them.
-
Flexbox Froggy Flexbox Froggy is another interactive game that teaches CSS layout techniques using the Flexbox model. Users can move a frog through a series of challenges, applying different Flexbox properties to solve them.
-
CSS Zen Garden CSS Zen Garden is a popular website that showcases the power of CSS by displaying the same HTML code styled in a variety of different ways. Users can study the CSS used to create each design and try to recreate them on their own.
-
CSS-Tricks CSS-Tricks is a website that provides tutorials, articles, and challenges on web development skills, including CSS. Their CSS challenges cover a range of topics, from basic layout techniques to more advanced topics like CSS animations and transitions.
-
Mozilla Developer Network Mozilla Developer Network is a resource that provides documentation and tutorials on various web development skills, including CSS. Their CSS exercises include challenges on basic styling techniques, positioning elements, and using Flexbox and Grid layout models.
-
SoloLearn SoloLearn is a mobile app that offers courses on various programming languages and web development skills, including CSS. Their CSS course includes interactive lessons and quizzes, as well as coding challenges to practice different CSS concepts.
-
TutsPlus TutsPlus is a website that offers tutorials and articles on various web development skills, including CSS. Their article on CSS best practices for beginners provides tips and exercises on using CSS effectively, from organizing CSS files to using CSS frameworks.
- Introduction to CSS
- Fonts and Web Fonts
- Responsive Web Design
- Navigational Structures
- CSS Generators
- CSS Tools
- CSS Resources
- Stop using so many divs! An intro to semantic HTML
- CSS Cheat Sheet
- CSS Code Examples
- Learn CSS Grid by building a simple Calculator Layout
- Video: Build a Calculator with CSS Grid
- Best HTML and CSS Cheat Sheets
- CSS2 Cheat Sheet
- Devopedia: Cascading Style Sheets
- Khan Academy: CSS box model
- Devopedia: CSS Box Model
- Devopedia: CSS Flexbox
- Devopedia: CSS Grid Layout
- CSS layout
- Box Model: CSS Website Layout
- W3.CSS Layout
- Getting Started With CSS Layout
- Grid by Example
Please create an Issue for any improvements, suggestions or errors in the content.
You can also contact me using Linkedin for any other queries or feedback.