IIRF Online > Development > Web Development > CSS > Build Responsive Real-World Websites with HTML and CSS
Build Responsive Real-World Websites with HTML and CSS by Udemy
Learn modern HTML5, CSS3 and web design by building a stunning website for your portfolio! Includes flexbox and CSS Grid
Course Highlights
- Become a modern and confident HTML and CSS developer, no prior knowledge needed!
- Design and build a stunning real-world project for your portfolio from scratch
- Modern, semantic and accessible HTML5
- Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
- Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
- A web design framework with easy-to-use rules and guidelines to design eye-catching websites
- How to plan, sketch, design, build, test, and optimize a professional website
- How to make websites work on every possible mobile device (responsive design)
- How to use common components and layout patterns for professional website design and development
- Developer skills such as reading documentation, debugging, and using professional tools
- How to find and use free design assets such as images, fonts, and icons
- Practice your skills with 10+ challenges (solutions included)
Skills you will learn!
Curriculum
7 Topics
Course Structure and Projects
Read Before You Start!
A High-Level Overview of Web Development
Setting Up Our Code Editor
Your Very First Webpage!
Downloading Course Material
Watch Before You Start!
12 Topics
Section Intro
Introduction to HTML
HTML Document Structure
Text Elements
More Text Elements: Lists
Images and Attributes
Hyperlinks
Structuring our Page
A Note on Semantic HTML
Installing Additional VS Code Extensions
CHALLENGE #1
CHALLENGE #2
24 Topics
Section Intro
Introduction to CSS
Inline Internal and External CSS
Styling Text
Combining Selectors
Class and ID Selectors
Working With Colors
Pseudo-classes
Styling Hyperlinks
Using Chrome DevTools
CSS Theory #1: Conflicts Between Selectors
CSS Theory #2: Inheritance and the Universal Selector
CHALLENGE #1
CSS Theory #3: The CSS Box Model
Using Margins and Paddings
Adding Dimensions
Centering our Page
CHALLENGE #2
CSS Theory #4: Types of Boxes
CSS Theory #5: Absolute Positioning
Pseudo-elements
Developer Skill #1: Googling and Reading Documentation
Developer Skill #2: Debugging and Asking Questions
CHALLENGE #3
21 Topics
first Design and Development Steps (Step 4)
The 3 Ways of Building Layouts
Using Floats
Clearing Floats
Building a Simple Float Layout
box-sizing: border-box
CHALLENGE #1
Introduction to Flexbox
A Flexbox Overview
Spacing and Aligning Flex Items
The flex Property
Adding Flexbox to Our Project
Building a Simple Flexbox Layout
CHALLENGE #2
Introduction to CSS Grid
A CSS Grid Overview
Sizing Grid Columns and Rows
Placing and Spanning Grid Items
Aligning Grid Items and Tracks
Building a Simple CSS Grid Layout
CHALLENGE #3
20 Topics
Section Intro
Project Overview
Overview of Web Design and Website Personalities
Web Design Rules #1: Typography
Implementing Typography
Web Design Rules #2: Colors
Implementing Colors
Web Design Rules #3: Images and Illustrations
Web Design Rules #4: Icons
Implementing Icons
Web Design Rules #5: Shadows
Implementing Shadows
Web Design Rules #6: Border-radius
Implementing Border-radius
Web Design Rules #7: Whitespace
Web Design Rules #8: Visual Hierarchy
Implementing Whitespace and Visual Hierarchy
Web Design Rules #9: User Experience (UX)
The Website-Personalities-Framework
The Missing Piece: Steal Like An Artist!
14 Topics
Section Intro
Web Design Rules #10 - Part 1: Elements and Components
Building an Accordion Component - Part 1
Building an Accordion Component - Part 2
Building a Carousel Component - Part 1
Building a Carousel Component - Part 2
Building a Table Component - Part 1
Building a Table Component - Part 2
CHALLENGE #1: Building a Pagination Component
Web Design Rules #10 - Part 2: Layout Patterns
Building a Hero Section - Part 1
Building a Hero Section - Part 2
Building a Web Application Layout - Part 1
Building a Web Application Layout - Part 2
29 Topics
Section Intro
The 7 Steps to a Great Website
Defining and Planning the Project (Steps 1 and 2)
Sketching Initial Layout Ideas (Step 3)
First Design and Development Steps (Step 4)
Responsive Design Principles
How rem and max-width Work
Building the Hero - Part 1
Building the Hero - Part 2
Building the Hero - Part 3
Building the Header
Building the Navigation
Setting Up a Reusable Grid
Building the How-It-Works Section - Part 1
Building the How-It-Works Section - Part 2
Building the Featured-In Section
Building the Meals Section - Part 1
Building the Meals Section - Part 2
Building the Meals Section - Part 3
Building the Testimonials Section - Part 1
Building the Testimonials Section - Part 2
Building the Pricing Section - Part 1
Building the Pricing Section - Part 2
Building the Features Part
Building the Call-To-Action Section - Part 1
Building the Call-To-Action Section - Part 2
Building the Call-To-Action Section - Part 3
Building the Footer - Part 1
Building the Footer - Part 2
9 Topics
Section Intro
How Media Queries Work
How to Select Breakpoints
Responding to Small Laptops
Responding to Landscape Tablets
Responding to Tablets
Building the Mobile Navigation
Responding to Smaller Tablets
Responding to Phones
11 Topics
Section Intro
A Short Introduction to JavaScript
Making the Mobile Navigation Work
Implementing Smooth Scrolling
Implementing a Sticky Navigation Bar
Browser Support and Fixing Flexbox Gap in Safari
Testing Performance With Lighthouse
Adding Favicon and Meta Description
Image Optimizations
Deployment to Netlify
Making the Form Work With Netlify Forms
2 Topics
Where to Go from Here
My Other Courses + Updates
Build Responsive Real-World Websites with HTML and CSS
Related CSS Courses
Thank You!
Your review has been submitted successfully.