CSS - Basics to Adv for front end development [2023]
- Description
- Curriculum
- FAQ
- Reviews
***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
-
1
CSS - IntroductionHey 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!!
-
2
CSS - How to use CSS?
Hey guys, in this video we will learn about different ways to write CSS in HTML - Inline CSS, Internal CSS and External CSS.
-
3
CSS - Styling Text
Hey guys, in this video we will learn how to add styles to text using CSS.
-
4
CSS - Adding Borders
Hey guys, in this video we will learn all about Borders in CSS.
-
5
CSS - Margin and Padding
Hey guys, in this video we will learn all about margin and padding in CSS.
-
6
CSS - Styling Lists
Hey guys, in this video we will learn how to style lists using CSS.
-
7
CSS - Styling Links
Hey guys, in this video we will learn how to add styles to links using CSS.
-
8
CSS - Styling Buttons
Hey guys, in this video we will learn how to add styles to HTML Buttons.
-
9
CSS - Adding Icons
Hey guys, in this video we will learn how to add icons to buttons.
-
10
CSS - Working with Display Values
Hey guys, in this video we will learn about different display values and how to change these values using CSS.
-
11
CSS - Display value: Inline-Block
Hey guys, in this video we will learn how to work with display value inline-block.
-
12
CSS - Positioning HTML Elements Part-1
Hey guys, in this video we will learn about different position values and how we can use them to position our HTML elements.
-
13
CSS - Positioning HTML Elements Part-2
Hey guys, in this video we will learn how to position HTML elements using CSS position property.
-
14
CSS - Handling Content Overflow
Hey guys, in this video we will learn how to handle overflowing content using CSS.
-
15
CSS - Floating HTML Elements
Hey guys, in this video we will learn how to float HTML elements left and right.
-
19
CSS - Combinators Part-1
Hey guys, in this video we will learn how to combinators to select HTML elements for styling.
-
20
CSS - Combinators Part-2
Hey guys, in this video we will learn about combinators and how to use them to select HTML elements for styling.
-
21
CSS - Pseudo Classes Part-1
Hey guys, in this video we will learn How to use pseudo classes.
-
22
CSS - Pseudo Classes Part-2
Hey guys, in this video we will learn How to use Pseudo classes.
-
23
CSS - Pseudo Elements
Hey guys, in this video we will learn about Pseudo Elements.
-
27
CSS - Practice Problem-1: Create Google.com Look-Alike
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>
-
28
CSS - Practice Problem-1: Create Google.com Look-Alike Solution
Hey guys, in this video we will try to create the webpage that I gave as an assignment in the previous video.
-
29
CSS - Introduction to Responsive Web Design
Hey guys, in this video we will learn about Responsive Web Design.
-
30
CSS - Viewport
Hey guys, in this video we will learn about Viewport.
-
31
CSS - Dynamic Size
Hey guys, in this video we will talk about Dynamic Width and Height.
-
32
CSS - Introduction to Media Queries
Hey guys, in this video we will learn about Media Queries.
-
33
CSS - Responsive Webpage Design using Media Queries
Hey guys, in this video we will create a responsive webpage using Media Queries.
-
34
CSS - Flex Layout
Hey guys, in this video we will learn about Flex Layout.
-
35
CSS - Flex Container Properties
Hey guys, in this video we will learn about Flex Container Properties.
-
36
CSS - Align Flex Items
Hey guys, in this video we will learn How to align Flex Items.
-
37
CSS - Flex Item Properties
Hey guys, in this video we will learn about Flex Item Properties.
-
38
CSS - Design Topbar using Flex
Hey guys, in this video we will learn How to design topbar using Flex layout.
-
39
CSS - Responsive Grid using Flex
Hey guys, in this video we will learn How to design a Responsive Grid using Flex.
-
40
CSS - Transform Property
Hey guys, in this video we will learn all about transform property.
-
41
CSS - Align Elements using Transform Property
Hey guys, in this video we will learn How to align items in center using transform property.
-
42
CSS - Transition Property
Hey guys, in this video we will learn about the transition property.
-
43
CSS - Animation Property
Hey guys, in this video we will learn all about animation property.
-
44
CSS - Flying Rocket Animation using Animation Property
Hey guys, in this video we will learn how to animate HTML Elements
-
45
CSS - Introduction to Grid Layout
Hey guys, in this video we will learn about Grid Layout.
-
46
CSS - Grid Container Properties
Hey guys, in this video we will talk about the Grid Container properties.
-
47
CSS - Grid Item Properties
Hey guys, in this video we will talk about the Grid Item properties.
