Learn Responsive Web Design with 4 Live Projects (2024)

Learn how to create responsive web designs that work on any device with the Complete Guide to Responsive Web Design 2.0 on Udemy.

95% OFF on Responsive Web Design Course

(554) 30,758 Students – 4.8

★★★★★

Buy Now

Request Coupon

Lectures Covered

Introduction to HTML

Choosing The Right Browser
Choosing the right code editor
Download and Install VS Code
What is HTML
What’s the web made of
What do HTML, CSS, and JavaScript do
Section 1: Quiz

Text Formatting in HTML

HTML Syntax
Paragraph Tag in Practical
Headings in HTML
Bolds and Italics in HTML
Lists in HTML
Types of Elements
Quotes in HTML
Date and Time in HTML
Kbd Code Pre and Br Tag
Subscript Superscript and Small Tag
Text Formatting Exercise
Section 2: Quiz

HTML Essentials

Attributes in HTML
ARIA in HTML
Blank Spaces and Comments
Uppercase and Lowercase
Types of Tags
Non Breaking Space
Links and Anchor Tags
Absolute URLs
Relative URLs
Organizing Files
Naming Files
HTML Navigation
HTML Essentials Coding Exercise
Section 3: Quiz

Images in HTML

Images in HTML
Image File Formats
Responsive Images in HTML
Responsive Images Based on Width
Responsive Picture Tag
Figure and Fig-Caption Tag
Images Coding Exercise

Multimedia in HTML

Audio in HTML
Video in HTML
Video Captions and Subtitles
Embedding Videos with iFrame
Multimedia Coding Exercise
Section 5: Quiz

Content in HTML

Languages in HTML
The Div and The Span Tag
The Document Structure
Inside the Head Tag
Inside the Body Tag
Creating a Basic Page
Content in HTML Coding Exercise
Section 6: Quiz

Form Elements in HTML

Form Elements
Input Types in Forms
Phone and Password Field
URL and Number Field
Date Time Month Week and More
Radio Buttons
Checkbox Fields
Search and Upload Fields
The Color Field
Dropdown Fields in Forms
Message and Range Field
Range Fancy Button Hidden Field and Reset
Wrapping Form Fields
Coding Exercise to Create a Simple Login Page
Section 7: Quiz

Tables in HTML

Tables in HTML
Working with Tables in HTML
Tables in HTML Coding Exercise
Section 8: Quiz

Getting Started with CSS

Getting Started with CSS
Browser Developer Tools
CSS Placements
CSS Syntax
CSS Placement and Syntax Coding Exercise
Section 9: Quiz

CSS Essentials

CSS Core Concepts
Color Property Values
CSS Selectors
Class and ID in CSS
Live Example of Class and ID
Descendant Selectors in CSS
Grouping Selectors
Inheritance in CSS
Pseudo Classes in CSS
CSS Selectors and Pseudo Coding Exercise
Section 10: Quiz

Understanding Box Model in CSS

Getting Started with Box Model
Inline Block and Display
Box Model Testing
Box Model Coding Exercise

Typography in CSS

Introduction to Typography
Font Weight and Style
Font-Size and Formatting
Importing Custom Fonts Coding Exercise
Section 12: Quiz

Layouts in CSS

Floats and Clear
Build a Layout with Floats
Positions in CSS
The Z-Index
Layout Coding Exercise
Section 13: Quiz

Flexbox and Grid in CSS

Flexbox and Grid Systems
Flex Directions and More
CSS Grid Essentials
Flexbox Coding Exercise
Section 14: Quiz

Advanced CSS Selections

Advanced CSS Selectors
Pseudo Selectors
Advanced CSS Selectors Coding Exercise
Section 15: Quiz

Building The Website

The Website Structure
Installing Google Fonts for Website
Styling The Site Header
Building The Navigation Bar
Creating a Responsive Image Slider
Styling The Content Holder
Styling The Footer
Creating and Styling Services and Products Page
Creating and Styling About Page
Creating and Styling Contact Page
Section 16: Quiz

Responsive Web Design (RWD)

Introduction to Responsive Web Design (RWD)
How Responsive Web Design Works
Creating Responsive Header
Creating Responsive Navigation Bar
Creating Responsive Banner Slider
Creating Responsive Content Holder
Creating Responsive Footer
Section 17: Quiz

Getting Started with Bootstrap 5

Introduction to Bootstrap 5
What you will need
Hello World
Bootstrap 5 document structure
Section 1: Quiz

Layouts in Bootstrap 5

