MasteryVault

Understanding CSS3 in Web Development

Get course

Description

In this course you will learn to work with different CSS3 properties in developing a website, understanding CSS syntaxes and formatting HTML elements.  

 

 

Who is this course?

This course is for anybody from no knowledge of CSS to advanced knowledge of CSS.

Module 1 - Introduction

1
Overview
4 mins
Brief overview of the entire course.
2
What is CSS
1 min
3
Why Choose CSS3
2 mins
brief history/evolution of CSS and why CSS3 is better used.

Module 2 - Getting Started with CSS

1
Overview
1 min
Brief overview of the module. You will learn; 1. How to install the software to use 2. how to set up a CSS environment 3. Basics of CSS and website layout
2
Software/tools to use for CSS
1 min
3
Installation of the text-editor
8 mins
Installing Sublime text.
4
Setting-up a CSS environment
6 mins
5
Basics of CSS
2 mins
Things you should know about CSS.
6
Website Layout
4 mins

Module 3 - Adding CSS in an HTML file

1
Overview
1 min
Overview of the module. You will learn how CSS styles can be added to an HTML file; - Inline CSS - Internal CSS - External CSS
2
Inline CSS
5 mins
3
Internal CSS
6 mins
4
External CSS
9 mins
5
Quiz
5 questions

Module 4 - CSS Syntaxes and Properties

1
Overview
1 min
Overview of the module. You will get to learn; - how CSS syntaxes looks - some CSS properties - basic CSS declarations - CSS selectors and values
2
CSS syntaxes
4 mins
3
CSS properties
9 mins
Basic CSS properties like; - Text properties - Font properties - Border properties - Link properties
4
Basic declarations of CSS
9 mins
5
Selectors
17 mins
You will learn the different selectors in CSS; - Type selectors - Class selectors - Id selectors - Group selectors
6
Values
7 mins
7
Quiz
5 questions

Module 5 - Colors

1
Overview
1 min
You will learn how to add colors to an HTML document using; - Color names - RGB values - HEX codes - HSL values
2
Adding colors using color names
9 mins
3
RGB values
8 mins
4
HEX codes
10 mins
5
HSL values
15 mins
6
Quiz
5 questions

Module 6 - Text/Font Styling

1
Overview
1 min
An overview of this module, you will learn; - the difference between text and font - properties to format a text - properties to format fonts
2
Differences between text and font
3 mins
3
Text formatting
23 mins
We will be working with properties like; - text-decoration - text-align - text-transform - text-overflow - letter-spacing - word-wrap
4
Font formatting
15 mins
We will talk about; - font-family - font-style
5
font-variant and font-weight properties
9 mins
You will learn how to work with - font-variant - font-weight
6
font-size property
12 mins
You will learn to use font-size property using; - pixels (px) - em - % - combination of em and %
7
Quiz
5 questions

Module 7 - Styling and More CSS Properties

1
Overview
1 min
You will be learning - List styling and the properties to style a list - Table styling and properties to style a table - Link styling and properties to style a link - CSS comments
2
List styling
19 mins
We will talk about the properties used in styling a list like; List-style-type List-style-position List-style-image List-style
3
Table styling – border
7 mins
We will be styling the border of a table
4
Table styling – size
9 mins
Learn to either increase or decrease the size of a table.
5
Table styling – alignment
6 mins
You will be learning how to align the data in a table.
6
Table styling – appearance
13 mins
You will learn how to change the way a table appears or looks
7
Link styling using color property
8 mins
You will be learning to style the different link states using the color property.
8
Link styling using text-decoration property
5 mins
Styling the different link states using the underline value of the text-decoration property
9
Link styling using background-color property
5 mins
You will learn to specify a background-color for a link.
10
CSS comments
9 mins
Learn to work with comments in CSS.
11
Quiz
5 questions

Module 8 - Box Model

1
Overview
1 min
Overview of the module. We will be discussing about; - Box model - Margin, Border, and Padding properties - Height and Width properties - Overflow property
2
What box model means
11 mins
3
Margin properties
7 mins
You will learn how to work with the different margin properties for the different sides of a box or an element..
4
Margin shorthand property
9 mins
Working with the margin shorthand property.
5
Border-style property
13 mins
You will learn how to work with border-style property and the different values.
6
Border-width property
7 mins
You will learn to work with border-width property using pixel values, % values and predefined names
7
Border-color property
9 mins
Learn to style a border using the border-color property.
8
Border shorthand property
7 mins
Learn to use the border shorthand property to style the color, width, and style of a border.
9
Padding property
13 mins
Working with padding properties.
10
Height and Width properties
16 mins
11
Min-width and max-width properties
8 mins
Learn to use the min-width and max-width property to style a box.
12
Min-height and max-height properties
6 mins
13
Overflow property
11 mins
working with overflow property values like; - scroll - visible - hidden - auto
14
Quiz
5 questions

Module 9 - Position_Float_Clear Properties

1
Overview
1 min
You will learn to work with; - position property - float property - clear property
2
Position property – static
6 mins
3
Position property – relative
6 mins
4
Position property – absolute
7 mins
Learn to work with absolute value of the position property
5
Position property – fixed
8 mins
6
Float property
12 mins
Learn to float elements to different sides of a webpage or a container.
7
Side by side float
5 mins
8
Clear property
4 mins
9
Quiz
5 questions

Module 10 - Background

1
Overview
1 min
Overview of the module. You will learn to work with properties like; - Background-color - Background-image - Background-repeat - Background-attachment - Background-position - Background shorthand
2
Background-color property
4 mins
3
Background-image property
6 mins
4
Background-repeat property
6 mins
You will learn to work values like; - repeat - repeat-x - repeat-y - no repeat
5
Background-attachment property
6 mins
We will be discussing background-attachment values like; - fixed - scroll
6
Background-position property
5 mins
7
Background shorthand property
4 mins
You will learn to use one property to specify the values of the five different background properties.
8
Quiz
5 questions

Module 11 - Advanced CSS

1
Overview
1 min
In this module you will learn how to use some advanced properties like; - Rounded corners - Border image - Pseudo classes - Pseudo elements - Buttons - Pagination
2
Rounded corners
8 mins
You will be learning to give rounded corners to an element on a webpage.
3
Border-image
7 mins
You will learn how to specify an image as the border of an element.
4
Pseudo classes
9 mins
5
Pseudo elements
7 mins
6
Pseudo elements and CSS classes
5 mins
You will be learning how to combine pseudo elements and CSS classes, pseudo classes and CSS classes.
7
Buttons
9 mins
We will be discussing how to style buttons in an HTML document using different properties.
8
Pagination
8 mins
9
Quiz
5 questions

Be the first to add a review.

Please, login to leave a review
Layer 1
Login Categories