30 Days CSS challenge - ZERO to HERO
Over 30 days, we will cover everything from the basics of CSS syntax to more advanced concepts like responsive design and animation.
Table of contents
- Day 01 - Setup
- Day 02 - HTML tags
- Day 03 - CSS Selectors Type, class, and ID
- Day 04 - Box Model
- Day 05 - Backgrounds
- Day 06 - Borders
- Day 07 - Floats
- Day 08 - Positioning
- Day 09 - Sizing Units
- Day 10 - Logical Properties
- Day 11 - border-radius, box-shadow, and text-shadow
- Day 12 - Web Fonts
- Day 13 - Responsiveness
- Day 14 - Animations
- Day 15 - Transitions
- Day 16 - Responsive Images
- Day 17 - Filters
- Day 18 - Gradients
- Day 19 - Transforms
- Day 20 - Selectors :first-child, :last-child, and :nth-child
- Day 21 - Pseudo-Classes
- Day 22 - Pseudo-Elements
- Day 23 - Media Queries
- Day 24 - CSS3 columns
- Day 25 - Flexbox
- Day 26 - Grid
- Day 27 - Shapes
- Day 28 - Review All
- Day 29 - Sass
- Day 30:
- Wrap up!
- Some Useful articles:
Welcome to my ZERO to HERO CSS challenge!
This is the perfect challenge for anyone who wants to learn or brush up on their CSS skills. Over 30 days, we will cover everything from the basics of CSS syntax to more advanced concepts like responsive design and animation. By the end of this challenge, you will have a strong foundation in CSS and be able to build amazing websites.
Are you ready to get started? Let's go!
- What is CSS?
CSS(Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tells a web browser how to display a document written in HTML or XML.
CSS is used to style all HTML tags, including the document's body, headings, paragraphs, and other pieces of text. CSS can also be used to style the display of table elements, grid elements, images, and other media.
- How does CSS work?
CSS rules are made up of two parts: selectors and declarations.
Selectors are part of a CSS rule that identifies the HTML element or elements you want to style. For example, the selector p will select all <p> elements on a page.
Declarations are part of a CSS rule that includes the styling instructions for the selected element or elements. Each declaration includes a CSS property and a value. The property is the aspect of the element you want to style, and the value is how you want to style it.
For example, the declaration color: red; will make all text within the selected element(s) red.
CSS rules can be written in two ways: inline or in an external stylesheet. Inline CSS is used to style a single HTML element and is written within the element's opening tag. External CSS is used to style entire webpages and is written in a separate stylesheet file linked to the HTML document.
- What is HTML?
HTML (Hypertext Markup Language) is a markup language used for structuring a web document. HTML elements are the building blocks of HTML pages and are represented by tags.
Tags are used to indicate the start and end of an HTML element. Most tags have an opening tag <tag> and a closing tag </tag>. For example, the <p> tag represents a paragraph element. The opening <p> tag indicates the start of a paragraph, and the closing </p> tag indicates the end of the paragraph.
HTML documents are made up of elements nested inside each other. The root element of an HTML document is the <html> element. The <html> element contains two child elements: the <head> element and the <body> element.
The <head> element contains information about the document, such as the document's title. The <body> element contains the document's content, such as headings, paragraphs, and images.
Now that you know the basics of HTML and CSS let's move on to the first day of the challenge!
Day 01 - Setup
- Choose a code editor: VSCode, Atom, Sublime Text, etc.
- Download and install the chosen code editor.
- Create a new project folder for the Roadmap.
- Inside the project folder, create an index.html file and astyle.css file.
- Add a basic HTML boilerplate to the index.html file.
- Link the CSS file to the HTML file.
- Write a simple CSS rule to change the page's background color.
- Save and open the HTML file in a web browser to check that the rule works properly.
Day 02 - HTML tags
- Learn about the basic HTML tags and how to use them properly.
- Experiment with using different HTML tags to create a simple web page.
- Try adding images, links, and lists to the web page.
Day 03 - CSS Selectors Type, class, and ID
- Learn about the different types of CSS selectors.
- Experiment with using type, class, and ID selectors to style a web page.
- Try adding multiple class or ID selectors to an element.
Day 04 - Box Model
- Learn about the box model and how it can be used to style elements on a web page.
- Experiment with changing elements' margin, padding, and border properties.
- Try using different values for these properties, such as percentages, ems, and pixels.
Day 05 - Backgrounds
- Learn about CSS backgrounds and how they can be used to add color and images to web pages.
- Experiment using different background properties, such as background-color, background-image, and background-repeat.
- Try using different values for these properties.
Day 06 - Borders
- Learn about borders and how they can be used to add color and images to web pages.
- Experiment using different border properties, such as border-color, border-image, and border-radius.
- Try using different values for these properties.
Day 07 - Floats
- Learn about CSS floats and how they can be used to create different layouts for web pages.
- Experiment with using floats to position elements on the page.
- Try using different values for the float property, such as left, right, and none.
Day 08 - Positioning
- Learn about CSS positioning and how it can be used to create more complex layouts for web pages.
- Experiment using different position values, such as static, relative, absolute, and fixed.
- Try using different values for the top, bottom, left, and right properties.
Day 09 - Sizing Units
- Learn about different sizing units that can be used in CSS, such as pixels, percentages, and ems.
- Experiment using different values for the width and height properties.
- Try using different values for the font-size property.
Day 10 - Logical Properties
- Learn about CSS logical properties and how they can be used to create websites that look good on all devices.
- Experiment using different values for the margin, padding, and border properties.
- Try using different values for the width and height properties.
Day 11 - border-radius, box-shadow, and text-shadow
- Learn about CSS3 and how it can be used to add new styles to web pages.
- Experiment using CSS3 properties, such as border-radius, box-shadow, and text-shadow.
- Try using different values for these properties.
Day 12 - Web Fonts
- Learn about web fonts and how they can be used to add custom fonts to web pages.
- Experiment with using different web fonts from Google Fonts.
- Try using different values for the font-family property.
Day 13 - Responsiveness
- Learn about responsive design and how it can be used to create websites that look good on all devices.
- Experiment with using media queries to change the styles of elements on the web page.
- Try using different values for the width and height properties.
Day 14 - Animations
- Learn about CSS animations and how they can be used to add movement to web pages.
- Experiment using different CSS properties, such as animation-name, animation-duration, and animation-fill-mode.
- Try using different values for these properties.
Day 15 - Transitions
- Learn about CSS transitions and how they can be used to add smooth transitions between styles.
- Experiment using different CSS properties, such as transition-property, transition-duration, and transition-timing-function.
- Try using different values for these properties.
Day 16 - Responsive Images
- Learn about responsive images and how they can be used to create websites that look good on all devices.
- Experiment using different CSS properties, such as max-width, min-width, and media queries.
- Try using different values for these properties.
Day 17 - Filters
- Learn about CSS filters and how they can be used to add special effects to images.
- Experiment using different filter properties, such as grayscale, sepia, and blur.
- Try using different values for these properties.
Day 18 - Gradients
- Learn about CSS3 gradients and how they can be used to add color to web pages.
- Experiment using different CSS3 gradient properties, such as background-image, gradient-stop, and repeating-linear-gradient.
- Try using different values for these properties.
Day 19 - Transforms
- Learn about CSS3 transforms and how they can be used to change the appearance of elements on a web page.
- Experiment using different CSS3 transform properties, such as rotate, scale, and translate.
- Try using different values for these properties.
Day 20 - Selectors :first-child, :last-child, and :nth-child
- Learn about CSS3 selectors and how they can be used to target specific elements on a web page.
- Experiment with using different CSS3 selectors, such as :first-child, :last-child, and :nth-child.
- Try using different values for these properties.
Day 21 - Pseudo-Classes
- Learn about CSS3 pseudo-classes and how they can be used to target specific elements on a web page.
- Experiment with using different CSS3 pseudo-classes, such as :hover, :focus, and :active.
- Try using different values for these properties.
Day 22 - Pseudo-Elements
- Learn about CSS3 pseudo-elements and how they can be used to add additional content to web pages.
- Experiment with using different CSS3 pseudo-elements, such as ::before and ::after.
- Try using different values for these properties.
Day 23 - Media Queries
- Learn about media queries and how they can be used to create responsive designs for web pages.
- Experiment using different media query properties, such as min-width, max-width, and orientation.
- Try using different values for these properties.
Day 24 - CSS3 columns
- Learn about CSS3 columns and how they can be used to create multi-column layouts for web pages.
- Experiment using different CSS3 column properties, such as column-count, column-width, and column-gap.
- Try using different values for these properties.
Day 25 - Flexbox
- Learn about CSS3 flexbox and how it can be used to create flexible layouts for web pages.
- Experiment using CSS3 flexbox properties, such as flex-direction, flex-wrap, and justify-content.
- Try using different values for these properties.
Day 26 - Grid
- Learn about CSS3 grid and how it can be used to create grid-based layouts for web pages.
- Experiment using different CSS3 grid properties, such as grid-template-columns, grid-template-rows, and grid-gap.
- Try using different values for these properties.
Day 27 - Shapes
- Learn about CSS3 shapes and how they can be used to add interesting designs to web pages.
- Experiment using different CSS3 shape properties, such as shape-outside and clip-path.
- Try using different values for these properties.
Day 28 - Review All
- Review all of the CSS3 features covered over the past 27 days.
- Experiment with using different CSS3 properties and try to create your unique designs.
- Once satisfied with your designs, save the astyle.css file and open the HTML file in a web browser to check the results.
Day 29 - Sass
- Learn about Sass and how it can be used to streamline the CSS development process.
- Experiment using different Sass features, such as variables, nesting, and mixins.
- Try creating your Sass stylesheet and see how it can simplify the CSS development process.
Day 30:
- Review all of the topics that have been covered over the past 29 days.
- Experiment with using different CSS3 properties and try to create your unique designs.
- Take time to explore other CSS resources and learn about more advanced CSS features.
Wrap up!
Congratulations on completing the 30-Day CSS Challenge!
Over the past month, you've learned about many different CSS properties and how they can be used to enhance the look and feel of web pages. You've also learned about Sass, a powerful CSS preprocessor that can streamline development. Take some time to experiment with all the different features you've learned and see what you can create. With a little practice, you'll be creating beautiful and responsive designs in no time!
If you have any questions or comments, feel free to reach out to me on my Twitter handle @iamatifriaz
If you enjoyed this content, don’t forget to like, comment, and reshare!
Thanks for taking part in the challenge.
Some Useful articles:
- 30 Days Frontend Development Roadmap 2022-2023
- JavaScript ES6 in a Nutshell: A Quick Overview Cheatsheet
- Learn ReactJS – Complete Roadmap for Beginners in 2022
- 5 Best Frontend JavaScript Frameworks in 2022
Happy coding!