Breakpoints in Bootstrap 5
Containers
Grid
Grid Options
Nesting Rows and Columns
Column Vertical Alignment
Column Horizontal Alignment
Column Wrapping and Column Breaks
Reordering and Offsetting Columns
Margin Utilities
Gutters
Horizontal Gutters
Vertical Gutters
Horizontal and Vertical Gutters
Section 2: Quiz

Contents in Bootstrap 5

Typography
Inline Text Elements
Abbreviations and Blockquotes
Working with Lists
Images in Bootstrap
Tables in Bootstrap
Table Alignment, Nesting and Anatomy
Figures in Bootstrap
Section 3: Quiz

Forms in Bootstrap 5

Forms in Bootstrap
Form Control
Checks and Radios
Range
Input Groups
Floating Labels
Form Layout
Horizontal Forms
Auto Sizing Forms
Inline Forms
Form Validation
Section 4: Quiz

Components in Bootstrap 5

Accordions
Alerts
Dismissing Alerts
Badges
Breadcrumb
Buttons
Button Group
Button Toolbar
Button Group Alteration
Card
Card Sizing
Card Navigation
Card Images
Card Styles
Carousel
Carousel Controls
Carousel Indicators
Carousel Caption
Carousel Fade Effect
Carousel Timing
Disable Carousel Touch Swiping
Carousel Dark Variant
Close Button
Collapse
Horizontal Collapse
Multiple Targets
Dropdowns
Split Button
Dropdown Sizing
Dark Dropdowns
Dropdown Directions
Drop up and Dropdown Alignment
Menu Items
Menu Alignment
Dropdown Alignment Options
Menu Contents
Dropdown Forms
Dropdown Options
Dropdown Auto Close
List Group
List Group Links and Buttons
List Group Flush
Numbered List
Horizontal List Groups
Contextual List Group Classes
List Group with Badges
List Group with Custom Content
List Group Checkboxes and Radios
List Group JavaScript Tabs
Modals
Static Backdrop
Scrolling Long Content
Vertically Centered
Modal Tooltips and Popovers
Using Grid System In Modal
Varying Modal Content
Toggle Between Modals
Optional Modal Sizes
Navbar
Navigation Links
Navbar Dropdown
Navbar Nested Dropdown
Navbar Forms
Navbar Input Group
Navbar Plain Text
Navbar Colors
Navbar Containers
Navbar Placement
Navbar Scrolling
Off Canvas Navbar
Navs and Tabs
Nav Flex Utilities
Nav Tabs and Pills with Dropdown
Tabs and Pills Behaviors
Offcanvas In-Depth
Offcanvas Scrolling
Offcanvas Placement
Pagination
Placeholders
Popovers In-Depth
Popover Direction
Custom Popovers
Dismiss on Next Click
Enable Popover On Hover
Progress Bars
Progress Bar Height and Background
Stripes And Animation
Scrollspy
Spinners
Growing Spinner
Spinner Alignment
Spinner Sizes
Spinner In Buttons
Toasts
Toast Alignment
Tooltips In-Depth
Custom Tooltip
Tooltip Directions
HTML in Tooltip
Tooltip On Disabled Elements
Section 5: Quiz

Helpers in Bootstrap 5

Clearfix
Colors and Background
Colored Links
Ratios
Positions
Stacks
Visually Hidden
Stretched Link
Text Truncate
Vertical Rule
Section 6: Quiz

Utilities in Bootstrap 5

Backgrounds
Text Colors
Text Opacity
Display Inline and Block
Hiding Elements
Display In Print
Flex
Flex Direction
Flex Justify Content
Flex Align Items
Flex Align Self
Flex Fill
Flex Grow And Shrink
Flex Auto Margins
Flex With Align Items
Flex Wrap
Flex Order
Flex Align Content
Flex Media Object
Responsive Float
Interactions
Opacity
Overflow
Position
Position Center Elements
Position Center Elements Within Edges
Position Examples Part 1
Position Example Part 2
Shadow
Sizing
Spacing
Gap
Text Alignment
Text Wrap
Text Break
Text Transform
Font Size
Font Weights And Italics
Line Height
Monoscope
Reset Color
Text Decoration
Vertical Alignment
Visibility
Bootstrap Icons
Section 7: Quiz

Project 1: EMS web app with Bootstrap 5

Introduction to EMS2.0 Application project
Creating the Login Page
Creating Dash Nav and Brand Logo
Creating the Navbar Toggler
Creating Navbar Items
Creating Form Fields for Navbar
Creating Cards for Dashboard
Creating Employees List Page
Creating Employees Page Sidebar
Creating Employees List Table
Creating Add Employee Modal
Creating Add Employee Modal Form
Creating Details Modal for Employee List
Creating Edit Details for Employee List
Creating Delete Modal for Employees List
Creating Jobs List Page
Updating the Job List Page
Creating Job List Table
Creating Add Job Modal
Creating Details Modal for Job
Creating Edit Details for Job Modal
Creating Delete Modal for Job List

