+ Without CSS, every web page would be drab plain text and images that
+ flowed straight down the page. With CSS, you can add color and
+ background images and change the layout of your page — your web pages
+ can feel like works of art!
+
+ This course will teach you how to bring high-quality Figma designs
+ to life in the browser. You will learn how to create a space travel
+ website from scratch. In this course, you’ll test your HTML, CSS and
+ JavaScript skills by building out a responsive, multi-page site
+ featuring a homepage, buttons, a navigation bar, tabs, keyboard
+ navigation and underline, dot and number indicators.
+
+
+
+
+
3 Column grid
+
Equal Grid
+
+
+
+
+
About the course
+
+ This course will teach you how to bring high-quality Figma designs
+ to life in the browser. You will learn how to create a space travel
+ website from scratch. In this course, you’ll test your HTML, CSS and
+ JavaScript skills by building out a responsive, multi-page site
+ featuring a homepage, buttons, a navigation bar, tabs, keyboard
+ navigation and underline, dot and number indicators.
+
+
+
+
Perquisites
+
Zeal to learn
+
+
+
+
+
20:40:40 Grid
+
+
+
+
+
About the course
+
+ This course will teach you how to bring high-quality Figma designs
+ to life in the browser. You will learn how to create a space travel
+ website from scratch. In this course, you’ll test your HTML, CSS and
+ JavaScript skills by building out a responsive, multi-page site
+ featuring a homepage, buttons, a navigation bar, tabs, keyboard
+ navigation and underline, dot and number indicators.
+
+ We can use FlexBox for Sticky Footer and Header without using
+ positions in CSS
+
+
+
+
+
+
+
1 hour ago
+
+
+
+
+
+
+
+
+
+
+
+
+
Dan Abramov replied to your comment
+
+
+ Have you had a chance to watch the second half of my talk? I'd say quite the opposite — it's way less trickier to use suspense for data fetching than anything else (including Redux, local state, or some other library).
+
+
+ Cards are used to show interrelated data in a single component
+
+
+
+
+ We have three different types of card components horizontal,
+ vertical and card with avatar
+
+
Usage
+
+ Copy the code snippet from the required type of card, you can
+ modify it with other utility classes as well
+
+
Horizontal Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ CSS Zero to Hero
+
+
By Quincy Larson
+
+ 4.0(300)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Vertical Card
+
+
+
+
+
+
+
+
+
+
+
+ Getting Started With CSS
+
+
By Quincy Larson
+
+ 4.0(300)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Card with avatar
+
+
+
+
+
+
+
+
Getting Started With CSS
+
By Quincy Larson
+
+
+
+
+
+
+
+
+
+
+
+
+
Card With Badge
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 30% off
+
+
+
+
+
+
+
+
+
+ Getting Started With CSS
+
+
By Quincy Larson
+
+ 4.0(300)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Card with Overlay
+
+
+
+
+
+ Offer Expired
+
+
+
+
+
+
+
+
+ 30% off
+
+
+
+
+
+
+
+
+
+ Getting Started With CSS
+
+
By Quincy Larson
+
+ 4.0(300)
+
+
+
+
+
+
+
+
+
+
+
+
+
Card with Close Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Getting Started With CSS
+
+
By Quincy Larson
+
+ 4.0(300)
+
+
+
+
+
+
+
+
+
+
+
+
+
Text Only Card
+
+
+
+
+ Getting Started With CSS
+
+
By Quincy Larson
+
+ 4.0(300)
+
+
+ Without CSS, every web page would be drab plain text and
+ images that flowed straight down the page. With CSS, you can
+ add color and background images and change the layout of
+ your page — your web pages can feel like works of art!
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Grid
+
+ CSS Grid Layout is a two-dimensional layout system for the web. It
+ lets you lay content out in rows and columns.
+
+
+
+
We have two layouts for two and three columned grids
+
Usage
+
+ Add grid class with the required ratio eg:-
+ class="grid-col-2--20-80"
+
+
+ (here 20 80 after the double hyphen means the ratio of
+ distribution of the grid items in a grid container)
+
+
2 Columns Grid (50:50)
+
+
+
+
+
+
+
About the course
+
+ This course will teach you how to bring high-quality
+ Figma designs to life in the browser. You will learn how
+ to create a space travel website from scratch. In this
+ course, you’ll test your HTML, CSS and JavaScript skills
+ by building out a responsive, multi-page site featuring
+ a homepage, buttons, a navigation bar, tabs, keyboard
+ navigation and underline, dot and number indicators.
+
+
+
+
+
+
+
+
+
+
2 Columns Grid (20:80)
+
+
+
+
+
+
+
About the course
+
+ This course will teach you how to bring high-quality
+ Figma designs to life in the browser. You will learn how
+ to create a space travel website from scratch. In this
+ course, you’ll test your HTML, CSS and JavaScript skills
+ by building out a responsive, multi-page site featuring
+ a homepage, buttons, a navigation bar, tabs, keyboard
+ navigation and underline, dot and number indicators.
+
+
+
+
+
+
+
+
+
+
3 Columns Grid (1:1:1)
+
+
+
+
+
+
+
About the course
+
+ This course will teach you how to bring high-quality
+ Figma designs to life in the browser. You will learn how
+ to create a space travel website from scratch. In this
+ course, you’ll test your HTML, CSS and JavaScript skills
+ by building out a responsive, multi-page site featuring
+ a homepage, buttons, a navigation bar, tabs, keyboard
+ navigation and underline, dot and number indicators.
+
+
+
+
Perquisites
+
Zeal to learn
+
+
+
+
+
+
+
+
+
+
3 Columns (1:2:2)
+
+
+
+
+
About the course
+
+ This course will teach you how to bring high-quality Figma
+ designs to life in the browser. You will learn how to create
+ a space travel website from scratch. In this course, you’ll
+ test your HTML, CSS and JavaScript skills by building out a
+ responsive, multi-page site featuring a homepage, buttons, a
+ navigation bar, tabs, keyboard navigation and underline, dot
+ and number indicators.
+
+
+
+
Perquisites
+
Zeal to learn
+
+
+
+
+
+
+
+
+
+
+
+
Image
+
+ Images are used to make the webapp more attractive and informative
+
+
+
+
We have responsive square and rounded images
+
Usage
+
+ Add the responsive image class with the type of border-radius if
+ required
+ class="box-shadow">class="image-resp border-rad-100"
+
+
Responsive Image
+
+
+
+
+
+
+
+
+
+
+
Round Image
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Input
+
+ As the name suggests Input/textarea elements are used to take user
+ input
+
+
+
+
+ We have a form component with input fields and customizable
+ validation messages
+
+
Usage
+
Copy the code snippet and modify it according to your requirements
+
+
+
+
+
+
+
+
+
+
+
+
+
Lists
+
+ The List in CSS specifies the listing of the contents or items in a particular manner i.e., it can either be organized or unorganized
+
+
+
+
We have styled classes for ordered list, unordered list and notification
+
Usage
+
+ Copy the code snippet and modify it according to your requirements
+ Note:-use uniform classes for parent list and child list items
+
+
Ordered and Unordered List
+
+
+
+
+
+
List Item One
+
List Item Two
+
List Item Three
+
+
+
List Item One
+
List Item Two
+
List Item Three
+
+
+
+
+
+
+
Stacked Notification List
+
+
+
+
+
+
+
+
+
+
+
+
+
Quincy Larson replied to your comment
+
+
+ We can use FlexBox for Sticky Footer and Header without using
+ positions in CSS
+
+
+
+
+
+
+
1 hour ago
+
+
+
+
+
+
+
+
+
+
+
+
+
Dan Abramov replied to your comment
+
+
+ Have you had a chance to watch the second half of my talk? I'd say quite the opposite — it's way less trickier to use suspense for data fetching than anything else (including Redux, local state, or some other library).
+
+
+
+
+
+
+
+
1 hour ago
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Modal
+
+ Modal component is used to attract user's whole attention towards
+ a single piece of information only
+
+
+
+
We have customizable login page as a modal component
+
Usage
+
Copy the code snippet and modify it according to your requirements
+
+
+
+
+
+
+
Login
+
+
+
+
+
+
Or
+
+
+
+
+
+
+
+
+
+
+
+
+
Navigation
+
+ Navigation bar is used to navigate to different pages of a web app
+
+
+
+
Usage
+
Copy the code snippet and modify it according to your requirements
+
+
+
+
+
+
+
+
+
+
+
+
+
Typography
+
+ Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed
+
+
+
+
Usage
+
Copy the code snippet and use the text size according to your requirements
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ .png)
+ 
+ 
+ 
+ 
+