Work through real-world projects and learn how to create modern, responsive websites using CSS Grid and Flexbox
About This Video
Explore fundamental CSS and Bootstrap concepts
Understand CSS by building fully functional, real-world websites
Discover industry best practices and solutions to common roadblocks
In Detail
If you want to learn how to create modern real-world websites using pure CSS, then this is the right course for you.
The course starts by covering CSS essentials. You will then move on to advanced CSS concepts such as transform, backgrounds, transitions, animations, and shadows. After this, you'll learn how to create a layout of your web page using CSS Flexbox. In the next section, you will build your first project - Grand Hotel. It will be a real-world, intuitive web page about hotels created using CSS Flexbox. Later, you will move on to exploring CSS Grid, before finally building another project based on CSS Grid. Each project built throughout the course will be fully compatible across all screen devices.
By the end of this course, you will have developed the skills you need to confidently create responsive websites using CSS Grid and Flexbox.
Who this book is for
This course is for anyone who wants to create modern, responsive websites using CSS Grid and Flexbox. No prior CSS experience is required to get started with this course.
Chapter 5 : Project 1 - Grand Hotel (Based on Flexbox)
Grand Hotel - Project Preview
Sidebar - Markup
Sidebar - Style
Navigation - Markup
Navigation - Style - Part 1
Navigation - Style - Part 2
Create Click Event
Create markup for Header
Header - Style
About Us Section - Markup
About Us Section - Style - Part 1
About Us Section - Style - Part 2
Rooms Section - Markup
Rooms Section - Style
Customers Section - Markup
Customers Section - Style
Footer - Markup
Footer - Style
Chapter 6 : Responsive Web Design
Make “Grand Hotel” Project Responsive - Part 1
Make “Grand Hotel” Project Responsive - Part 2
Make “Grand Hotel” Project Responsive - Part 3
Chapter 7 : CSS Grid
CSS Grid Introduction
Setup
How to Create Grid
Fractional Units
Positioning and Spanning Grid Items
Naming Grid Items - Part 1
Naming Grid Items - Part 2
Naming Grid areas
Explicit and Implicit Grid
Aligning Grid items
Aligning Grid tracks
max-content, min-content, minmax()
auto-fill, auto-fit
Chapter 8 : Project 2 - Furniture Store (Based on CSS Grid)
Furniture Store - Project Preview
Navbar - Part 1 - Markup
Navbar - Part 1 - Style
Navbar - Search Form
Navbar - Part 2 - Markup
Navbar - Part 2 - Style
Navbar - Part 2 - Dropdown
Banner - Markup
Banner - Style
Banner Slideshow - Part 1
Banner Slideshow - Part 2
Day Offer Section
Bestselling Furniture - Markup
Bestselling Furniture - Style
Gallery
Contact Section and Footer
Modal box - Markup
Modal Box - Style - Part 1
Modal Box - Style - Part 2
Make Project Responsive
Start your Free Trial Self paced Go to the Course We have partnered with providers to bring you collection of courses, When you buy through links on our site, we may earn an affiliate commission from provider.
This site uses cookies. By continuing to use this website, you agree to their use.I Accept