Build Responsive RealWorld Websites with HTML and CSS

Build Responsive RealWorld Websites with HTML and CSS

What you’ll learn

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)

Requirements

No coding or design experience necessary
Any computer works — Windows, macOS or Linux
You don’t need to buy any software — we will use the best free code editor in the world

Description

*** The #1 bestselling HTML and CSS course on Udemy! ****** Completely re-built from scratch in July 2021 (35+ hours video) ***”Having gone through other related courses on other platforms, I can say this course is the most practical and readily applicable course on web design and development I have taken.” — Bernie PacisOpen a new browser tab, type in www.omnifood.dev, and take a look around. I will wait here……Amazing, right? What if you knew exactly how to design and build a website like that, completely from scratch? How amazing would that be?Well, I’m here to teach you HTML, CSS, and web design, all by building the stunning website that you just saw, step-by-step.So, after finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website just like Omnifood, by following a 7-step process. And it will even look great on any computer, tablet, and smartphone.But what if you want to build a completely different website? Well, no problem! I designed the course curriculum with exactly this goal: to enable you to design and build any website that you can think of, not just copy the course project.So, in order to become a confident and independent developer, capable of building your own websites in the future, you will learn:The fundamentals of modern and semantic HTML, CSS, and building layouts in a small separate project, which will prepare you for the main course project (www.omnifood.dev). This includes modern flexbox and CSS Grid!How to design beautiful websites, by learning a web design framework I created just for this course. It consists of easy-to-use guidelines for design aspects like typography, colors, images, spacing, and more (this is like a small standalone course!).How to use well-established website components and layout patterns in order to come up with professional-looking designsHow to make any website work on any mobile device, no matter the design and layout (responsive design)How to use the 7 steps of building a professional website in practice: planning, sketching, designing, building, testing, optimizing, and launchingHow to find and use free design assets such as images, fonts, and iconsImportant developer skills such as reading documentation, fixing code errors on your own, and using professional web development toolsDoes this sound like fun? Then join me and 200,000+ other developers and start building websites today!Or are you not sold yet and need to know more? No problem, just keep reading…[01] Why should you learn HTML and CSS in the first place?Building websites allows you to do fun and creative work, from anywhere in the world, and it even pays well. Web development is one of the most future-proof and highest-paying industries in the world. And HTML and CSS is the entry point to this world!But you already know all this, that’s why you want to learn HTML and CSS too. Well, you came to the right place!This is the best and most complete course for starting your web development journey that you will find on Udemy. It’s an all-in-one package that takes you from knowing nothing about HTML and CSS, to building beautiful websites using tools and technologies that professional web developers use every single day.[02] Why is this course so unique and popular?Reason #1: The course is completely project-basedSimple demos are boring, and therefore you’re gonna learn everything by building actual projects! In the final project (www.omnifood.dev), together we hand-code a beautiful and responsive landing page for a fictional company that I made up just for the course.Reason #2: You will not just learn how to codeCoding is great, but it’s not everything! That’s why we will go through the entire 7-step process of building and launching our website project.So the huge Omnifood project will teach you real-world skills to build real-world HTML and CSS websites: how to plan projects and page layouts, how to implement designs using HTML and CSS techniques, how to write clean and organized code, how to optimize websites for good speed performance, and many more.On top of that, this course has a huge focus on beautiful design. In fact, this is the only course on the market that focuses on both coding and designing, together.Reason #3: I’m the right teacher for youWith the right guidance and a well-structured curriculum, building websites can be quite easy and fun to learn. With a bunch of random tutorials and YouTube videos? Not so much. And that’s where I come in.My name is Jonas, I’m an experienced web developer and designer, and one of Udemy’s top instructors. I have been teaching this bestselling course since 2015 to over 200,000 developers, always listening to feedback and understanding exactly how students actually learn.Using that feedback, I recently rebuilt this course from scratch and designed the ideal course curriculum for every type of student. It’s a unique blend of projects, deep explanations, theory lectures, and challenges. I’m sure you’re gonna love it![03] Why is this course so long?Reason #1: I take time to explain every single concept that I teach, so that you actually learn, and not just copy code from the screen (this is a course, not a tutorial)Reason #2: I go into topics that other HTML and CSS courses shy away from: professional web design, component and layout patterns, some CSS theory, website planning in theory and practice, and developer skills. I believe you need all of this to be successful!Reason #3: There is a lot of repetition, so that you actually assimilate and practice what you learn. Practice is the single most important ingredient to learning, and therefore I provide plenty of opportunities for you to sharpen your skills[04] Here is what’s also included in the package:Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business students)Professional English captions (not the auto-generated ones)Downloadable design assets + starter code and final code for each sectionDownloadable slides for 20+ theory videos (not boring, I promise!)Access to countless free design and development resources that I curated over many yearsFree support in the course Q&A10+ coding challenges to practice your new skills (solutions included)[05] This course is for you if…… you are a complete beginner with no idea of how to build a website…. you already know a bit of HTML and CSS from some tutorials or videos, but struggle to put together a good-looking, complete website…. you are a designer and want to expand your skills into HTML and CSS, because all your designer friends are learning how to code (they are smart!).Basically, if you are an HTML and CSS master, and build the most beautiful websites in the world, then DON’T take the course. Everyone else: you should take the course, today.So, does all of this sound great? Then join me and 200,000+ other developers and start your web development journey today!

