CSS Tutorial For Beginners

What is CSS and why is it important to web development? Build your very first web page from scratch with these five free tutorials—sign up here: ↙️

In part three of this web development tutorial series, we will focus on CSS, covering:

An introduction to CSS (00:00)

What is CSS? (00:39)

How to set up and prepare your file? (01:18)

What are CSS selectors? (03:42)

What are CSS grids? (09:44)

What is mobile responsiveness? (12:30)

Let’s start your first CSS project — Building a portfolio site (15:10)

Let’s recap (35:47)

Links to the free resources required for this tutorial:

Making a career change? Let us know in the comments below what you would like to learn about CSS, and what videos you’d like to see from CareerFoundry!

#CSS #CCStutorial #Webdevelopment

Check out our other social media channels and blog here:

For more information on our courses visit us at:

CSS Tutorial For Beginners (2021):

[careerfoundry]

Looking to learn more about CSS? This is the video for you. Work alongside the video by signing up to our free web development short course: Build your very first web page from scratch with these five free tutorials—sign up here: ↙️

[MyMediaVids]

I have tried for the past 2/3 months to get into coding in any capacity and figured I would start with python and html. Having absolutely no experience in coding I find a lot of tutorials assume a certain level of knowledge and it's put me off coding for weeks at a time.
I find these tutorials really easy to follow and understand and I love the fact that we get to see the thought process and the code being written in real-time.
I hope to find more tutorials like this to really break down coding and allow me to understand what it is that I'm doing, not just a "how-to".

[axhobaxhobstar]

the font size is very small, I have to get closer to the screen other than that the tutorial is perfect.

[emilianrapheal]

Your tutorial is very easy to understand. I'm learning alot through your videos on Web Development for beginners. Thank you CareerFoundry.

[zoey]

how do you move all the code one space to the right when you highlight it?? thank you!

[arielcq]

its really confusing when you use Sublime Text shortcuts. For example, it wasnt clear when you made the "container" class, the way you automatically indented everything

[bloo-igloo]

zoom in and re edit videos please god with such low resolution screen capture I constantly find myself infuriated by the fact that he will just start doing something and not explaining it to the end and also just not being able to tell what tiny sign he uses next to something he never taught or references again. This course is so close to being great but I constantly have to stop and adjust the zoom in chrome and still cant see a character and have to reference a different sight with the questions I have. It makes it down right frustrating at times and this is such an easy

[neemuiq]

What a tutorial! Splendid 😇.Very calm and Cool explanation. Thank you so much. May I know your name plz?

[Magarthita]

Thank you very much for, putting your time on teaching other people use ful skills. thanks.

[janayabrown]

I had to use <meta content="width=device-width, initial-scale=1" name="viewport" /> [note it uses "device" instead of "display"] for my meta tag for my website to be responsive. Hope this does mess something up in the future

[Ali_el]

I repeated this video like 5 times, and i still have mistakes. I'm going crazy😂 i really like the idea of majoring in web development, but the amount of mistakes I'm doing, I doub that I'll succeed in it.

[christopheredwin]

Font Size is very small... not able to see your code... need to increase font size or need to zoom the editor...

[tizianberchtold]

The color isn´t showing up on my Sublime Text 3. It isn´t saving it correctly either. What should I do?

[dagmarkalucic]

Code is the same as mine but my site wont change when i select different devices. Cant find something wring 🥺

[mcmurdostation]

First of all good Tutorials! So no to my problem @ 14:58 why is there a single } parenthesis behind the media query? And in the end we have 2 { ?

[Jthearts]

I can't get the . (class) and # (ID) to work. Please advise if there is any other option?

[DayoLucifer]

How do I move the selected code one step to the right on Mac ? He forgot to say this. I tried shift - right arrow and didn’t work. Lookup up on google. It says control - option - command - right arrow and still didn’t work.

[isirasooriyaarachchi]

for the grid i did this but it didnt appear to me

.grid-table {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto auto;

im using Sublime text 4

[naturemedic]

Hello, CareerFoundry
I participate in the 5 days free web development tutorial but I cannot proceed for the CSS because whenever I type
p {
color: red;
}
in the style.css file &
<link rel="stylesheet" href="styles.css">
in the portfolio.html file just under
<title>My Portfolio</title> just as you tell us
Nothing change when refreshing my browser!
Color remains black on
<p>{{ Pause and Ponder }}</p>
And the same happen to
<h3> </h3> colors. I recheck my html and css files but couldn't find the possible mistake, either I couldn't find the mistake or couldn't tell which or what is the mistake. But I even delete the CSS file and re-create new file and retyped and re checked the html again and again then saved it and then booom! It worked not! 🤭.
Yea anyways, it still don't work after rechecking so I gave myself a day off! 🤔! ! !

[elvisbeikmanis]

The value "display-width" for key "width" is invalid, and has been ignored.