Introduction to CSS

by John Elder

2h 33m

Auto
  • HD
  • 360p
1.00x
  • 0.50x
  • 0.75x
  • 1.00x
  • 1.25x
  • 1.50x
  • 1.75x
  • 2.00x
cc
Auto
  • HD
  • 360p
1.00x
  • 0.50x
  • 0.75x
  • 1.00x
  • 1.25x
  • 1.50x
  • 1.75x
  • 2.00x
cc
Auto
  • HD
  • 360p
1.00x
  • 0.50x
  • 0.75x
  • 1.00x
  • 1.25x
  • 1.50x
  • 1.75x
  • 2.00x
cc
Auto
  • HD
  • 360p
1.00x
  • 0.50x
  • 0.75x
  • 1.00x
  • 1.25x
  • 1.50x
  • 1.75x
  • 2.00x
cc

Overview

If you have ever wanted to build and design stylish, responsive websites, this introductory course can help you get started with CSS for web design and development. Designed for beginners, no prior experience with CSS is required to get the most out of this course. You will start with the basics and apply the practical knowledge you learn through hands-on application and examples every step of the way. By the end of the course, you will have learned to apply fundamental design elements in CSS to create a beautiful and functional user experience.


Syllabus

Course Introduction3m 48s

What is CSS and what is it used for?

Watch lesson

Setting up a Cloud Development Environment4m 21s

What tools do you need to write CSS?

CSS Syntax4m 25s

Understanding the basic CSS syntax.

Using CSS 3 Ways4m 56s

Learn the three main ways to use CSS on a web page.

Colors4m 01s

How to add and change the colors of elements.

Watch lesson

Backgrounds5m 06s

Changing background colors, images, and more.

Borders3m 28s

Adding borders to elements, and modifying the border style.

Margins and Padding3m 38s

Understanding the difference between Margins and Padding.

Height and Width3m 07s

How to change the height and width properties of an element.

Box Model2m 59s

Understanding the CSS Box Model for your design and layout.

Outline4m 05s

Learn how to change the style, color, and width of an outline.

Text Formatting5m 03s

How to change the formatting and alignment of text.

Fonts3m 15s

How to manipulate the font family, boldness, style, and size, of text.

Links4m 08s

Learn to style links. Understanding active, hover, and visited formatting as well as text decoration.

Lists4m 02s

Styling both ordered, and un-ordered lists.

Tables4m 45s

How to greatly alter the look of HTML tables.

Display3m 15s

Understanding how an element is displayed with CSS.

Position3m 27s

Understanding static, relative, fixed and absolute positioning.

Float and Clear3m 27s

Understanding Float left, Float right, and the clear statement.

Inline-Block3m 02s

Learn how to make floating easier with Inline-Block

Align4m 36s

Aligning elements horizontally and vertically, as well as centering objects.

Combinators4m 26s

What are Combinators, and when to use them.

Pseudo-Class3m 39s

Understanding CSS Pseudo-Classes and how to use them.

Rounded Corners4m 42s

Adding cool rounded corners to things.

Border Images3m 31s

Using images for borders instead of lines.

Gradients4m 12s

Using Gradients with nothing more than CSS (no images needed).

Shadows3m 32s

Adding Shadows to elements.

Rounded Images3m 07s

Adding Rounded features to images with CSS.

Buttons3m 29s

Creating and styling buttons with CSS.

Pagination3m 32s

Creating Pagination with CSS.

Intro to Responsive Design3m 58s

Understanding the concept of responsive design for mobile devices.

Grid View4m 12s

What is the grid view and why is it important?

Media Queries4m 04s

Showing different web page designs based on different sized devices.

Watch lesson

Images3m 41s

How to resize images responsively for mobile devices.

Using Responsive Frameworks4m 20s

How to use a framework like Bootstrap to shortcut your responsive programming.

Setting Up Bootstrap3m 46s

How to add Bootstrap to your website.

Basic Bootstrap Usage4m 25s

Understanding the basics of Bootstrap

Modifying Bootstrap4m 23s

How to modify the underlying bootstrap CSS code.

HTML, CSS, and Javascript Working Together3m 36s

How do HTML, CSS, and Javascript work together to make up front-end web development

Description

Highlights:

  • 39 practical tutorials.
  • Learn how to add and change colors of elements.
  • Add background colors, images and borders.
  • Understand the difference between margins and padding.
  • Change the formatting and alignment of text.
  • Style links, lists and manipulate fonts.
  • Understand CSS pseudo-classes and how to use them.
  • Use gradients, shadows and rounded corners.
  • Add buttons and pagination for easy navigation.
  • Make your design responsive for mobile devices.
  • Setting up, using and modifying Bootstrap.
  • Understand how HTML, CSS and JavaScript work together.

Once enrolled, our friendly support team and tutors are here to help with any course related inquiries.


Accreditations and approvals

CPD - The CPD Certification Service.

Reviews1

View all reviews