Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

CSS - Basics to Adv for front end development

Name: CSS - Basics to Adv for front end development
Rating: 4.3 (2993 reviews)

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

Created byEdYoda for Business, Qaifi Khan

Last updated 5/2024

English

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

12 sections • 48 lectures • 4h 55m total length

CSS - Introduction2:29
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
What is CSS?
What is the syntax for CSS?
What are selectors?
What are the different ways to select the HTML element?

Hope you are excited!!
CSS - How to use CSS?11:33
Hey guys, in this video we will learn about different ways to write CSS in HTML - Inline CSS, Internal CSS and External CSS.

CSS - Styling Text11:13
Hey guys, in this video we will learn how to add styles to text using CSS.
CSS - Adding Borders5:48
Hey guys, in this video we will learn all about Borders in CSS.
CSS - Margin and Padding5:15
Hey guys, in this video we will learn all about margin and padding in CSS.
CSS - Styling Lists5:17
Hey guys, in this video we will learn how to style lists using CSS.
CSS - Styling Links5:11
Hey guys, in this video we will learn how to add styles to links using CSS.
CSS - Styling Buttons6:54
Hey guys, in this video we will learn how to add styles to HTML Buttons.
CSS - Adding Icons5:44
Hey guys, in this video we will learn how to add icons to buttons.

CSS - Working with Display Values4:04
Hey guys, in this video we will learn about different display values and how to change these values using CSS.
CSS - Display value: Inline-Block6:50
Hey guys, in this video we will learn how to work with display value inline-block.
CSS - Positioning HTML Elements Part-18:20
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-23:20
Hey guys, in this video we will learn how to position HTML elements using CSS position property.
CSS - Handling Content Overflow3:27
Hey guys, in this video we will learn how to handle overflowing content using CSS.
CSS - Floating HTML Elements3:38
Hey guys, in this video we will learn how to float HTML elements left and right.

CSS - Combinators Part-15:23
Hey guys, in this video we will learn how to combinators to select HTML elements for styling.
CSS - Combinators Part-26:20
Hey guys, in this video we will learn about combinators and how to use them to select HTML elements for styling.
CSS - Pseudo Classes Part-16:18
Hey guys, in this video we will learn How to use pseudo classes.
CSS - Pseudo Classes Part-27:48
Hey guys, in this video we will learn How to use Pseudo classes.
CSS - Pseudo Elements7:30
Hey guys, in this video we will learn about Pseudo Elements.

CSS - Practice Problem-1: Create Google.com Look-Alike0:59
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 Solution31:49
Hey guys, in this video we will try to create the webpage that I gave as an assignment in the previous video.

CSS - Introduction to Responsive Web Design1:19
Hey guys, in this video we will learn about Responsive Web Design.
CSS - Viewport4:55
Hey guys, in this video we will learn about Viewport.
CSS - Dynamic Size4:31
Hey guys, in this video we will talk about Dynamic Width and Height.
CSS - Introduction to Media Queries3:27
Hey guys, in this video we will learn about Media Queries.
CSS - Responsive Webpage Design using Media Queries13:00
Hey guys, in this video we will create a responsive webpage using Media Queries.

CSS - Flex Layout2:42
Hey guys, in this video we will learn about Flex Layout.
CSS - Flex Container Properties7:21
Hey guys, in this video we will learn about Flex Container Properties.
CSS - Align Flex Items7:41
Hey guys, in this video we will learn How to align Flex Items.
CSS - Flex Item Properties5:26
Hey guys, in this video we will learn about Flex Item Properties.
CSS - Design Topbar using Flex3:52
Hey guys, in this video we will learn How to design topbar using Flex layout.
CSS - Responsive Grid using Flex4:20
Hey guys, in this video we will learn How to design a Responsive Grid using Flex.

CSS - Transform Property7:38
Hey guys, in this video we will learn all about transform property.
CSS - Align Elements using Transform Property3:01
Hey guys, in this video we will learn How to align items in center using transform property.
CSS - Transition Property7:01
Hey guys, in this video we will learn about the transition property.
CSS - Animation Property8:47
Hey guys, in this video we will learn all about animation property.
CSS - Flying Rocket Animation using Animation Property2:50
Hey guys, in this video we will learn how to animate HTML Elements

Requirements

Basic understanding of HTML5

Description

UPDATE : New Content Added

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

CSS - Basics to Adv for front end development

What you'll learn

Explore related topics

Course content

CSS Introduction2 lectures • 14min

Basic Styling7 lectures • 45min

Display and Position Properties6 lectures • 30min

Box Model and Shadows3 lectures • 13min

Combinators, Psudeo Classes and Elements5 lectures • 33min

Backgrounds and Gradients3 lectures • 17min

Practice Problems2 lectures • 33min

Responsive Design5 lectures • 27min

Flex Layout6 lectures • 31min

Effects and Animations5 lectures • 29min

Requirements

Description

Who this course is for: