CSS for Everybody – From beginner to boss

Welcome to CSS for Everybody, with your coding teacher Kalob Taulien.

This course is made up of 3 mini-courses that include CSS 101, CSS 201, and CSS 301.

In CSS 101 we’re going to get started with making an HTML website look a little more modern using CSS. Absolutely no experience is required for this module. Together, we’ll start at the very beginning and go through all the basics so you don’t miss anything.

In CSS 201 we’ll dive into intermediate CSS and work with things like animations, transitions, flexbox, and CSS grid. This will give us all the skills we need to start making websites responsive so they look good on desktops, laptops, tablets, phones, and even TVs.

In CSS 301 we’re focused completely on responsive web design. That’s how we make a website look good on every device.

There are big projects at the end of all three modules. And in between several lessons are tasks to get hands-on experience.

To get the most out of this course, you’ll need to know basic HTML. And you’ll likely want to pause the videos every now and then and code along with me.

Welcome to CSS for Everybody, and I’ll see you inside.

–

What is CSS?

CSS, otherwise known as Cascading Stylesheets, is used to make websites look and feel beautiful. See all the colors, shapes, and layouts on Udemy? That is all done using CSS.

–

Who is this course for?

If you want to make websites look beautiful and work on device types such as phones, tablets, laptops, desktops, and TVs… this course is for you!

If you’ve never written any CSS or you have written some CSS but want to level up your skill from beginner to boss, this course is for you!

If you want to eventually get a job as a web developer, this course is for you!

–

What you’ll learn in CSS 101:

We’ll start off with getting a text editor installed, and learning about CSS syntax (the coding-style in which CSS is written). Then we’re going to dive into inline vs internal vs external styling, how to style certain HTML elements using CSS selectors, changing the text on our page, using different colors, changing default link styling, adding background images, working with borders, changing heights and widths of elements, changing spacing with margins and paddings, and making parts of your page see-through.

There are several tasks between the lessons for immediate hands-on experience, along with a final project.

What you’ll learn in CSS 201:

In this intermediate module, we’ll apply everything we learned in CSS 101, and get our hands dirty with more advanced CSS. This includes understanding the display property, the box model, outlines vs borders, specific element positioning, advanced CSS selectors, pseudo selectors and pseudo elements, transitions, animations, flexbox, and CSS grid.

Just like in the CSS 101 module, there is a final project and a bunch of homework tasks between the lessons for immediate hands-on experience.

What you’ll learn in CSS 301:

CSS 301 is all about responsive web design. This is how we make websites look great on all devices including phones, tablets, laptops, desktops, TVs, and more.

Responsive web design is the act of making a website “respond” to the width of the device that’s viewing your website. With this, you can write one codebase that works well on every type of device so all of your viewers and website users will be happy.

We’ll dive right into media queries and what mobile-first means and why it’s important. Then we’ll make images and video embeds responsive. And we’ll finish the course with a final project where you make a flexbox (or CSS grid) page layout and then transform it into a responsive website so it looks amazing on smaller devices like a phone.

–

Course requirements:

You should know some basic HTML already. CSS is designed to work with HTML, so if you don’t already know HTML then you’ll want to learn HTML first. Otherwise, if you already know a little HTML (you don’t need to be an expert) then this course is for you!

You will also need access to the internet to stream the lessons and a free text editing program like VS Code. And that’s it!