Path title:

A Complete Guide To CSS

Created 2 years ago and Updated 2 years ago

Objectives:

HTML and CSS are the basic and essential technologies in the front-end field that's why this curation come into the existence. You should refer to these wiseshot steps in order to start learning HTML/CSS for FREE. Also please note that you, read the guided note on each step of this curation.

13h

50 Steps

for all

Free

7 watching

43 reading

+ 103

		#	Type	Title	Creator	Platform	Duration
		1		Learn HTML – Full Tutorial for Beginners (2022)	freeCodeCamp.org	youtube.com	4h
	What you'll learn in this step: Why HTML? - Because at the end, all CSS styles will be applied to an HTML element. That's why we need to learn the basics and semantics of HTML tags. - One more thing: if you are following this curation, then you should maintain the consistency of your learning. In order to maintain consistency, you can take on challenges like #100DaysOfCode publicly on any social media site. - I recommend taking the challenge on Twitter because there is no distraction and you can follow like-minded people in this field. Now, make your daily learning progress public.
		2		Introduction to CSS	W3School	w3schools.com	20m
	What you'll learn in this step: From this link, you will learn about the basics of CSS and their importance. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		3		CSS Selectors	Web Dev	web.dev	1h
	What you'll learn in this step: From this link, you will learn about the CSS selectors. Do not learn it in a hurry; take baby steps. 🙂 And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		4		CSS Colors	JavaTpoint	javatpoint.com	1h
	What you'll learn in this step: From this link, you will learn about different types of color declaration in CSS, such as hex color, RGB, rgba, hsl, hsla, etc. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		5		Backgrounds in CSS	Web Dev	web.dev	1h
	What you'll learn in this step: From this link, you will learn about the background property in CSS. It is a shorthand property, so learn it carefully. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		6		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the linear-gradient() function, which makes cool designs. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		7		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the border property and its different values. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		8		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the margin, which is a basic but important topic. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		9		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the padding, which is a basic but important topic as well. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		10		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the height and width of an element. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		11		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the max-width, max-height, min-height, and min-width. They are essential to know if we talk about responsive design. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		12		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the border-radius property in CSS, which makes rounded corners. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		13		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the font property. There are many properties available in CSS that make text more cool and interesting. Such are: font-family: fant-weight: font-size: font-style: letter-spacing: line-height: word-wrap: font: (A shorthand property), etc. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		14		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn how to add font-awesome icons (an external library for icons) into HTML and style them using CSS. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		15		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the box model in CSS. This is one of the most important topics from the interview perspective as well. So learn it thoroughly. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		16		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the box model in CSS from a YouTube video. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		17		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the different types of units in CSS, such as px, rem, em, %, etc. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		18		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the inline, inline-block, and block elements. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		19		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the position property in CSS, which includes: relative, absolute, sticky, fixed, and static. These topics are essential for the interview exam. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		20		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the z-index property in CSS, just like the stacking order of books on the table. This topic is important from the interview perspective. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		21		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the overflow property in CSS, which includes visible, hidden, scroll, etc. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		22		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the pseudo-class selectors in CSS; there are many such as :hover, :link, :active, :focus, etc. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		23		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the pseudo-element in CSS. "after" and "before" pseudo-elements are the most useful, and we can make more interesting designs using both of them. pseudo-elements are: ::after ::before ::first-letter ::first-line ::selection, etc. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		24		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the styling of the anchor tag or link element. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		25		JOIN TO UNLOCK	********	********	********
	What you'll learn in this step: From this link, you will learn about the styling input elements, or form elements. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
		26		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the styling the table elements. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	27		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will build a login form using CSS. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	28		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn how to build or design a table using CSS. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	29		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about one of the deep topics in CSS: specificity, which defines a style that will be applied to a particular element. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	30		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the cascade in CSS that shows how the browser chooses which style will be applied. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	31		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the CSS maths functions, like: calc(), clamp(), abs(), min(), and max() And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	32		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the flex-box that is used to build a one-dimensional layout. It is important from the interview perspective. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	33		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the flex-box from the YouTube video. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	34		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the grid that is used to build a two-dimensional layout. It is important from the interview perspective. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	35		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the grid from a YouTube video. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	36		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the box-shadow property in CSS that is used to make cool designs such as the neumorphism design. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	37		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn how to design like a neumorphism using the box-shadow property. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	38		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the transform property and its values that make great effects in CSS. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	39		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the transform property from a YouTube video. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	40		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the media queries that make our website responsive. They are confusing but essential. It's very important from the interview perspective. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	41		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will create a responsive hero section of a website. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	42		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the transition property that makes for smooth interaction. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	43		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the animation and its values and properties. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	44		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the object-fit property that sets how an image or video will be resized inside the container. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	45		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the variables in CSS that are used to hold values, like color, font-size, background-color, etc. It can be reused later in the document. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	46		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the filters in CSS and how they change the effect of an image or an element. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	47		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the polygon function of the clip-path and how they can be created. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	48		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the clip-path and its functions, like circle(), polygon(), ellipse(), etc. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	49		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: From this link, you will learn about the CSS masking that makes for more effective effects. And do not forget to share it on social media as a #100DaysOfCode challenge. 💥🚀
	50		JOIN TO UNLOCK	********	********	********
What you'll learn in this step: Last but not least, build, build, build... and try to build as much as possible. You can follow this GitHub repository for inspiration. And do not forget to share the learning progress on social media as a #100DaysOfCode challenge.💥🚀

Access to 45 More Steps with free subscription

Curated by:

Ajay Yadav

Front-end developer and content creator.

@atechajay

Curated from: