Design
Web Design
CSS
CSS for beginners
4.9 (106 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,805 students enrolled

CSS for beginners

Learn CSS basics to Tweak your Website - Become a CSS Coder - No experience required.
4.9 (106 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,805 students enrolled
Created by Andrew Williams
Last updated 3/2019
English
English [Auto-generated]
Preview this course
CSS for beginners
Current price: $65.99 Original price: $94.99 Discount: 31% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • 2 articles
  • 4 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Confidently create and edit CSS to control website design.
  • Know the best free tools to help them edit CSS
  • Know the main keywords important to CSS and how to use them to come across as an experienced CSS coder
  • Know different ways to specify color in CSS
  • Be able to insert CSS code into a web page in three ways
  • Understand measurement units used in CSS
  • Work with font families and understand how they work.
  • Format text, links, lists and other HTML page elements.
  • Know the difference between classes and IDs and when to use them
  • Understand the Box Model of CSS to correctly position elements on a page
  • Be able to go to any site, inspect the CSS and even experiment with the CSS of any site
Requirements
  • A little HTML helps, though I'll cover the important stuff inside the course.
Description

Web pages are built with HTML, but styled with CSS. As with any other coding language, CSS has a learning curve that puts off many beginners. This CSS for beginners course aims to change all that and make learning CSS fun. As you work through the tutorials, you can try out the examples, or try your own CSS and see the live preview of your code immediately to check if you got it right.

CSS for Beginners starts with an introduction to CSS where you can get your feet wet by creating your own uniquely styled Google's homepage.

After learning a few key phrases you'll move on to look at the three ways you can implement CSS into your web pages.

You'll look at color, including web safe colors, and the different ways you can add color to your web pages.

We'll look at how you can style any HTML element, from headers to lists using base selectors, before looking at the design power offered by Classes and IDs to really put your CSS designs into overdrive.

With a great working knowledge of the main concepts in CSS, we'll cover the Box Model of CSS, which is a great source of confusion for many CSS beginners. Using a simple diagram as reference, you can roll up your sleeves and explore the Box Model with a simple CSS coding session. Not only can you follow along in real-time using the same free tool that I do, you can also experiment and have fun as you learn.

If you are a beginner to CSS or struggled with the learning curve in the past, then CSS for Beginners is the course for you, and offers you a fun way to learn CSS, using free tools.

Check out the introductory lecture for free.

Who this course is for:
  • Anyone wanting to learn CSS, but is scared it might be a little too technical.
  • Anyone that wants to edit their own website layout or formatting but doesn't know how.
Course content
Expand all 28 lectures 02:45:43
+ – Introduction to CSS
5 lectures 29:50

Important information on getting the most out of Udemy courses.

Need Help With Udemy Interface?
Preview 08:45

CSS is incredibly powerful. By way of introducing this course, I took the Google homepage and changed the look and feel using CSS and a free browser plugin.

An Introduction to CSS
Preview 10:50

This lecture shows you the tools you'll need to install before we move on with the course.

Get Ready to Learn CSS
Preview 03:33

Don't worry what that title means, we're simply going to look at the construction of valid CSS code.

Nomenclature & Syntax
04:43

CSS stands for Cascading Style Sheets, but what does the cascading bit mean?

Why "Cascading" Style Sheets?
01:59
+ – Three Ways to Insert CSS
3 lectures 17:50

There are three ways we can insert CSS into a page. The first one, called Inline Styles are explored in this video.

Inline CSS
03:59

The second way of inserting CSS into a web page is with internal CSS. This video looks at Internal CSS:

Internal CSS
05:13

External Style sheets are the third option. This video looks at how we use them and why they are the best option for most situations.

External CSS
08:38
+ – Colour
4 lectures 19:36

There are a few ways we can specify a color in CSS. This tutorial looks at them, and where yo find help if you need it.

Specifying Color in CSS
08:14

Color is extremely important in web design. This resource file provides you with links to desktop color pickers that allow you to capture any color on your computer monitor, and online color pickers to help you choose colour schemes for your site.

Color Picking Tools
1 page

Here are some examples of using color in CSS code

Examples of color in CSS
03:56

This lecture looks at the background color of a webpage, but also how to use images in the background.

Background Color & Images
07:26
+ – Measurement Units
2 lectures 10:23

Length is a numerical value plus a unit, but length can be an absolute or relative measurements. This lecture looks at the diffference.

Different Units of "Length"
03:54

Let's look at some examples of using the units in CSS.

Examples of Units in Action
06:29
+ – Fonts & Text
2 lectures 15:50

This lecture looks at font-families, what they are and how you can play around with them on a live website (even if you do not own that website).

Font Family
08:02

In this lecture, we'll look at some other font and text properties that can change the look of the text on a web page.

Font Properties
07:48
+ – Links
1 lecture 09:53

Without links, the Internet would not work. This lecture looks at how we can format the links on our webpages.

Links and Pseudo Classes
09:53
+ – Lists
2 lectures 07:58

Let's start with a brief refresher on the HTML code used to create lists.

HTML code for Lists
02:16

Now let's see how we can control these lists with CSS.

Modifying Lists with CSS
05:42
+ – Classes & IDs
1 lecture 12:01

CSS gives us classes and IDs so we can create our own selectors.

Class and IDs
12:01
+ – The Box Model
3 lectures 28:17

The box model in CSS is important to understand because all elements on an HTML page are inside boxes, whether you can see the box or not.

The Box Model
18:09

Divisions, or DIVs for short, allow us to define areas of the page to treat as a single unit.

Divisions (DIVs)
06:17

The float property allows us to float boxes to the left or right. When you float a box, the rest of the web page content will flow around it.

The Float Property
03:51
+ – CSS Resources & Reference
5 lectures 11:04
CSS Help
1 page
Future Lectures in this Course
00:23

A demonstration of CSE HTML Validator and how it can help you create better CSS.

CSE Validator Demo
09:45

Albert Wiersch, developer of CSE HTML Validator has kindly offered my students of this course a free copy of the tool. Here are the download details.

CSE HTML Validator Free Download
1 page

Useful resources

Bonus: Resources
00:56