Your cart is empty.
Keep shopping
Teach on Udemy
Turn what you know into an opportunity and reach millions around the world.
Learn MoreBasic HTML CSS and Web Design
Rating: 4.1 out of 54.1(150 ratings)
4,161 students
What you'll learn
- Create a Static Single Column Website from Scratch Using HTML and CSS
- Apply all the Important and Underlying Concepts of Web Design Throughout the Process
- Build a Strong Foundation of HTML, CSS and Web Design Upon which You Can Build the Rest of Your Web Development Career
Explore related topics
Course content
10 sections • 46 lectures • 9h 10m total length
- How to Get the Most Out of this Course3:52
Here's how you can get the most out of this Course:
- Watch the videos once so that you know the main concept and be prepared for the practice part.
- Once you watch any of the videos for the first time, play the same video again and build that part of the project yourself on your own machine.
- In the beginning of section 2, in the resources section, there's a link to the Project Source Code. You can download the whole project source code using that link. You can then unzip the folder and have access to the source code related to the whole project and every lecture as well. The source code has been broken down in such a way that you jump into any section or lecture starting from that point onward.
- Don't get discouraged if you don't learn everything the first time. Most people need to do any such project at least twice to learn everything, the code and the concepts behind the code.
- If there's anything that you don't understand, feel free to contact us. We'll be more than happy to help you out. You can ask your questions in the course discussion board or just send us a message. We'll make sure that you'll have a positive satisfying fun learning experience. That's our goal here!
- Install Mozilla Firefox3:27
In this lecture, you install Mozilla Firefox browser, and two add-ons for the browser, Web Developer and Firebug. You are going to use these tools in your development environment.
- Install Notepad++ Text Editor7:07
In this lecture, you're going to install Notepad++ text editor that you're going to use to write the HTML and CSS code for the project.
- The Basic Structure of an HTML Document Part 113:52
In this lecture, you'll learn how to create the basic structure of an HTML document while creating index.html.
- The Basic Structure of an HTML Document Part 213:35
In this lecture, you'll learn how to create the basic structure of an HTML document while creating index.html.
- <ul>, <strong>, <a>11:30
In this lecture, you'll learn how use the HTML elements <ul>, <strong> and <a> in your website.
- <title>, <meta name="description"...>, <nav>14:38
In this lecture, you'll learn how to use <title> and <meta name="description" ...> practically in the <head> of your HTML documents while creating the page contact.html.
You'll also learn how to use <nav> to create a navigation menu for your website.
- W3C Markup Validation Service5:06
In this lecture, you'll learn how to use the W3C Markup Validation Service to check your HTML pages for possible errors.
- CSS Style Block and External Style Sheets14:55
In this lecture, you'll add an external style block to the head of index.html. You will also create an external style sheet for the project.
- HTML "link" Element and "div#wrapper"14:04
In this lecture, you'll create an HTML <link> element to link the external style sheet created in Lecture 9 to the <head> of the HTML pages.
- CSS "background-color" and "color" Properties10:44
In this lecture, you'll use the the CSS properties background-color and color for <body> and div#wrapper. You'll learn how to pick the two CSS properties based on professional web design rules and agreements.
- CSS "font-size" and "font-family" Properties14:03
In this lecture, you'll apply the css "font-size" and "font-family" properties to <body>. You'll learn how to choose the two CSS properties based on professional web design rules and agreements.
- CSS "font-size" Property and Google Fonts10:29
In this lecture, the CSS "font-size" property will be explained. You'll learn how the CSS property affects the font-size of the whole website when it's applied to <body> and so inherited by the child elements of <body>.
Also you'll learn how to choose and use a font from Google Fonts for the <h1> in the header of the website.
- CSS Box Model and Firebug13:21
In this lecture, you'll learn how to analyze distances for any part of your website using the Firefox add-on Firebug.
You'll also practically learn the different properties of the CSS box model while analyzing and fixing the distances for some elements in <header>.
- Fixing Distances and Gaps Around Elements9:27
In this lecture, you'll learn how to find the cause of any distance or gap around any element using Firebug and fix it using CSS rules while working on <nav>.
You'll also learn how the browser internal style sheet applies some CSS properties to elements if you don't define your own CSS styles.
- CSS "font-size", "font-family" and "border" Properties10:06
In this lecture you'll learn how to give a font-family headings (h1-h6). You'll learn that you need to define a serif font family for them.
Also you'll learn how to define a border line for any box or element while giving a border-top to <footer>.
You'll learn how to center text in a paragraph using text-align: center;
- Color Design, ":link", ":visited", ":hover", ":focus", ":active"16:20
In this lecture, you'll learn how to implement color design on your website so that every element on your website is harmonious. This will be explained further in other lectures during the course.
Also you'll learn how to use the CSS pseudo classes like ":link" that are related to hyperlinks to design the different colors for the different states of hyperlinks in your website.
- CSS Reset, Restoring Distances, CSS Unit "em"12:38
In this video, you'll set all the distances for all elements to zero for the CSS Reset part. Next, you'll start to define the right distances for every element you have used in the project.
Also, you'll learn how the CSS unit "em" works and the fact that it's a relative unit, not a fixed one.
- Centering Block Level Elements9:40
In this lecture, you'll learn how to center block level elements while limiting the width of div#wrapper and centering it in the middle of the view port.
You'll learn the difference between centering block level and inline elements.
You'll also learn the difference between block level and inline elements. This will be further explained in other places during the project as well.
- CSS Box Model, "padding"8:16
In this lecture, the CSS box model will be explained. You'll learn how to add "padding" to each of the sections <header>, <nav>, div#main and <footer> while inspecting each of them with Firebug.
- "background", "background-image", "background-color"15:27
In this lecture, you'll learn how you can use the CSS properties "background", "background-image", "background-color", "background-position", "background-size", etc. to assign a background image to <body>. This could essentially be done on any box or element in HTML.
- Tidying Up the Style Sheet9:01
In this lecture, you'll learn how you can create a brief documentation at the top of your style sheet.
Moreover, you'll learn how to tidy up the style sheet and put the CSS rules in the right order to that you can find them easily again.
- External Central Style Sheet13:38
In this lecture, you'll learn how you can create an external central style sheet into which all the other external style sheets can be imported. This way you can move all the CSS rules related to the navigation menu for instance to a separate external style sheet, called "nav.css" for instance and then import "nav.css" into the central style sheet. This can be done for every major section in the project.
- CSS Shorthand Writing, CSS Reset Restoring, References14:01
In this lecture, you'll learn how you can make your CSS rules shorter by combining your CSS declarations together.
Also you'll create a general purpose CSS Reset style sheet that you'll be able to use for every upcoming project.
You'll also learn about the W3schools online CSS reference and you'll learn how to use it.
- CSS Reset, W3C CSS Validation Service8:45
In this lecture, you'll complete the CSS Reset style sheet that you started in the previous lecture.
Also, you'll use the CSS Validation Service from W3C to check your style sheets for possible errors.
- Creating a Content Page Part 116:21
In this lecture, you'll learn how to create the structure of an HTML page based on the content you want it to present. You'll create an HTML page called "references.html" to present two online CSS references.
- Creating a Content Page Part 215:42
In this lecture, you'll learn how to create the structure of an HTML page based on the content you want it to present. You'll create an HTML page called "references.html" to present two online CSS references.
- "font-family", "font-size" , "line-height", Block and Inline CSS17:13
In this lecture, you'll learn how to define "font-family" and "font-size" CSS properties for headings (h1-h6) for your whole project.
You'll also learn how to use CSS blocks in the <head> of HTML documents.
Also, you'll learn how to use inline style for certain elements in your HTML documents.
- CSS Classes14:24
In this lecture, you'll learn how to use CSS classes conceptually while applying CSS classes to the HTML pages you created in the last section.
You'll also learn the difference between CSS id's and classes and how to use them in your projects.
- "display: inline;", CSS Specificity Concept15:40
In this lecture, you'll learn how to use the "display: inline;" CSS declaration to place all the navigation menus in one horizontal line.
You'll also learn about the concept of CSS sepcificity while working on the navigation menu.
- CSS Specificity, "text-decoration: none;", "border-radius"16:31
In this lecture, you'll learn the concept of CSS Specificity while working on the navigation menu.
You'll also learn the CSS properties "text-decoration" and "border-radius" while working on the navigation menu.
- CSS Pseudo Classes for the Navigation11:42
In this lecture, you'll learn how to use CSS pseudo classes like ":hover", ":focus", etc. to simulate the different states of the navigation buttons. For example, when the user clicks one of the navigation buttons, you use one or some of those pseudo classes to simulate a button that's being pressed. This way the user understands what's happening on the website.
- Creating an HTML Form Part 116:44
In this lecture, you create the HTML structure of a contact form.
- Creating an HTML Form Part 24:05
In this lecture, you create the HTML structure of a contact form.
- Creating an HTML Form Part 317:56
In this lecture, you'll create another HTML page to which you create a hyperlink from inside the HTML form.
- CSS Styles for the HTML Form Part 111:00
In this lecture, you learn how to use the proper CSS declarations for a typical contact form.
- CSS Styles for the HTML From Part 217:05
In this lecture, you learn how to use the proper CSS declarations for a typical contact form.
- Creating an HTML Table Part 113:35
In this video, you'll see an introduction to HTML tables and then start to create one on page privacy-policy.html.
- Creating an HTML Table Part 2 and CSS For the Table20:09
In this lecture, you'll complete the HTML table you started to create in the previous video and then start to apply the proper CSS declarations to it.
- CSS for the HTML Table1:53
In this lecture, you'll complete the CSS part related to the HTML table.
- Creating an External Style Sheet for the Print Version14:07
In this lecture, you'll create an external style sheet called "print.css" for the print version of the website.
- CSS Rules for the Print Version Part 113:54
In this lecture, you'll start writing the required CSS rules for the print version of the website.
- CSS Rules for the Print Version Part 213:44
In this lecture, you'll continue writing the required CSS rules for the print version of the website.
- CSS Rules for the Print Version Part 39:31
In this lecture, you'll complete the required CSS rules for the print version of the website.
- Favicon7:32
In this lecture, you'll learn how you can create and use a favicon in your website.
- Wrapping Up3:13
We have to wrap up the project here. Please check back. We'll add more resources and info here regularly. We sincerely appreciate the time you spent on this project. See you soon!
Requirements
- Any Computer with and an Internet Connection with Mac OS, Windows or Linux
Description
Learn how to develop modern websites using HTML and CSS in one single project from scratch in 8 hours in video format.
You'll be taken from an absolute novice to being able to design and implement a functional, modern, static, front end, essentially a typical website, for any web application using HTML and CSS.
Every step of the way is fully explained and the source code is provided broken down for each video, section or for the whole course. This way you can jump in at any point in the project, download the source code and files and work through the project.
The course has been designed in such a way that you'll learn all the theory required while doing the project. Therefore it's very important that you do the project yourself while you're watching the videos.
Who this course is for:
- Start a Web Development Career
- Create a Personal Website for Yourself From Scratch using HTML and CSS
- Become a Web Designer
- Understand How Your Content Management System Like WordPress Works
- Learn HTML and CSS for any other Reason