Basic HTML CSS and Web Design

Learn how to Create a Static Single-column Website using HTML and CSS in One Practical Project
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
3 students enrolled
$19
$25
24% off
Take This Course
  • Lectures 46
  • Length 9 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 2/2016 English

Course 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.

What are the requirements?

  • Any Computer with and an Internet Connection with Mac OS, Windows or Linux

What am I going to get from this course?

  • 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

What is the target audience?

  • 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Preparing Your Tools
03: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!
03: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.

07: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.

Section 2: Creating the HTML Pages
13:52

In this lecture, you'll learn how to create the basic structure of an HTML document while creating index.html.

13:35

In this lecture, you'll learn how to create the basic structure of an HTML document while creating index.html.

11:30

In this lecture, you'll learn how use the HTML elements <ul>, <strong> and <a> in your website.

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.

05:06

In this lecture, you'll learn how to use the W3C Markup Validation Service to check your HTML pages for possible errors.

Section 3: General CSS Part 1
14: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.

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.

10: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.

14: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.

10: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.

13: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>.

09: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.

10: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;

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.

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.

09: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.

08: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.

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.

09: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.

13: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.

14: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.

08: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.

Section 4: Structuring Content in an HTML Page
16: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.

15: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.

Section 5: General CSS Part 2
17: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.

14: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.

Section 6: CSS For the Navigation Menu
15: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.

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.

11: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.

Section 7: Contact Form
16:44

In this lecture, you create the HTML structure of a contact form.

04:05

In this lecture, you create the HTML structure of a contact form.

17:56

In this lecture, you'll create another HTML page to which you create a hyperlink from inside the HTML form.

11:00

In this lecture, you learn how to use the proper CSS declarations for a typical contact form.

17:05

In this lecture, you learn how to use the proper CSS declarations for a typical contact form.

Section 8: HTML Tables
13:35

In this video, you'll see an introduction to HTML tables and then start to create one on page privacy-policy.html.

20: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.

01:53

In this lecture, you'll complete the CSS part related to the HTML table.

Section 9: Print Version
14:07

In this lecture, you'll create an external style sheet called "print.css" for the print version of the website.

13:54

In this lecture, you'll start writing the required CSS rules for the print version of the website.

13:44

In this lecture, you'll continue writing the required CSS rules for the print version of the website.

09:31

In this lecture, you'll complete the required CSS rules for the print version of the website.

Section 10: Miscellaneous
07:32

In this lecture, you'll learn how you can create and use a favicon in your website.

03: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!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Great IT Courses, Web Development Learning Solutions

At Great IT Courses, you Learn Web Development From Scratch. We have Found the Perfect Way of Teaching IT Skills that you Can Instantly Use in Your Web Development Career Instantly. We Are Very excited to Share it With You!

With us, you start with simple HTML and CSS. We'll take you all the way through server-side programming and scripting. We are confident that you'll love our courses because we do!

Ready to start learning?
Take This Course