CSS - Basics to Advanced
4.3 (118 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.
21,027 students enrolled

CSS - Basics to Advanced

Complete guide to create beautiful, responsive and user-friendly websites using CSS3. Learn CSS3 with hands-on projects
4.3 (118 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.
21,027 students enrolled
Last updated 7/2020
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 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
  • Basic styling of web pages using CSS3
  • Manipulate the display and position of HTML elements
  • Understand the Box Model concept
  • Introduction into Responsive Design
  • Design mobile friendly web pages using CSS Media Queries
  • Animate HTML elements using CSS animate property
  • Web page Layouts - CSS Flex Box and CSS Grid
Course content
Expand all 48 lectures 04:55:13
+ CSS Introduction
2 lectures 14:02

Hey guys, in this module we will learn all about CSS right from the basic topics like styling texts and images to advanced topics like responsive design and CSS animations.

After completing this module you will be able to convert your normal HTML structure to a beautiful static web page with a nice touch of animations which will make it more interesting!


This is the introductory video of CSS. In this video, we will talk about

  1. What is CSS?

  2. What is the syntax for CSS?

  3. What are selectors?

  4. What are the different ways to select the HTML element?


Hope you are excited!!

Preview 02:29

Hey guys, in this video we will learn about different ways to write CSS in HTML - Inline CSS, Internal CSS and External CSS.

Preview 11:33
+ Basic Styling
7 lectures 45:22

Hey guys, in this video we will learn how to add styles to text using CSS.

CSS - Styling Text
11:13

Hey guys, in this video we will learn all about Borders in CSS.

CSS - Adding Borders
05:48

Hey guys, in this video we will learn all about margin and padding in CSS.

CSS - Margin and Padding
05:15

Hey guys, in this video we will learn how to style lists using CSS.

CSS - Styling Lists
05:17

Hey guys, in this video we will learn how to add styles to links using CSS.

CSS - Styling Links
05:11

Hey guys, in this video we will learn how to add styles to HTML Buttons.

CSS - Styling Buttons
06:54

Hey guys, in this video we will learn how to add icons to buttons.

CSS - Adding Icons
05:44
+ Display and Position Properties
6 lectures 29:39

Hey guys, in this video we will learn about different display values and how to change these values using CSS.

CSS - Working with Display Values
04:04

Hey guys, in this video we will learn how to work with display value inline-block.

CSS - Display value: Inline-Block
06:50

Hey guys, in this video we will learn about different position values and how we can use them to position our HTML elements.

CSS - Positioning HTML Elements Part-1
08:20

Hey guys, in this video we will learn how to position HTML elements using CSS position property.

CSS - Positioning HTML Elements Part-2
03:20

Hey guys, in this video we will learn how to handle overflowing content using CSS.

CSS - Handling Content Overflow
03:27

Hey guys, in this video we will learn how to float HTML elements left and right.

CSS - Floating HTML Elements
03:38
+ Box Model and Shadows
3 lectures 12:44

Hey guys, in this video we will learn about the CSS Box Model.

CSS - Box Model
03:57

Hey guys, in this video we will learn about the box sizing property of CSS.

CSS - Box Sizing
03:53

Hey guys, in this video we will learn how to add shadows to text and HTML elements.

CSS - Adding Shadows
04:54
+ Combinators, Psudeo Classes and Elements
5 lectures 33:19

Hey guys, in this video we will learn how to combinators to select HTML elements for styling.

CSS - Combinators Part-1
05:23

Hey guys, in this video we will learn about combinators and how to use them to select HTML elements for styling.

CSS - Combinators Part-2
06:20

Hey guys, in this video we will learn How to use pseudo classes.

CSS - Pseudo Classes Part-1
06:18

Hey guys, in this video we will learn How to use Pseudo classes.

CSS - Pseudo Classes Part-2
07:48

Hey guys, in this video we will learn about Pseudo Elements.

CSS - Pseudo Elements
07:30
+ Backgrounds and Gradients
3 lectures 17:05

Hey guys, in this video we will learn How to add background to HTML elements.

CSS - Adding Backgrounds
05:21

Hey guys, in this video we will learn about Linear and Radial Gradient.

CSS - Gradients
07:43

Hey guys, in this video we will learn about handling text overflow.

CSS - Handling Text Overflow
04:01
+ Practice Problems
2 lectures 32:48

Hey guys, please find below the details and styles required for the project.


All the Best!!


Body

font-family: Arial, sans-serif;


Menu Items:

font-size: 13px;

color: rgba(0, 0, 0, 0.87)


Profile Pic

width: 32px;

height: 32px;


Search Box

width: 582px

color: #222

border: 1px solid #dfe1e5;

font-size: 13px

padding: 14px

border-radius: 24px


Search Box: OnHover and OnFocus

box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);

border-color: rgba(223,225,229,0);


Button

background color #f2f2f2

color: #5F6368;

font-size: 14px;

height: 36px;

padding: 0 16px;

background-image: linear-gradient(top,#f5f5f5,#f1f1f1);

border: 1px solid transparent;

box-shadow: 0 1px 1px rgba(0,0,0,0);

color: #222;


Button: On-Hover

background-image:linear-gradient(top,#f8f8f8,#f1f1f1);

border: 1px solid #c6c6c6;

box-shadow: 0 1px 1px rgba(0,0,0,0.1);

color: #222;


Dropdown Application Card:

width: 285px;

padding: 28px;

border: 1px solid #ccc;

box-shadow: 0 2px 10px rgba(0,0,0,.2);


App Item

display: inline-block

width: 84px;


App Item: On-Hover

border: 1px solid rgba(0, 0, 0, 0.2);


App Item Image:

width: 50px;

height: 50px;


App Item Label:

color: rgba(0,0,0,0.87)


Images:

Google Center Logo: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png

Voice Search Icon: https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png

App - Google Search: http://pluspng.com/img-png/google-logo-png-open-2000.png

App - Maps: http://pluspng.com/img-png/google-maps-png-google-maps-icon-1600.png

App - Drive: https://upload.wikimedia.org/wikipedia/commons/d/da/Google_Drive_logo.png

App - Calendar: https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Google-calendar.svg/1024px-Google-calendar.svg.png

App - Photos: https://blogs.acu.edu/innovation_foundry/files/2017/06/google_photos1600.png

App - Keep: https://i.pinimg.com/originals/09/96/92/099692d1d651d51b7caf3040fce0f748.png


App Menu Icon:

Use Google Material Icons:

Add this in HTML head element: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Use this to generate icon: <i id="dropdown-menu" class="material-icons">apps</i>

CSS - Practice Problem-1: Create Google.com Look-Alike
00:59

Hey guys, in this video we will try to create the webpage that I gave as an assignment in the previous video.

CSS - Practice Problem-1: Create Google.com Look-Alike Solution
31:49
+ Responsive Design
5 lectures 27:12

Hey guys, in this video we will learn about Responsive Web Design.

CSS - Introduction to Responsive Web Design
01:19

Hey guys, in this video we will learn about Viewport.

CSS - Viewport
04:55

Hey guys, in this video we will talk about Dynamic Width and Height.

CSS - Dynamic Size
04:31

Hey guys, in this video we will learn about Media Queries.

CSS - Introduction to Media Queries
03:27

Hey guys, in this video we will create a responsive webpage using Media Queries.

CSS - Responsive Webpage Design using Media Queries
13:00
+ Flex Layout
6 lectures 31:22

Hey guys, in this video we will learn about Flex Layout.

CSS - Flex Layout
02:42

Hey guys, in this video we will learn about Flex Container Properties.

CSS - Flex Container Properties
07:21

Hey guys, in this video we will learn How to align Flex Items.

CSS - Align Flex Items
07:41

Hey guys, in this video we will learn about Flex Item Properties.

CSS - Flex Item Properties
05:26

Hey guys, in this video we will learn How to design topbar using Flex layout.

CSS - Design Topbar using Flex
03:52

Hey guys, in this video we will learn How to design a Responsive Grid using Flex.

CSS - Responsive Grid using Flex
04:20
+ Effects and Animations
5 lectures 29:17

Hey guys, in this video we will learn all about transform property.

CSS - Transform Property
07:38

Hey guys, in this video we will learn How to align items in center using transform property.

CSS - Align Elements using Transform Property
03:01

Hey guys, in this video we will learn about the transition property.

CSS - Transition Property
07:01

Hey guys, in this video we will learn all about animation property.

CSS - Animation Property
08:47

Hey guys, in this video we will learn how to animate HTML Elements

CSS - Flying Rocket Animation using Animation Property
02:50
Requirements
  • Basic understanding of HTML5
Description

****UPDATE [06-July-2020]:  New Content Added!!!!!****

Around 25+ NEW video content added

New Sections added on:

  • Responsive Design

  • Flex box

  • Grid Layouts

********************************************************                         


If you are new to web development but you have a little bit of knowledge of HTML and its tags and want to take the next step towards becoming the professional frontend web developer, then this is the right course for you.

Here, we have covered everything right from basics to advanced concepts of CSS3. We have included all the properties in CSS + the newly introduced ones in CSS3 that will help shape the future of web development in the coming years. This course is designed bearing in mind that a beginner should be able to understand what is CSS and how it is used to turn a raw, basic, black & white HTML webpage structure into a beautiful web page. To make web pages interactive for users, you will also learn how to animate the various HTML elements.

By the end of this course, you will be able to design beautiful, user-friendly, and mobile-friendly websites from scratch, all on your own.
After completion, we recommend checking out our Javascript, ES6, and React JS courses which are designed with the same simple approach in order to help you become a professional Frontend web developer.


PS: More lectures will be uploaded soon.

Who this course is for:
  • Beginners who are new to Web Development
  • Freshers who want to learn CSS3 from scratch
  • Web Developers who want to brush up the concepts of CSS