![CSS Modern Responsive Web Design - Create 5 Different Websites [Video]](https://static.packt-cdn.com/products/9781801074940/cover/smaller)
CSS Modern Responsive Web Design - Create 5 Different Websites [Video]
- FREE Subscribe Access now
- £101.99 Video Buy
- Instant online access to over 7,500+ books and videos
- Constantly updated with 100+ new titles each month
- Breadth and depth in over 1,000+ technologies
-
Creating Five Websites from Scratch Using Modern Web Design – HTML, CSS, JavaScript
-
Modern Responsive Websites Using Float and CSS to Create Reusable Grids
- Creating a Single-page Float Website with a Grid Structure Using CSS
- Setting up Your Web Development Environment
- Creating a Website Wireframe to Plan Your Site
- Adding the HTML Main Structure
- Updating HTML with Styles
- Creating a Responsive Navbar
- Creating a Mobile-ready Responsive Navbar
- Adding More Content to Your Website’s Top Section
- Creating a CSS Grid for Your Website Using Float
- Adding an Image Gallery
- Creating Content Areas – Multiple Columns Content Area
- Adding a Single Column in a Grid
- Creating a Contact Form Using CSS and HTML
- Adding Mailto to Your Contact Form
- Adding a Style to Your Website
- Adding and Moving Sections in a Single-page Website
- Single-page Website Review
-
Single-page Flexbox Website with Auto-scroll JavaScript
- Single-page Flexbox Website Introduction
- Flexbox Website: Setting up a Web Page
- Creating Sections in a Single-page Website Using Flexbox
- Creating a Navbar Using Flexbox
- Designing and Adding Content to the Home Screen Section
- Applying Your Own Custom Grid Columns with Flexbox
- Creating CSS Flexbox Page Cards with Flexbox
- Creating a CSS Form Using CSS Flexbox
- Creating a Footer
- Creating Smooth Scrolling Using JavaScript
- Adding Smooth Scrolling to Your Website Using JavaScript
- Single-page Flexbox Website Review
-
"No JavaScript" Checkbox – Responsive Navbar Website from Scratch in the CSS Grid Website Section
- CSS Grid Website Introduction
- Preparing Your Design – CSS Grid Setup
- Creating a Website – CSS Grid
- Creating a CSS Grid Responsive Navbar
- Adding a Responsive Navbar to Your Website
- Creating a Fully Responsive Collapsible Navbar
- Adding Placeholder Content
- Updating the Page Footer
- CSS Grid Website Review
-
JavaScript Collapsible Menu – Mobile-ready and Fully Responsive CSS Float Website
- Introduction: Responsive Float Website
- Modern Website: Website Setup and Planning
- Creating a Modern Website: Setup Main HTML
- Making a Responsive Navigation bar Using CSS Navbar Styling
- Making a Dynamic Collapse Menu Using Responsive CSS Navbar
- Mobile-ready Navbar Menu Using Responsive CSS Navbar
- Adding JavaScript Select and Toggle to Your Navbar Menu Items
- Custom Dynamic Grid – Creating a Website and Column
- Adding Placeholder Content and Resources
- Best Resources for Web Design – Adding Placeholder Content
- Website Tweaks and Adjustments
- Float Responsive Website Review
-
CSS Flexbox Website with Responsive Navbar Sub-menu Items
- Complex Responsive Navbar Introduction
- Website Planning and Setup for Modern Website Design – Flexbox
- Creating a Website by Applying CSS for Websites Using Flexbox
- Mobile-first Website Design: Creating a Responsive Navbar
- Mobile-first Design: Creating a Responsive Navbar with Menu Items
- Adding JavaScript: Creating an Interactive JavaScript Navbar Toggler
- More Complex Multiple Layer Menu with Sub-menu Items: Adding Navbar Sub-menu
- Responsive Navbar with Sub-menu Items – Navbar Sub-menu JavaScript
- Responsive Menu with Sub-menu Items – Website Tweaks and Updates
- Complex Responsive Navbar Overview
About this video
Today, websites come with a variety of designs that are completely different from each other. As a web designer, the more exposure you have to different designs, the better. In this course, you will learn to create five different modern websites from scratch using floats, CSS Grid, and flexbox.
To understand the process behind creating reusable grids using floats and CSS, you will create a single-page responsive website. Next, you will create a single-page flexbox website with auto-scroll JavaScript. You will then get to work with a responsive collapsible navigation bar by creating a CSS Grid website. Moving along, you will create a fully responsive website using the features of responsive float. Finally, you will create your fifth website—a CSS flexbox website—to understand the implementation of navigation sub-menu items.
By the end of this course, you will have gained the practical skills to develop real-world responsive websites using the features of CSS.
All the resources for this course are available at https://github.com/PacktPublishing/CSS-Modern-Responsive-Web-Design-Create-5-Different-Websites
- Publication date:
- December 2020
- Publisher
- Packt
- Duration
- 7 hours 7 minutes
- ISBN
- 9781801074940