HTML5 and CSS3: Craft your own websites (with 4 projects)

Learn HTML and CSS from zero, without need any prior knowledge, to create your responsive websites

4.45 (24 reviews)
Udemy
platform
English
language
Web Development
category
HTML5 and CSS3: Craft your own websites (with 4 projects)
177
students
10 hours
content
Jun 2022
last update
$19.99
regular price

What you will learn

Structure web pages with HTML

Style web pages with CSS

How to create complete websites from scratch

How to build responsive websites

Why take this course?

In this course you're going to learn everything you need to know how to build responsive web sites with HTML and CSS.


You will have a mix of theory and practice, to know the concepts of the techniques and also apply them in real situations.

After the 4 projects of this course you are ready to create every website you want, and also adapt them to all the devices and screen sizes, using responsivity.


Some of the concepts that are present in this course are:

- HTML5;

- CSS3;

- Flexbox;

- Semantic HTML;

- Responsivity;

- Real projects and exercises to practice;

- And much more...


You don't need any previous contact with HTML or CSS, I am going to teach you from the very beginning, not only the languages, but the tools that you need as a developer are also covered in this course.


It is important to mention that all the subjects are explained in different aspects, so you will internalize this knowledge, to be ready to apply everything in your career or personal projects.


The projects of this course were built thinking in your progression and also to apply all the HTML elements and CSS rules you will learn, so we are going to start slow and in the end we will be building real websites and also clone a famous website.


If this is what you are searching for, I'm waiting for you in the classes to write code together! =)

Content

Introduction

Course overview
What is HTML?
What is CSS?
The importance of a code editor
Our first website
What hapenned?
Course files
Conclusion
Quizz about HTML & CSS basics

HTML Basics

Introduction
The anatomy of a tag
HTML structure
Headings
Paragraphs
Tags without content
Comments
Attributes
Opening a link in a new tab
Images
The alt attribute
Unordered list
Ordered list
Tables
The div tag
Conclusion

CSS Basics

Introduction
Ways of adding a class
Anatomy of CSS
Inline CSS
Multiple CSS rules
Internal CSS
External CSS
CSS Order
Comments in CSS
Classes and ids
Classes
How to use id
CSS rules order
About CSS colors
Color names
HEX
Shortened HEX
RGB
RGB with opacity
HSL
Background color
Background with opacity
Solving the opacity problem
Background image
Centering a background image
Box model
Width and height
Padding
Individual padding
Shorthand padding
Padding and width
Borders
Individual border
Rounded borders
Margin
Putting everything together
Text alignment
Text decoration
Text transform
Letter spacing
Fonts
Font style
Font weight
Font size
Display
Hidding elements
About CSS positions
Position static
Position relative
Position absolute
Relative with Absolute
Position fixed
Position sticky
Z-index
Conclusion

Project 1: Tribute Page

Introduction
Project structure
Building the first section
Concluding the HTML
Beginning the styles
Concluding the CSS
Conclusion

Forms with HTML

Introduction
What is a form?
Our first form
Form attributes
Name attribute
Label attribute
Sending a form to the server
Select element
Selected attribute
Selecting multiple options
Textarea
Fieldset and legend
Datalist
Input for password
Resetting form fields
Radio button
Checkbox
Input for dates
Input for files
Input for numbers
Input for emails
The value attribute
Disabled attribute
Placeholder attribute
Required attribute
Conclusion

Project 2: Car selling form

Introduction
Project structure
Creating the page header
Creating the form
Finishing the form
Resetting some styles
Concluding the project

Responsivity in web pages

Introduction
What is responsivity?
Configuring the HTML
Creating a media query
Media query with min-width
Common breakpoints
Adding styles to a device in landscape
Conclusion

Project 3: hdC Host

Introduction
Project base structure
Navbar
Styling of navbar
Banner section
Services section
HTML of prices and plans section
CSS of prices and plans section
Search domain section
Concluding desktop version
Adding responsivity

Flexbox

Introduction
What is flexbox?
Applying flex to an element
Flex direction
Flex wrap
Justify content
Align items
Gap between elements
Changing order
Grow
Basis
Shrink
Flex shorthand
Self align
Conclusion

Conclusion and next steps

Course conclusion

Screenshots

HTML5 and CSS3: Craft your own websites (with 4 projects) - Screenshot_01HTML5 and CSS3: Craft your own websites (with 4 projects) - Screenshot_02HTML5 and CSS3: Craft your own websites (with 4 projects) - Screenshot_03HTML5 and CSS3: Craft your own websites (with 4 projects) - Screenshot_04

Reviews

Michael
July 2, 2022
Feels like having a teacher right in front of you, and being able to go back and rewind is very helpful for practicing the code on VSC.

Charts

Price

HTML5 and CSS3: Craft your own websites (with 4 projects) - Price chart

Rating

HTML5 and CSS3: Craft your own websites (with 4 projects) - Ratings chart

Enrollment distribution

HTML5 and CSS3: Craft your own websites (with 4 projects) - Distribution chart
4675320
udemy ID
5/6/2022
course created date
6/5/2022
course indexed date
ANUBHAVJAIN
course submited by