Project 2: Blog App with Bootstrap 5

Blog project introduction
What’s required for Template Building
Creating the index file
Creating the Navbar and brand logo
Creating Navbar Toggler
Creating Navbar Items
Creating the search field
Creating the home banner
Creating the subscribe modal
Creating Home Posts Section
Creating Blog Footer
Adding Custom Effects to Navbar
Creating Default Page Header
Creating Post Loop for Default Page
Creating Sidebar Subscribe Form
Creating Categories and Archive Widgets
Creating Page and Post Content Area
Creating Comment Form for Posts
Creating the Search Page
Linking Everything Together

Project 3: Real-World Education Project

Introduction to project
Setting up Project Folder
Creating Navbar and Brand
Creating Navbar Toggler
Creating Nav Items
Creating Navbar Search Field
Creating Navbar Sign-up and Login Buttons
Creating the Banner Text
Adding Banner Image
Creating Site Feature Set
Creating Course Loop Header
Creating Course Loop Filter
Creating Course Loop List Header
Creating Single Course List Item
Creating Duplicates of Course Items
Creating Home Page Content
Adding Home Content Image
Creating Subscribe Area
Creating Main Footer
Creating Footer Address
Creating Link Items for Footer
Creating Social Icons
Creating Copyright Info
Creating Sticky Footer
Creating About Page Header
Creating About Content Section
Creating the courses page
Creating Single Course page and Breadcrumb
Creating Course Header Description and Metadata
Creating Course Metadata
Adding Icons to Course Metadata
Adding Course Buttons
Creating Single Course Image
Creating Single Course Contents
Creating FAQ Header
Creating FAQ List
Creating Post Question Form
Creating Blog Page and Header
Creating Blog Posts List
Creating Blog Sidebar
Creating Subscribe Modal
Creating the subscribe form
Creating Single Post Page
Creating Contact Page Header
Creating Contact Page Cards
Creating Contact Modal
Linking Everything Together

What you will learn?

Build Complete Responsive Websites from Scratch with HTML5 & CSS3
Build 3 Live Projects with HTML5, CSS3 & Bootstrap v5 (Downloadable Project Files)
Build Responsive Bootstrap v5 Dashboard for EMS (Employee Management System) Web App
Build Bootstrap v5 Based Responsive Blog Application
Build Educational Website Theme with Bootstrap v5
Integrate Custom Advanced Responsive jQuery Carousel within the Website

This Course Includes

30-Day Money-Back Guarantee
22.5 hours on-demand video
Access on mobile and TV
Full lifetime access
Certificate of completion

Course Requirements

You will need a PC / Laptop
Decent Internet Connectivity

Course Description

The Complete Guide to Responsive Web Design 2.0 on Udemy is a comprehensive course that will teach you everything you need to know to create responsive web designs that work seamlessly on any device, from desktop computers to smartphones.

The course covers all aspects of responsive web design, including HTML, CSS, JavaScript, and jQuery. You’ll learn how to use media queries and flexible grids to create layouts that adjust to different screen sizes, and you’ll discover how to optimize your site for performance and accessibility.

In addition, you’ll learn how to create responsive images and videos that load quickly on any device. You’ll also explore how to use tools like Bootstrap and Foundation to speed up your development process and build responsive designs faster.

The course is ideal for web designers, developers, and anyone who wants to create beautiful, responsive web designs that work on any device. With over 10 hours of video content, you’ll get plenty of hands-on practice and guidance to master responsive web design.

So whether you’re just starting out or you’re an experienced web developer looking to expand your skills, the Complete Guide to Responsive Web Design 2.0 on Udemy is an excellent resource for learning how to create responsive web designs that work seamlessly on any device.

Discover more from Prime Inspire

Subscribe to get the latest posts sent to your email.

Learn Responsive Web Design with 4 Live Projects (2024)

95% OFF on Responsive Web Design Course

Lectures Covered

What you will learn?

This Course Includes

Course Requirements

Course Description

Like this:

Discover more from Prime Inspire

Leave a ReplyCancel reply

95% OFF on Responsive Web Design Course

Lectures Covered

What you will learn?

This Course Includes

Course Requirements

Course Description

Share this:

Like this:

Discover more from Prime Inspire

Related Posts

Leave a ReplyCancel reply

Discover more from Prime Inspire