CSS – Basics to Adv for front end development [2022]

CSS - Basics to Adv for front end development [2022]

CSS – Basics to Adv for front end development [2022]

Complete guide to create beautiful, responsive and user-friendly websites using CSS3. Learn CSS3 with hands-on projects

Language: english

Note: 4.4/5 (2,404 notes) 217,640 students

Instructor(s): EdYoda Digital University

Last update: 2020-07-06

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



  • Basic understanding of HTML5



***UPDATE [01-Jan-2022]:  New Content Added!!!!!****

Around 25+ NEW video content added

New Sections added on:

  • Responsive Design

  • Flexbox

  • Grid Layouts


CSS – short for Cascading Style Sheets – is a “programming language” you use to turn your raw HTML pages into real beautiful websites.          

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 a 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 to help you become a professional Frontend web developer.

PS: More lectures will be uploaded soon.

Who’s teaching you in this course?

I am a Computer Science graduate highly rated instructor with a rating of 4.3 and more than 200k students on Udemy, I have been part of the corporate circle since his college days. In his early days, I was part of a startup team delivering production grid android apps. Currently, I am a lead developer at EdYoda. I’m responsible for the entire front-end development & integration with the back-end. React, Python, Django is my areas of expertise. I have been delivering corporate training for Android, React, Javascript, Python & Django. I have eyes for details & that makes him suited for delivering a finished product. I’m a fitness freak & working out is his favorite thing to do in his spare time.

I want everyone should enjoy learning and I have shared my knowledge that gonna be helpful for you.

Enroll Now!! see you in class.

Happy learning
Team Edyoda


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


Course content

  • CSS Introduction
    • CSS – Introduction
    • CSS – How to use CSS?
  • Basic Styling
    • CSS – Styling Text
    • CSS – Adding Borders
    • CSS – Margin and Padding
    • CSS – Styling Lists
    • CSS – Styling Links
    • CSS – Styling Buttons
    • CSS – Adding Icons
  • Display and Position Properties
    • CSS – Working with Display Values
    • CSS – Display value: Inline-Block
    • CSS – Positioning HTML Elements Part-1
    • CSS – Positioning HTML Elements Part-2
    • CSS – Handling Content Overflow
    • CSS – Floating HTML Elements
  • Box Model and Shadows
    • CSS – Box Model
    • CSS – Box Sizing
    • CSS – Adding Shadows
  • Combinators, Psudeo Classes and Elements
    • CSS – Combinators Part-1
    • CSS – Combinators Part-2
    • CSS – Pseudo Classes Part-1
    • CSS – Pseudo Classes Part-2
    • CSS – Pseudo Elements
  • Backgrounds and Gradients
    • CSS – Adding Backgrounds
    • CSS – Gradients
    • CSS – Handling Text Overflow
  • Practice Problems
    • CSS – Practice Problem-1: Create Google.com Look-Alike
    • CSS – Practice Problem-1: Create Google.com Look-Alike Solution
  • Responsive Design
    • CSS – Introduction to Responsive Web Design
    • CSS – Viewport
    • CSS – Dynamic Size
    • CSS – Introduction to Media Queries
    • CSS – Responsive Webpage Design using Media Queries
  • Flex Layout
    • CSS – Flex Layout
    • CSS – Flex Container Properties
    • CSS – Align Flex Items
    • CSS – Flex Item Properties
    • CSS – Design Topbar using Flex
    • CSS – Responsive Grid using Flex
  • Effects and Animations
    • CSS – Transform Property
    • CSS – Align Elements using Transform Property
    • CSS – Transition Property
    • CSS – Animation Property
    • CSS – Flying Rocket Animation using Animation Property
  • Grid Layout
    • CSS – Introduction to Grid Layout
    • CSS – Grid Container Properties
    • CSS – Grid Item Properties
  • Final Project
    • CSS – Final Project Problem Statement


CSS - Basics to Adv for front end development [2022]CSS - Basics to Adv for front end development [2022]

Time remaining or 608 enrolls left


Don’t miss any coupons by joining our Telegram group 

Udemy Coupon Code 100% off | Udemy Free Course | Udemy offer | Course with certificate