CSS – Basics To Advanced for front end development (2021)

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

Language: english

Note: 4.3/5 (2,243 notes) 205,623 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

Requirements

Basic understanding of HTML5

Description

***UPDATE [01-Jan-2021]: 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