CSS for beginners - Learn to Tweak your Website Design

Learn CSS basics - Become a CSS Coder - No experience required.
4.4 (27 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,270 students enrolled
Instructed by Andrew Williams Design / Web Design
$45
Take This Course
  • Lectures 28
  • Contents Video: 3 hours
    Other: 4 mins
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2015 English

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 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.

The course 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 this course is for you, and offers you a fun way to learn CSS, using free tools.

Check out the introductory lecture for free.

What are the requirements?

  • A little HTML helps, though I'll cover the important stuff inside the course.

What am I going to get from this course?

  • 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

What is the target audience?

  • 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction to CSS
14:16

Important information on getting the most out of Udemy courses.

10:50

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.

03:33

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

04:43

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

01:59

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

Section 2: Three Ways to Insert CSS
03:59

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

05:13

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

08:38

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.

Section 3: Colour
08:14

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.

1 page

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.

03:56

Here are some examples of using color in CSS code

07:26

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

Section 4: Measurement Units
03:54

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

06:29

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

Section 5: Fonts & Text
08:02

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).

07:48

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.

Section 6: Links
09:53

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

Section 7: Lists
02:16

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

05:42

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

Section 8: Classes & IDs
12:01

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

Section 9: The Box Model
18:09

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.

06:17

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

03:51

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.

Section 10: CSS Resources & Reference
CSS Help
1 page
Future Lectures in this Course
Article
09:45

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

1 page

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.

1 page

This document lists desktop CSS editors. They are not needed in this course, but you may find you want one as you progress with your CSS learning.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Andrew Williams, SEO and Wordpress Expert, teacher and author

I run a website called ezSEONews, where I teach my visitors search engine optimization (SEO) skills, and the art of building websites with Wordpress. I have also written and published a number of books that are available on Amazon Kindle and as paperbacks, including best selling books on Wordpress ("Wordpress for Beginners") and SEO ("SEO 2014 & Beyond").

As an ex-schoolteacher, I hope I can make complicated topics simple to understand. I certainly enjoy trying!

Ready to start learning?
Take This Course