Overview

Section 1: Welcome and First Steps

Lecture 1 Course Structure and Projects

Lecture 2 Read Before You Start!

Lecture 3 Migration Guide to v2

Lecture 4 A High-Level Overview of Web Development

Lecture 5 Setting Up Our Code Editor

Lecture 6 Your Very First Webpage!

Lecture 7 Downloading Course Material

Lecture 8 Watch Before You Start!

Section 2: HTML Fundamentals

Lecture 9 Section Intro

Lecture 10 Introduction to HTML

Lecture 11 HTML Document Structure

Lecture 12 Text Elements

Lecture 13 More Text Elements: Lists

Lecture 14 Images and Attributes

Lecture 15 Hyperlinks

Lecture 16 Structuring our Page

Lecture 17 A Note on Semantic HTML

Lecture 18 Installing Additional VS Code Extensions

Lecture 19 CHALLENGE #1

Lecture 20 CHALLENGE #2

Section 3: CSS Fundamentals

Lecture 21 Section Intro

Lecture 22 Introduction to CSS

Lecture 23 Inline, Internal and External CSS

Lecture 24 Styling Text

Lecture 25 Combining Selectors

Lecture 26 Class and ID Selectors

Lecture 27 Working With Colors

Lecture 28 Pseudo-classes

Lecture 29 Styling Hyperlinks

Lecture 30 Using Chrome DevTools

Lecture 31 CSS Theory #1: Conflicts Between Selectors

Lecture 32 CSS Theory #2: Inheritance and the Universal Selector

Lecture 33 CHALLENGE #1

Lecture 34 CSS Theory #3: The CSS Box Model

Lecture 35 Using Margins and Paddings

Lecture 36 Adding Dimensions

Lecture 37 Centering our Page

Lecture 38 CHALLENGE #2

Lecture 39 CSS Theory #4: Types of Boxes

Lecture 40 CSS Theory #5: Absolute Positioning

Lecture 41 Pseudo-elements

Lecture 42 Developer Skill #1: Googling and Reading Documentation

Lecture 43 Developer Skill #2: Debugging and Asking Questions

Lecture 44 CHALLENGE #3

Section 4: Layouts: Floats, Flexbox, and CSS Grid Fundamentals

Lecture 45 Section Intro

Lecture 46 The 3 Ways of Building Layouts

Lecture 47 Using Floats

Lecture 48 Clearing Floats

Lecture 49 Building a Simple Float Layout

Lecture 50 box-sizing: border-box

Lecture 51 CHALLENGE #1

Lecture 52 Introduction to Flexbox

Lecture 53 A Flexbox Overview

Lecture 54 Spacing and Aligning Flex Items

Lecture 55 The flex Property

Lecture 56 Adding Flexbox to Our Project

Lecture 57 Building a Simple Flexbox Layout

Lecture 58 CHALLENGE #2

Lecture 59 Introduction to CSS Grid

Lecture 60 A CSS Grid Overview

Lecture 61 Sizing Grid Columns and Rows

Lecture 62 Placing and Spanning Grid Items

Lecture 63 Aligning Grid Items and Tracks

Lecture 64 Building a Simple CSS Grid Layout

Lecture 65 CHALLENGE #3

Section 5: Web Design Rules and Framework

Lecture 66 Section Intro

Lecture 67 Project Overview

Lecture 68 Overview of Web Design and Website Personalities

Lecture 69 Web Design Rules #1: Typography

Lecture 70 Implementing Typography

Lecture 71 Web Design Rules #2: Colors

Lecture 72 Implementing Colors

Lecture 73 Web Design Rules #3: Images and Illustrations

Lecture 74 Web Design Rules #4: Icons

Lecture 75 Implementing Icons

Lecture 76 Web Design Rules #5: Shadows

