Tutorialspoint

Celebrating 11 Years of Learning Excellence! Use: TP11

CSS Mastery from Beginner to Advanced: Build responsive websites

person icon Pamch Tutors

4.3

CSS Mastery from Beginner to Advanced: Build responsive websites

Learn how to design modern and responsive CSS websites including CSS animation and transform

updated on icon Updated on Jun, 2025

language icon Language - English

person icon Pamch Tutors

English [CC]

category icon Development ,Web Development,CSS

Lectures -361

Resources -2

Duration -79 hours

Lifetime Access

4.3

price-loader

Lifetime Access

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

This is a detailed Web Design course showing you step by step patterns, hence this is a premium CSS course. I don’t just want you to watch. I encourage you to code along.

What you will learn.

  • You will thoroughly learn how to create equal and unequal columns using both the float and inline-block property.
  • You will learn how to create image gallery and video gallery with columns
  • You will thoroughly learn how to work with 2D and 3D transforms, transitions and animations
  • You will thoroughly learn how to make shapes with clip path property
  • You will thoroughly learn how to use the CSS Media (@media) Query to make your web design mobile friendly and responsive. This means mobile-first approach.
  • You will thoroughly learn how to create navigation menus – horizontal, vertical and mega menus
  • You will learn how to add images and videos to mega menus
  • You will thoroughly learn how to create gradients – linear (), Radial (), and conic () gradients
  • You will thoroughly learn how to create CSS accordions and tooltips (top, bottom, left and right tooltips)
  • You will thoroughly learn how to design price tables
  • You will thoroughly learn about the box model and the importance of box-sizing property
  • You will learn how to reference CSS with inline, internal and external styling and also learn how to import CSS
  • You will learn how to work with colors – Hexadecimal, RGB, HSL, color keywords
  • You will thoroughly learn how to work with font properties – font-size, line-height, font family, font-weight
  • You will thoroughly learn how to work with text properties and word properties
  • You will thoroughly learn how to work with CSS length units – rem, em, px, %, vh, vw, pc, pt
  • You will thoroughly learn how to import font awesome in order to incorporate it in your design
  • You will thoroughly learn how to import Google fonts as part of your font family
  • You will thoroughly learn the types of selectors and how to combine them for ease of use
  • You will thoroughly learn how the cascading rule works
  • And so much more....

Goals

  • Design cool websites from scratch to finish having mastered the CSS Concepts
  • Be skilled with CSS transitions including understanding timing-functions and cubic-bezier
  • Be able to work with 2D and 3D transforms (rotate, skew, scale, translate, matrix)
  • Wow yourself with how to design and structure image and video gallery
  • Understand how CSS Animation work and how to work with keyframes
  • Improve your skill on creating navigation bars and mega menus
  • Fully harness the power of CSS Media (@media) Query to make your web design mobile friendly and responsive
  • Be able to work with CSS length units – rem, em, px, %, vh, vw, pc, pt
  • Be confident with the HTML 5 document structure and be able to use semantic HTML 5 elements

Prerequisites

  • No programming skill required. This premium CSS course will teach you from scratch
  • You will require a PC, a text editor like Visual Studio Code, or Sublime text, Brackets, Notepad++.
  • Using an earpiece/headset to listen to the course will help your focus and have more control over your volume
CSS Mastery from Beginner to Advanced: Build responsive websites

Curriculum

Check out the detailed breakdown of what’s inside the course

Introduction

7 Lectures
  • play icon Overview of some projects we will create 15:01 15:01
  • play icon The final project we will build 04:09 04:09
  • play icon Editors to be used in this course 06:39 06:39
  • play icon Getting familiar with Visual studio code 12:51 12:51
  • play icon Importing the lesson folder 11:58 11:58
  • play icon Introduction to CSS 07:36 07:36
  • play icon Why I choose to minify my code 04:55 04:55

Styling in CSS

2 Lectures
Tutorialspoint

CSS Colors

5 Lectures
Tutorialspoint

Font properties

6 Lectures
Tutorialspoint

CSS Length Units

8 Lectures
Tutorialspoint

Text properties

7 Lectures
Tutorialspoint

CSS Rule

5 Lectures
Tutorialspoint

CSS Selectors

20 Lectures
Tutorialspoint

Font Awesome

3 Lectures
Tutorialspoint

Display property and Box Model

19 Lectures
Tutorialspoint

Box Sizing

2 Lectures
Tutorialspoint

Overflow

2 Lectures
Tutorialspoint

Vertical Align

1 Lectures
Tutorialspoint

CSS Functions

4 Lectures
Tutorialspoint

CSS Media Query @media

5 Lectures
Tutorialspoint

Float property

2 Lectures
Tutorialspoint

Creating columns of different sizes

24 Lectures
Tutorialspoint

Multiple Columns with column-count

2 Lectures
Tutorialspoint

Scroll bar and cursors

3 Lectures
Tutorialspoint

Positioning in CSS

13 Lectures
Tutorialspoint

Gradient colour function

8 Lectures
Tutorialspoint

Object fit and position property

3 Lectures
Tutorialspoint

Background image

10 Lectures
Tutorialspoint

CSS filter property

3 Lectures
Tutorialspoint

Styling Lists

7 Lectures
Tutorialspoint

CSS Form

5 Lectures
Tutorialspoint

CSS counter

5 Lectures
Tutorialspoint

Navigation bars

23 Lectures
Tutorialspoint

CSS Accordion and Tooltips

9 Lectures
Tutorialspoint

Creating and Styling Tables

7 Lectures
Tutorialspoint

Creating a pricing table/plan

11 Lectures
Tutorialspoint

CSS clip path property

12 Lectures
Tutorialspoint

Mask-image Property

2 Lectures
Tutorialspoint

CSS 2D Transform

5 Lectures
Tutorialspoint

CSS 3D Transform

18 Lectures
Tutorialspoint

CSS Transitions

10 Lectures
Tutorialspoint

CSS Animations

23 Lectures
Tutorialspoint

Final Web Project | Home Page | MegaProxy

30 Lectures
Tutorialspoint

Final Web Project | Courses Page

10 Lectures
Tutorialspoint

Final Web Page | Team Page

5 Lectures
Tutorialspoint

Final Web Page | Blog

5 Lectures
Tutorialspoint

Final Web Page | Contact

4 Lectures
Tutorialspoint

Final Web Page | Gallery

6 Lectures
Tutorialspoint

Instructor Details

Pamch Tutors

Pamch Tutors

Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515