Brochure
Enquire
- Course Structure and Projects
- Read Before You Start!
- Migration Guide to v2
- A High-Level Overview of Web Development
- Setting Up Our Code Editor
- Your Very First Webpage!
- Downloading Course Material
- Watch Before You Start!
Build Responsive Real-World Websites with HTML and CSS
Quick Facts
| particular | details | |||
|---|---|---|---|---|
|
Medium of instructions
English
|
Mode of learning
Self study
|
Mode of Delivery
Video and Text Based
|
Course overview
Developing websites is a unique and entertaining profession that can be accomplished from anywhere on the planet and rewards well. Web development is one of the most dependable and profitable professions on the planet. Build Responsive Real-World Websites with HTML and CSS online course is the best and most comprehensive training program for getting started in web development. Jonas Schmedtmann - Web Developer, Designer, and Teacher created the Build Responsive Real-World Websites with HTML and CSS online certification, which is delivered by Udemy.
Build Responsive Real-World Websites with HTML and CSS online classes aim to teach applicants what they need to know about HTML and CSS to develop websites utilizing tools and technology that professional web developers use often. This course includes more than 37.5 hours of informative video sessions, as well as 2 articles and 4 downloadable materials that cover web development, Web design, CSS grid, Flexbox, and more.
The highlights
- Certificate of completion
- Self-paced course
- English videos with multi-language subtitles
- 37.5 hours of pre-recorded video content
- 2 articles
- 4 downloadable resources
- 30-day money-back guarantee
- Unlimited access
- Accessible on mobile devices and TV
Program offerings
- Certificate of completion
- Self-paced course
- English videos with multi-language subtitles
- Pre-recorded video content
- Articles
- Downloadable resources
- 30-day money-back guarantee
- Unlimited access
- Accessible on mobile devices and tv
Course and certificate fees
Fees information
₹ 4,099
certificate availability
Yes
certificate providing authority
Udemy
Who it is for
What you will learn
Knowledge of css
After completing the Build Responsive Real-World Websites with HTML and CSS certification course, applicants will gain an understanding of the fundamentals of web development and design. Applicants will understand HTML, HTML5, CSS, and CSS3 developmental capabilities. Applicants will learn about CSS Grid and Flexbox for layouts. Applicants will also learn how to develop a website by planning, sketching, designing, building, testing, and optimizing it.
The syllabus
Welcome and First Steps
HTML Fundamentals
- 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
CSS Fundamentals
- 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
Layouts: Floats, Flexbox, and CSS Grid Fundamentals
- Section Intro
- 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
Web Design Rules and Framework
- 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!
- Components and Layout Patterns
- 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
Omnifood Project – Setup and Desktop Version
- 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
Omnifood Project – Responsive Web Design
- 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
Omnifood Project – Effects, Optimizations and Deployment
- 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
The End!
- Where to Go from Here
Instructors
Articles
Popular Articles
prev
next
Latest Articles
prev
next