Lecture 77 Implementing Shadows

Lecture 78 Web Design Rules #6: Border-radius

Lecture 79 Implementing Border-radius

Lecture 80 Web Design Rules #7: Whitespace

Lecture 81 Web Design Rules #8: Visual Hierarchy

Lecture 82 Implementing Whitespace and Visual Hierarchy

Lecture 83 Web Design Rules #9: User Experience (UX)

Lecture 84 The Website-Personalities-Framework

Lecture 85 The Missing Piece: Steal Like An Artist!

Section 6: Components and Layout Patterns

Lecture 86 Section Intro

Lecture 87 Web Design Rules #10 – Part 1: Elements and Components

Lecture 88 Building an Accordion Component – Part 1

Lecture 89 Building an Accordion Component – Part 2

Lecture 90 Building a Carousel Component – Part 1

Lecture 91 Building a Carousel Component – Part 2

Lecture 92 Building a Table Component – Part 1

Lecture 93 Building a Table Component – Part 2

Lecture 94 CHALLENGE #1: Building a Pagination Component

Lecture 95 Web Design Rules #10 – Part 2: Layout Patterns

Lecture 96 Building a Hero Section – Part 1

Lecture 97 Building a Hero Section – Part 2

Lecture 98 Building a Web Application Layout – Part 1

Lecture 99 Building a Web Application Layout – Part 2

Section 7: Omnifood Project – Setup and Desktop Version

Lecture 100 Section Intro

Lecture 101 The 7 Steps to a Great Website

Lecture 102 Defining and Planning the Project (Steps 1 and 2)

Lecture 103 Sketching Initial Layout Ideas (Step 3)

Lecture 104 First Design and Development Steps (Step 4)

Lecture 105 Responsive Design Principles

Lecture 106 How rem and max-width Work

Lecture 107 Building the Hero – Part 1

Lecture 108 Building the Hero – Part 2

Lecture 109 Building the Hero – Part 3

Lecture 110 Building the Header

Lecture 111 Building the Navigation

Lecture 112 Setting Up a Reusable Grid

Lecture 113 Building the How-It-Works Section – Part 1

Lecture 114 Building the How-It-Works Section – Part 2

Lecture 115 Building the Featured-In Section

Lecture 116 Building the Meals Section – Part 1

Lecture 117 Building the Meals Section – Part 2

Lecture 118 Building the Meals Section – Part 3

Lecture 119 Building the Testimonials Section – Part 1

Lecture 120 Building the Testimonials Section – Part 2

Lecture 121 Building the Pricing Section – Part 1

Lecture 122 Building the Pricing Section – Part 2

Lecture 123 Building the Features Part

Lecture 124 Building the Call-To-Action Section – Part 1

Lecture 125 Building the Call-To-Action Section – Part 2

Lecture 126 Building the Call-To-Action Section – Part 3

Lecture 127 Building the Footer – Part 1

Lecture 128 Building the Footer – Part 2

Section 8: Omnifood Project – Responsive Web Design

Lecture 129 Section Intro

Lecture 130 How Media Queries Work

Lecture 131 How to Select Breakpoints

Lecture 132 Responding to Small Laptops

Lecture 133 Responding to Landscape Tablets

Lecture 134 Responding to Tablets

Lecture 135 Building the Mobile Navigation

Lecture 136 Responding to Smaller Tablets

Lecture 137 Responding to Phones

Section 9: Omnifood Project – Effects, Optimizations and Deployment

Lecture 138 Section Intro

Lecture 139 A Short Introduction to JavaScript

Lecture 140 Making the Mobile Navigation Work

Lecture 141 Implementing Smooth Scrolling

Lecture 142 Implementing a Sticky Navigation Bar

Lecture 143 Browser Support and Fixing Flexbox Gap in Safari

Lecture 144 Testing Performance With Lighthouse

Lecture 145 Adding Favicon and Meta Description

Lecture 146 Image Optimizations

Lecture 147 Deployment to Netlify

Lecture 148 Making the Form Work With Netlify Forms

Section 10: The End!

Lecture 149 Where to Go from Here

Lecture 150 My Other Courses + Updates

Section 11: [LEGACY] Old Course Version 1

Lecture 151 Download the Old Course Version

Complete beginners who want to learn how to build a professional, beautiful and responsive website,Students with some knowledge about HTML and CSS, but who struggle to put together a great website,Designers who want to expand their skill set into HTML5 and CSS3

Course Information:

Udemy | English | 37h 30m | 24.80 GB
Created by: Jonas Schmedtmann

You Can See More Courses in the Developer >> Greetings from CourseDown.com