How to Create A Website: An HTML Tutorial and CSS Tutorial
4.8 (299 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,115 students enrolled
Wishlisted Wishlist

Please confirm that you want to add How to Create A Website: An HTML Tutorial and CSS Tutorial to your Wishlist.

Add to Wishlist

How to Create A Website: An HTML Tutorial and CSS Tutorial

Learn How To Make Websites from a University Professor in Computer Science with over 15 years of teaching experience.
4.8 (299 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,115 students enrolled
Created by Todd McLeod
Last updated 11/2016
English
Curiosity Sale
Current price: $10 Original price: $65 Discount: 85% off
30-Day Money-Back Guarantee
Includes:
  • 32.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build beautiful webpages using today's best practices
  • Understand the importance of performance and build performant websites
  • Acquire an outstanding foundation in the fundamentals of web programming
  • Learn from a University Professor in Computer Science with over 15 years of experience teaching individuals of all ability levels
  • Achieve mastery in the understanding and application of HTML & CSS
  • Apply cutting-edge techniques such as Flexbox and SVGs
View Curriculum
Requirements
  • No prerequisite knowledge is required to take this course. This course starts at the very beginning and will teach you everything you need to know to be an outstanding web developer.
Description

Creating websites is a craft. Like any craft, there are a variety of tools. To a new initiate, the tools in the workshop glimmer with potential. They are also overwhelming.

Should you learn Bootstrap, Dreamweaver, Edge Studio, Joomla!, or WordPress? Should you use Squarespace, Wix, Weebly, or Shopify? Should you learn Sublime, Atom, or Webstorm? Should you go into the front-end, the back-end, or both? And what about HTML, CSS, JavaScript, Less, Sass, Grunt, Gulp, NPM, Node.js, Django, Python, Rails, PHP, Go, React, Angular, Web Components, Polymer, Git, GitHub, JSON, AJAX, UX, UI, AMP, PWA, performance, and jQuery? Where do they fit in?

My name is Todd McLeod and I began creating websites in 1997. I began teaching how to create websites in 2001. I am tenured college faculty in Computer Information Technology at Fresno City College. I have also served as adjunct faculty in Computer Science at California State University Fresno. My experience includes teaching individuals of all ability levels how to create websites: from people with very limited computer experience to graduate students in computer science.

By the end of this course, you will have strong skills in creating websites with HTML & CSS. As with any craft, the fundamentals are essential. If you have a strong foundation in the fundamentals, you will be poised to grow and develop professionally as a craftsperson who knows their craft.

After completing this course, you will have mastered the fundamentals of creating websites: HTML & CSS. You will then be knowledgeable enough to make an informed decision about whether or not you need any of the tools mentioned above.

If you want to learn how to create websites, the first place to begin is with the fundamentals of HTML & CSS.

The first place to begin is with this course.

Who is the target audience?
  • This is a first semester university level course.
  • This course is ideal for beginners wanting to learn how to build websites.
  • This course is perfect for experienced developers wanting a thorough introduction to current best-practices.
  • This course is perfect for experienced developers wanting to fill in gaps in their knowledge.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
330 Lectures
32:36:36
+
Getting Started
10 Lectures 58:25

When a web server responds to a request it includes in its response a status code. You can see a list of all of the status codes on wikipedia. Interestingly, there is an HTTP status code 418 which means “I’m a teapot.” This was put into the specification as an April fool’s joke. However, if you go to www.google.com/teapot, you can see Google’s web servers respond with the HTTP Status code 418.

Preview 06:22

In Google chrome, we are able to view all of the HTML which makes up a webpage. By right-clicking that webpage and choosing “inspect,” we are taken into the “elements” tab of developer tools. In the “elements” tab of developer tools, we can change the HTML which is there and our changes will be reflected in the webpage shown in the browser. This allows us to play practical jokes like changing a headline in the news.

Having Fun #2 - Making The News
04:12

In Google chrome, if you’re offline and try to go to a webpage, you will see a dinosaur letting you know that you are offline. What most people don’t know is that this dinosaur is a video game. If you hit your spacebar, that dinosaur will start running across the desert. Your goal, if you want the dinosaur to stay alive, is to jump each cactus.

Having Fun #3 - The Dinosaur Video Game
02:42

  • Only the top 25 to 50 apps — and some sources show that just the top 5 apps — are responsible for 80% to 90% of all app usage.

  • the average mobile owner uses about 24 apps per month, 24 unique apps per month and visits between 10 and 30 times as many unique websites in a given month.
Websites vs Apps - Should You Learn Web Dev of App Dev?
06:02

Not a lot of people are aware of the opportunities which are available through coding bootcamps. Code bootcamps take individuals who have a foundation in HTML, CSS, and JavaScript then train them to be job ready. When the students in a bootcamp have successfully completed the bootcamp, the bootcamp then places the students in jobs. Coding bootcamps have very compelling statistics for job placement rates and salaries. The best code bootcamps place over 95% of their graduates in jobs that earn over $100,000 / year. You are on your pathway to a $100,000 / year job.

Your Pathway to a $100,000 / Year Salary
05:39

Building websites is both an art and engineering. It is a craft which requires us to know many details. Much like cooking, we must learn all of the possible ingredients which we can add to the dish we are creating. A large part of this course will be learning these “ingredients” - the little things which, once we know them, we can then select from to build a masterpiece. My teaching style in the course will be to give you too much material rather than not enough. I’d rather have you skipping a few videos than wishing there were a few more.

Preview 08:30

All of the code for this course will be stored on github. You can download all of the code in this course from the course repository on github. Often people abbreviate “repository” and just say “repo.” Later in the course, you will learn how to use github and create your own repos.

Getting The Code Used In This Course
04:27

Stay current. Find great jobs. Gain discounted or even free access to my courses. Follow me on social media to realize all of these benefits.
Stay Current, Find Jobs, Receive Discounts
02:14


Understanding what has made others successful can help you become successful. These are principles which have helped me become successful. I learned these principles from others and from my own experience. I share these principles to help you succeed in this course and in life.

How To Succeed
10:57
+
Understanding The Internet & World Wide Web
8 Lectures 44:53

The Internet was created in the 1960’s. Originally it was called the “arpanet.” The first message was sent on the Internet in 1969. The Internet was created to allow communication to continue in the event of a nuclear war. Before the Internet, people communicated using “switched” networks. The Internet allowed people to communicate using “packet switching” networks. With a “packet switching” network, message are broken up into packets and put onto the network, then “routers” send those packets to their destination via the routes which are still viable. The Internet was created by Darpa which is the Defense Advanced Research Projects Agency.

History of the Internet
06:06

Tim Berners-Lee, an engineer at the Center for European Nuclear Research (CERN), conceived of the World Wide Web (WWW) in 1980. The WWW was launched in 1990. In 1991, the first web server outside of CERN was launched. The WWW was created to allow people to format text shared on the Internet, and to also allow them to use hypertext. Hypertext is text that has hyperlinks. A hyperlink is a link which takes you to some other resource on the WWW. It is important to know that the Internet and the WWW are two separate things. Even though most people use “Internet” and “WWW” interchangeably, the Internet and WWW are indeed two separate things. You can think of the Internet as all of the hardware: the computers, servers, routers, modems, cables, and satellites. You can think of the WWW as a service which runs on the Internet.

History of the World Wide Web
08:58

The Internet and WWW aren’t controlled by any one organization nor individual. Instead, there are many different organizations and individuals who influence the development of the Internet and WWW. The main standards organizations which influence the direction of the Internet and WWW include the W3C, the WHATWG, and the IETF.

Who Controls the Internet & WWW?
07:02

MDN is the ultimate source for web documentation. MDN stands for Mozilla Developer Network. Webplatform.org might also soon be a good source for web documentation. W3schools.com can sometimes be useful, but their material is also at times incorrect. Stackoverflow.com is a good place to ask questions and read answers to questions that have been asked in the past. Codepen.io is a good place to look for examples of code. Csstricks.com has good articles and is well liked in the industry. The web ahead offers good podcasts on creating websites.

Web Documentation
04:30

Google Chrome allows you to add extensions. Extensions extend the capabilities of chrome. You can learn about Chrome extensions by searching Google for “chrome extensions”. The “super simple highlighter” is an extension which allows you to highlight webpages. Once you have extensions, you can manage them by going to “settings” in Chrome and then “extensions.” You can check whether or not extensions are “enabled” and you can also delete extensions.

Highlighting Webpages & Chrome Extensions
03:56

The web uses a client / server architecture. Clients make requests to servers, and then servers respond to clients. After the request / response cycle, the connection between the client and the server is severed. The web is known as being “stateless” because of this - state is not maintained, eg, an ongoing connection between the server and client are not maintained. For both the request and the response, each of them have both a header and a body. The header includes information pertinent to the communication between the devices, but not usually interesting to the user. The body includes the main “payload” of the communication: either data the client is sending to the server, or the webpage the server is sending to the client.

How The Web Works
07:03

The dark web is an anonymous web. It is built using The Onion Router (TOR). Tor helps conceal your identity by routing requests through many routers with each router only knowing the router before it and the router after it. The dark web hosts many websites which sell illegal goods.

The Dark Web
03:17

BitTorrent is peer-to-peer file sharing. Using BitTorrent you can download legal, and illegal, digital goods. To use BitTorrent, you need a BitTorrent client. Once you have a BitTorrent client, you find a torrent file that you want to download, then download it through your client. To find a file you want to download, you can browse sites known as “torrent trackers”. Remember, though, if you break the law there are consequences.

BitTorrent
04:01
+
An Introduction to HTML
3 Lectures 19:38

We will build your first webpage at codepen.io. Eventually we will use an Integrated Development Environment (IDE) to build our webpages. The IDE we will use in this course is webstorm. I will also introduce you, however, to the IDE Atom in this course as Atom is very popular. When I introduce the IDEs later in the course, I will also discuss the differences between Webstorm and Atom and share with you why I chose Webstorm. You are also able to access the code in this course, and for this exercise, through github.

Your First Webpage
06:49

An HTML document is made up of a document type declaration (DTD) and different tags. The DTD is declared at the top of the page: <!DOCTYPE html> …. The different elements required for a basic HTML document: html, head, meta, title, body. We use MDN as our source for documentation to learn about the different elements.

Anatomy of an HTML Page
07:28

To be specific, when we talk about an element, we are talking about the html element which helps us build an html document. When we talk about a tag, we are talking about an element being used in the html document. A tag will have brackets around it. Many tags also have a closing tag. Some tags do not have a closing tag, and we call these tags “self-closing” tags. To build an html document, we will nest tags. To discuss the relationship between nested tags, we use terms like “parent / child / ancestor / descendant / sibling.” We call the tag at the top of the document the root tag or root element.

HTML Terminology
05:21
+
An Introduction to CSS
4 Lectures 16:26

In programming, separating concerns allows for a more stable and robust program. Separating concerns means to means to separate a program into distinct sections. In web programming, we use the concept of separating concerns to separate structure and formatting. HTML is responsible for structuring our document. CSS is responsible for formatting our document.

A Separation of Concerns
06:46

We use rule-sets in CSS to select html tags in our html document, and then apply fomatting rules to those selected tags. A CSS rule-set consists of a selector(s), a declaration block, and declarations. Each declaration consists of a property and value.

CSS Rule-sets
02:52

There are three ways you can link CSS to HTML. You can link an external CSS style sheet to your HTML. This is the preferred method to connect your CSS to your HTML. YOu can also link your CSS to your HTML using internal styles. To use internal styles, in between your head tags, you include an opening and closing style tag ( <style> </style> ). You then put your CSS rule-sets in between these style tags. The last way you can connect your CSS to your HTML is to place your CSS inline in the HTML tag. This method is strongly not recommended as it is not modular and it is hard to maintain.

Linking CSS to HTML
03:28

You can use many rule-sets in one style sheet. You can also use multiple selectors in one rule-set. The everything selector allows you to select all html tags in an html document.

Multiple CSS Selectors
03:20
+
Configuring Your Environment
5 Lectures 42:48

Choose one editor and get good at it. You don’t need to have all three of these editors, or even watch all three of the editor videos. Just choose one editor. That’s it. Just one. I use webstorm, and in the next video I will tell you why and show it to you. One thing to know: it takes awhile to get good with an IDE. I recently had the experience of driving my friend’s car. And I couldn’t figure out how to do things. I had to stop and spend time trying to find XM radio again. It’s the same way with an IDE. It takes you awhile to be able to drive it quickly and well.

Integrated Development Environments
08:48

Webstorm is an IDE created by JetBrains. I chose Webstorm because JetBrains also creates an Intellij, and Android Studio is built on top of Intellij. By knowing Webstorm, it’s easier to understand Android Studio. So if you want to build Android Apps somewhere down the line, then using Webstorm is a good choice. I also find Webstorm to provide all of the functionality that I need.

WebStorm
17:20

Atom.io is the new kid on the block. It is very compelling. It was created by github. The people at github know what they’re doing. It is now also open source, which means many talented people are helping it grow. There are also a lot of packages you can get for it.

Atom.io
09:08

While this video talks about Sublime as a “has-been,” the people who make Sublime have recently updated the editor making it a viable option today

Sublime
02:06

I just have to mention Dreamweaver because I don’t want you to fall in its evil embrace. Dreamweaver is like the drug dealer who gives crack cocaine to people, gets them hooked, then sucks all of the money out of them as their lives are destroyed. Dreamweaver will make you feel very good at first, but ultimately it will make you a pathetic and insecure coder who doesn’t understand anything.

Dreamweaver
05:26
+
Becoming Skilled with Github
9 Lectures 01:02:41

Github is like facebook but for code: it allows you to share your code with others. Just like you share moments of your life on Facebook, so too can you share moments from your coding on Github. Why would you want to do this? There are many reasons to use github, but here are three:

  1. it allows others to have insight into who you are as a coder

  2. it is Version Control Software (VCS) which allows you to collaborate easily with others

  3. it is a repository for storing your code online.

There are many ways to use github, but I strongly recommend you use github through the command line. We will learn how to use the command line, which is also known as the terminal, in the next video. For coders this axiom holds true: I use github therefore I am.

Github Overview
09:23

Don’t mess with Linus Torvald, that’s the moral of this story. Linus created the Linux operating system, the world’s largest open-source project (see youtube video: how linux was built). To create Linux, they needed to use version control software (VCS). This type of software helps you build software: it allows many different people to smoothly work on the same project. Well, for many years, they used Bitkeeper. Then, in 2005, Bitkeeper said they wanted to charge Linux. Linus told them to go pound sand and created Git. Git and github have now effectively put Bitkeeper out of business.

Git & Github - The Story
04:28

To get github to work well on a windows machine, there are two pieces of software which we must install: git and github desktop. As we will be using the terminal for Github, you will need a terminal emulator on your machine. Github desktop comes with a terminal emulator.

Configuring Windows for Github
11:44

  • Should already have git

    • Try and see

      • git --version

  • If it doesn’t work

    • Install git

    • Install github desktop

  • Description:

Github should work on Mac, Linux, and Posix machines. Follow the videos below. If you hit issues, try this: install git, then install github desktop.

Configuring Mac and Linux for Github
02:01

  • basic commands

    • pwd

    • cd

      • cd /

      • cd ../

    • ls

      • ls -la

    • clear

    • rm file-name

    • rm -rf dir-name

    • mkdir dir-name

    • cat

      • prints out contents of a file

  • Description:

There are a few basic commands which allow you to use the terminal CLI well.

Terminal Essentials
08:34

  • Create a folder

  • Add a .gitignore file

  • At the terminal

    • git init

    • git status

    • git add --all

    • git commit -m “first commit”

    • git log

  • Description:

To create a local git repository

Creating a “Master” Local Git Repository
12:43

  • Create a new repo

    • name it the same as the folder name of your local git repo

      • Not required, but logical

    • copy / paste instructions

      • navigate to the root of your local git repo

      • copy / paste the code given to you - one line at a time - into the terminal

        • Your code will look something like this:

git remote add origin git@github.com:GoesToEleven/webdog.git
git push -u origin master

  • master vs origin/master

    • The “master” branch

    • “origin/master” means “the master branch on the origin”, the source from which everyone is contributing

  • git push

  • Description:

We use github to create a remote github repository. There are many ways to do this. I am going to show you what I believe is the simplest, and best, method.

Creating an “Origin/Master” Remote Github Repository
06:05

  • Here are the basic github commands which you will use 98% of the time:

    • git status

    • git add --all

    • git commit -m “some concise descriptive message”

    • git push

  • Description:

As we code, we will want to “push” our code and store it remotely on github. This will keep track of all of the code we are writing. To do this, we follow a few simple commands: git status, git add --all, git commit -m “some message”, git push.

Using Github - Basic Commands
05:28

  • Delete locally

  • Delete remote origin on github

  • Description:

As we code, we will want to “push” our code and store it remotely on github. This will keep track of all of the code we are writing. To do this, we follow a few simple commands: git status, git add --all, git commit -m “some message”, git push.

Using Github - Deleting A Repo
02:15
+
HTML Essentials
13 Lectures 01:14:00
  • FIle Naming Conventions

  • Folder Naming Conventions

  • Opening a Project in Webstorm

  • Essential Tags

    • Heading elements

    • Paragraph element

    • Unordered list element

    • Ordered list

  • Emmet.io

  • Tag Attributes

    • Link element

    • Image element

    • Anchor element

    • Paragraph element

  • Relative vs Absolute URLs

  • Comments

  • Hands-On Exercises

  • Description

In this section, we will learn some of the essentials of working with HTML.

Section Overview
04:05

  • HTML File Naming Conventions

    • HTML pages should be saved with the .html extension

    • 90% of the time the home page of your site will be named index.html in order to be picked up by the browser as the default document.

    • Use alphanumerics only in page names. That is, a-z, 0-9. The only exceptions are: -(dash), _(underscore) and ~ (tilde).

    • Never use spaces in the file name of anything destined for the web, as spaces will be encoded by the server, producing long and ugly URLs. Replace spaces with hyphens.

    • Use lowercase exclusively when naming files, as some web servers are sensitive to case.

  • Description

It is important to know how to name your files. There are certain standard naming conventions which are used. You should always use lowercase alphanumeric characters to name files, eg, a-z, 0-9. You should never use spaces in your file names. The main page for any website should always be index.html.

FIle Naming Conventions
06:27

Folders help you organize your code. You will want to organize your code into logical groupings. You can think about this like you think about the separation of concerns. Just like we want to separate our structure from our formatting from our functionality - our HTML, our CSS, our JS - so too we could create folders to hold those separate files. When creating folder names, always use lowercase alphanumeric characters, and never use spaces.

Folder Naming Conventions
02:56

  • Opening a project in webstorm

    • Ignoring webstorm’s request to manage your git VCS commits and pushes

  • Description

Since we’ve already created a folder to hold our code and initialized it as a git repository, all we need to do now is open that folder in webstorm. When you start webstorm, choose “open” and then open that folder. If webstorm prompts you to manage all of your git commits and pushes, just close this dialogue box. I will show you how to use webstorm to do this at the end of the course. For now, however, I want you using the terminal to do all of your commits and pushing to github.

Opening A Project in Webstorm
03:59

  • Paragraph element

    • p

  • Heading elements

    • h1 - h6

  • Unordered list element

    • ###p
        /p###
      • ###p
      • /p###
    • Ordered list

      • ###p
          /p###
        1. ###p
        2. /p###
    • emmet

      • Sibling selector

        • +

      • Child selector

        • >

      • Multiplier

        • *

    • Description

    Using webstorm, we’ll create a new folder “005_essential-tags”. Inside this folder, we will create four new folders to hold each of the new tags we’re going to learn about: p, h1-h6, ul, ol, li. We will use emmet to quickly write this code for us. We will also use several webstorm shortcuts which can be referenced on webstorm’s keymap reference under help inside webstorm. Finally, we will commit and push all of our new code to github.
Essential Tags
10:39

  • emmet cheat sheet

    • Sibling selector

      • +

    • Child selector

      • >

    • Multiplier

      • *

    • Text

      • {text content here}

    • Numbering

      • $

    • HTML 5 document

      • !

  • Description:

Emmet can help us write code more quickly. The emmet cheat sheet provides us with examples we can use to quickly create different code.

Emmet.io
07:52

  • How to change webstorm formatting preferences

  • Description:

My teaching style: I’d rather give you too much than not enough; I’d rather you be able to skip a video than to be wishing there was a video. To that end, here is how you change the settings in webstorm to format html differently.

Modifying Webstorm Formatting
04:36

  • tags may have attributes

  • attributes have values

  • examples:

    • Link element

      • <link rel="stylesheet" href="main.css">

      • self-closing

    • Image element

      • <img src="puppy.jpeg" alt="a puppy with a stick">

      • self-closing

    • Anchor element

    • Paragraph element

      • <p class="happiness">I love puppies!</p>

  • Description

HTML tags can also have attributes. Some HTML tags require certain attributes to work. Attributes are additional pieces of information which the browser uses. Attributes help us provide additional functionality to our HTML tags.

Tag Attributes
09:07

Relative URLs
04:43

  • absolute

    • full URL

      • https://developer.mozilla.org/en-US/docs/Learn

    • from the root of a site, where is the resource

      • “If the path part of the URL starts with the "/" character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document.” (source: MDN)

      • /pic/anatomy-of-an-html-element.png

  • MDN documentation on relative and absolute URLs
Absolute URLs
06:11

  • HTML Comments

  • CSS Comments

  • Description

It is important to know how to add comments to code. Code with comments is better code. Comments allow you, and others, to understand what your code is doing. There is an art to writing code comments: you don’t want too many, nor too few.

Comments
03:39

  • Challenges

    • (1) Create two files: an html file and a css file. Name the files using standard naming conventions. Link the css file to the html file.

    • (2) Take the css file you created in the previous challenge and put that css file in a folder. Use standard naming conventions for the folder. Make sure the index.html file and the main.css file are still linked.

    • (3) Create this page. Use emmet to build your html structure.

    • (4) Create this page. Use emmet to build your ordered list and unordered list.

    • (5) Create this page which demonstrates the use of the image element and the anchor element. Have the anchor element launch a new browser tab.

    • (6) Add comments to the html document you created in the previous example.

    • (7) Identify which of these URLs are relative URL’s and which are absolute URLs:

Hands-On Exercises
03:12

  • Description

This video presents the solutions to the hands-on exercises.

Hands-On Exercises - Solutions
06:34
+
CSS Essentials
11 Lectures 01:19:35
  • This is what we will learn in this section

    • Section Overview

    • All HTML Tags & Attributes, All CSS Selectors & Properties

    • Border

    • Border Radius

    • Padding & Margin

    • Box Model

    • Box-Sizing: Border-Box

    • Review

    • Challenges

    • Solutions

  • Description

We’ve learned some great material so far, and we have more great material coming. In this section we are going to learn some of the CSS essentials. We’re going to learn how to add a border to elements, and then how to round that border with the border-radius property. We are also going to learn how to add spacing between different elements on a page with the padding and margin properties. After that, we are going to learn about the box model. The box model is a super important concept in web programming. Every element on a web page is a box. Those boxes then get stacked on top of each other. We’ll see how this all works, and then see how the box-sizing property helps us when creating our layouts. Finally, we’ll have some challenges to reinforce everything we’re learning, and then I will show you my solutions to those challenges. We’ve learned some great things so far. Let’s take a moment to appreciate this. Here is a high-level review of what we’ve covered so far.

Section Overview
08:23

These resources are super-valuable as they list all of the HTML tags & attributes, as well as all of the CSS selectors & properties. You will use these resources over and over as you create web pages. These resources will allow you to reference the many different tags, selectors, and properties you can use to build your web pages. This is a super-valuable resource.

All HTML Tags & Attributes, All CSS Selectors & Properties
07:52

  • border

  • Description

The border property is super fun. Now we’re going to apply the border to several different elements and explore what we can do with it.

border Property
09:16

  • border-radius

  • Description

The border-radius css property allows us to round the corners of different elements. The border-radius property can take a value which is measured in either pixels (px) or as a percentage (%). Pixels (px) and percentages (%) are units of measurement. We will learn more about units of measurement later in the course. Once the code is written in this example, we then commit and push the code to github.

border-radius Property
08:10

  • display: inline

  • display: block

  • display: inline-block

  • display: none

  • Description

The display property allows us to control how an element is displayed on a page. Elements have a default display property. Some elements are block level elements. Some elements are inline level elements. You can also use display: none to not display an element.

display Property
05:55

  • padding

  • border

  • margin

  • Description

The padding property adjust the amount of space between the content and the border. The margin property adjusts the amount of space between the border and other elements.

padding & margin Properties
07:12

  • everything on a web page is a square box

  • we stack and arrange those boxes on the page

  • the is a visual analogy:

  • all content is in a box

  • there is padding around the content

    • the space between the content and the border

  • there is a border around the content

  • there is a margin around the content/padding/border

    • this is the space between this box of content and other boxes of content

  • here’s the problem

    • if we’re arranging boxes on our page …

    • … and then we change the border or the padding …

    • … then the size of the box changed …

    • … and this results in other boxes shifting their location …

  • here’s the question

    • how can we change border and padding …

    • … and not have the size of the box change?

  • here’s the solution:

    • we use a special property:value …

    • box-sizing: border-box

  • box-sizing: border-box

    • mnemonic device: “box” is on the outside of “box-sizing: border-box”

    • now we can change padding and border …

    • … and the size of the box doesn’t change …

    • … thus the location of other boxes doesn’t shift.

  • Description

Each element on a web page is a box. Some elements have a default display property of “block level” and some elements have a default display property of “inline”. These boxes stack up on the page. Understanding this “box model”, and understanding that elements have a default display property of either “block level” or “inline”, is the first step in understanding layout. Additionally, each element holds “content” which is surrounded by “padding” which is surrounded by a “border” which is surrounded by a “margin”. You can see the “box model” layers of an element in Google Chrome’s developer tools under the “elements” tab.

Box Model
03:26

  • here’s the problem

    • if we’re arranging boxes on our page …

    • … and then we change the border or the padding …

    • … then the size of the box changed …

    • … and this results in other boxes shifting their location …

  • here’s the question

    • how can we change border and padding …

    • … and not have the size of the box change?

  • here’s the solution:

    • we use a special property:value …

    • box-sizing: border-box

  • box-sizing: border-box

    • mnemonic device: “box” is on the outside of “box-sizing: border-box”

    • now we can change padding and border …

    • … and the size of the box doesn’t change …

    • … thus the location of other boxes doesn’t shift.

  • Description

The CSS box-sizing property is important to helping us create layouts. When the width is set on an HTML element, the box-sizing property holds the width of that element to its setting even when the padding and border are changed on the element. When the “box-sizing: border-box” property and value are set on an element, we can increase the size of that element’s padding and border without changing the set width of that element. This helps us format elements without breaking our layout. If we didn’t have “box-sizing: border-box” set on elements, as we increased the padding and border, we would push other elements to the right which could disrupt our layout.

box-Sizing Property
05:23

  • All HTML Tags & Attributes, All CSS Selectors & Properties

  • border Property

    • border

  • border-radius Property

    • border-radius

  • display Property

    • display: inline

    • display: block

    • display: inline-block

    • display: none

  • padding & margin Properties

    • padding

    • border

    • margin

  • Box Model

  • box-sizing Property

    • box-sizing: border-box

  • DTD

  • All HTML tags we have learned so far

    • Html

    • Head

    • Body

    • Meta

    • Title

    • Paragraph

    • Heading

    • Unordered list

    • Ordered list

    • List item

    • Link

    • Image

    • Anchor

    • Paragraph

    • Div

  • All CSS properties we have learned so far

    • width

    • height

    • background-color

    • *

    • color

    • font-size

    • display

      • display: inline

      • display: block

      • display: inline-block

      • display: none

    • padding

    • border

    • margin

    • box-sizing: border-box

    • border-radius

    • background-image

      • background-image: url("../000_img/pup.jpg");

    • background-size

      • background-size: cover;

    • background-repeat

      • background-repeat: no-repeat;

  • General knowledge

    • http status codes

      • Developer tools / network

    • Developer tools

      • network tab / throttling

      • right-click / inspect

      • elements tab

        • all of the html

        • all of the css

          • including overridden rules

          • The box-model for each element

    • HTML Terminology

      • Opening tags

      • Closing tags

      • Self-closing tags

      • Nesting tags

      • Parent / child / ancestor / descendant / sibling

      • Tags vs elements

    • CSS Terminology

      • rule-set

        • selector

        • declaration block

          • declarations

            • property

            • Value

    • Separation of concerns

    • Linking CSS to HTML

      • External

      • Internal

      • Inline

    • Integrated Development Environments

      • WebStorm

      • Atom.io

      • Sublime

      • Dreamweaver

    • Github & VCS

      • “Master” Local Git Repository

      • “Origin/Master” Remote Github Repository

    • Using Github

      • Basic Commands

        • git status

        • git add --all

        • git commit -m “some concise descriptive message”

        • git push

      • Deleting A Repo

    • HTML & CSS Naming Conventions

      • Files

      • Folders  

    • Webstorm shortcuts

      • Keymap reference

    • Modifying Webstorm Formatting

    • Emmet

    • Tag Attributes

    • Relative URLs vs Absolute URLs

    • Comments

    • Box model

  • Description

Studies show that reviewing material, and gaining a high-level perspective on course material, significantly increases the speed at which students learn the material. We have learned many great things so far. All of the HTML tags we have learned up to this point are reviewed. Additionally, all of the CSS properties we have learned up to this point are also reviewed. A high-level overview of everything we’ve learned in this section is also presented. In addition, a high-level overview of everything we’ve learned in this course is presented.

Review
10:28

  • (1) Place a div on a page. Format the div to have a width, height, and background color.

  • (2) Take the code from “Hands-On Exercise (1)” and round the corners of the div.

  • (3) Take the code from “Hands-On Exercise (2)” and give the div a grooved border which is 20px.

  • (4) Create a new HTML document. Place two divs on the HTML document.

    • Format both divs with the following declarations:

      • width: 400px;

      • height: 200px;

      • border: 10px dashed red;

      • margin: 20px auto;

        • TRBL

        • TB   RL

        • T   R   B   L

    • Also format the second div with this declaration:

      • box-sizing: border-box;

  • (5) Take the code from “Hands-On Exercise (3)” and give the div a background image by using the following CSS declarations:

    • background-image: url("path/to/some/image.png");

    • background-size: cover;

    • background-repeat: no-repeat;

  • Description

Hands-on exercises help reinforce what you are learning. Complete these exercises, then watch the solutions in the next video.

Hands-On Exercises
04:00

  • Description

Here are the solutions to the hands-on exercises. These solutions are live-coded in webstorm. The solutions will show you how to solve the exercises. There is one adjustment to the exercises which is covered in the video. On the fourth exercise, the border is changed to 10px.

Hands-On Exercises - Solutions
09:30
+
CSS Selectors
17 Lectures 01:41:02
  • CSS Resets

  • Selectors:

    • element

    • class

    • id

    • attribute

    • pseudo-class

      • link

      • visited

      • hover

      • active

      • focus

      • nth child

      • first-child

      • last-child

      • nth-child(even)

      • nth-child(odd)

      • nth-child(n)

      • nth-last-child(n)

      • nth-child(an+b)

      • only-child

      • first-letter

      • first-line

    • nested selectors

      • div p

      • div > p

      • div ~ p

      • div + p

  • Hands-On Exercise - The Surfer Page

  • Description

CSS selectors allow us to target elements on an HTML page for formatting. Knowing how to use CSS selectors is essential to being able to write effective CSS. This section will focus on many of the different selectors we can use. In addition, we will learn about CSS resets. At the end of  this section, we will complete a hands-on exercise to build “The Surfer Page”.”

Section Overview
03:37

By default, browsers add styling to elements on a web page. We can see this with the heading tags. To complicate issues even further, different browsers style different elements in different ways. A “css reset” allows us to create a uniform starting point from which we can then style our pages. You can think of a “css reset” “zero’ing out” all default browser styling. There are different css resets that you can use. The best practice is to create your own reset. Understand ALL of your code. Have nothing in your code which is extraneous.

CSS Resets
07:35

  • element

  • .class

  • #id

  • Description

To apply formatting to html elements on an html page, we use CSS. Formatting with CSS entails creating rule-sets. Each rule set begins with a selector. The selector will select which element, or elements, on the html page will be formatted by the declarations which follow. Some of the selectors we may use to select elements on an HTML page include element selectors, class selectors, and id selectors. An id selector can only be applied to one element on an HTML page.

CSS Selectors: element, class, id
08:11

  • [contenteditable]

  • [src]

  • [href]

  • Description

CSS attribute selectors allow us to select an element on an HTML page based upon an element’s attributes.

Selectors: attribute
05:02

  • CSS pseudo-classes that provide interactivity - LVHA order:

    • :link

      • default color for a link

    • :visited

      • clicked a link previously

    • :hover

      • hover over element

    • :active

      • click a link or element that is active

    • :focus

      • an element that can receive focus (an element in a form)

  • Description

A CSS pseudo-class is another way we can select elements on an HTML page. A pseudo-class is called a pseudo-class because it is like a class selector - it is able to select multiple elements on a single HTML page. A pseudo-class allows us to add interactivity and visual confirmation to our webpage.

The :link CSS pseudo-class lets you select links. This will select any link which has not yet been visited, even those already styled using a selector with other link-related pseudo-classes like :hover, :active or :visited. In order to appropriately style links, you need to put the :link rule before the other ones.

The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones.

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one.

The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. When interacting with a mouse, this is typically the time between the user presses the mouse button and releases it. The :active pseudo-class is also typically matched when using the keyboard tab key. It is frequently used on <a> and <button> HTML elements, but may not be limited to just those.

Selectors: pseudo-classes
07:03

  • CSS properties

    • :focus

  • Description

The :focus CSS pseudo-class is applied when an element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

Selectors: pseudo-class :focus
06:48

  • CSS properties

    • first-child

    • last-child

    • nth-child(even)

    • nth-child(odd)

  • Zebra-striping

  • Description

We can use a CSS pseudo-class to also target a certain element on a page based upon its position on the page. For instance, if we want to select the first item, or the last item, or some specific number in a list of items we can do so by using the CSS nth child pseudo-class. There are several different CSS properties related to the nth child.

Selectors: pseudo-class nth child - part I
05:53

  • CSS properties

    • nth-child(n)

    • nth-last-child(n)

    • nth-child(an+b)

    • only-child

  • Zebra-striping

  • Description

We can use a CSS pseudo-class to also target a certain element on a page based upon its position on the page. For instance, if we want to select the first item, or the last item, or some specific number in a list of items we can do so by using the CSS nth child pseudo-class. There are several different CSS properties related to the nth child.

Selectors: pseudo-class nth child - part II
06:28

  • CSS properties

    • first-letter

    • first-line

  • Description

Two of my favorite CSS properties are the first-letter and first-line properties. With these two properties, we can achieve very nice typography effects.

Selectors: pseudo-class typography
04:04

  • div p

    • All p tags beneath a div

  • div > p

    • All p tags immediately beneath a div

  • div ~ p

    • All p tags that are a sibling following a div

  • div + p

    • All p tags that are an immediate sibling following a div

  • Description

We can further refine which elements we target on an HTML page by using CSS nested CSS selectors.

Selectors: nested selectors
07:56

  • margin: 0 auto;

  • The display property

  • debugging with border: 2px solid hotpink;

  • Description

Before moving onto the next “hands-on exercise,” it will help you to understand a little bit about one debugging technique: setting a border around all of the elements on an html page. By seeing how much space an element occupies on an html page, you can visually determine if the element is acting like a “block level” element or an “inline” element or an “inline-block” element. In order to center an element across a space, we will need that element to be taking up the entire space. This will be demonstrated with the image element which is an inline element. By changing this element to a “block level” element, we will be able to use “margin: 0 auto” to center the image.

margin: 0 auto & The Display Property
05:54

  • Challenge

    • Create this page. Make sure you use a stylesheet to format your headings. Include a css reset stylesheet. Link your stylesheets to your html document. Push your code to github.

  • Description

Hands-on exercises are designed to help you learn the material. For the vast majority of people, the best way to learn a certain subject matter is by actually applying what they are learning.

Hands-On Exercise - The Surfer Page
01:58

  • Solution to “The Surfer Page” hands-on exercise.

  • Description:

To build this solution, we first have to build our html.

Hands-On Exercise - The Surfer Page - Solution
08:07

  • (1) Create an html page with an ordered list of 20 list items. Use an ID to select the third list item. Style the third list item red.

  • (2) Create an html page with an ordered list of 20 list items. Use a class to select the third, fourth, and fifth list item. Style these items red.

  • (3) Create an html page with 2 anchor tags providing links to different websites. Give one of the anchor tags the target attribute. Use an attribute selector to select the anchor tag with the target attribute. Style this selected anchor tag to have a border around it.

  • (4) Create an html page with 1 anchor tag. Provide styling for this anchor tag including different colors for these css pseudo-class properties: link, visited, hover, active.

  • (5) Create a paragraph of text. Style the first letter of that paragraph and the first line to be different from the rest of the paragraph.

  • (6) Use this emmet to create this html within an html page’s body tag ...    p{$}+div>p{$$}*3+article>p>lorem^^^p{$$$}*3    … and then, once the html is created, do the following: select all p tags that are children of a div and make them red.

  • (7) Use this emmet to create this html within an html page’s body tag ...    p{$}+div>p{$$}*3+article>p>lorem^^^p{$$$}*3    … and then, once the html is created, do the following: select all p tags that are immediate children of a div and make them red.

  • (8) Use this emmet to create this html within an html page’s body tag ...    p{$}+div>p{$$}*3+article>p>lorem^^^p{$$$}*3    … and then, once the html is created, do the following: select all p tags that are siblings following a div and make them red.

(9) Use this emmet to create this html within an html page’s body tag ...    p{$}+div>p{$$}*3+article>p>lorem^^^p{$$$}*3    … and then, once the html is created, do the following: select all p tags that are an immediate sibling following a div and make it red.

Hands-On Exercises
01:13

  • Description

Here are the solutions to the hands-on exercises 1 - 5. These solutions are live-coded in webstorm. The solutions will show you how to solve the exercises.

Hands-On Exercises - Solutions I
06:31

  • div p

    • All p tags beneath a div

  • div > p

    • All p tags immediately beneath a div

  • div ~ p

    • All p tags that are a sibling following a div

  • div + p

    • All p tags that are an immediate sibling following a div

  • Description

Here are the solutions to the hands-on exercises 6 - 9. These solutions are live-coded in webstorm. The solutions will show you how to solve the exercises.

Hands-On Exercises - Solutions II
05:47

  • CSS resets

  • CSS selectors

    • CSS rule sets

  • CSS Selectors:

    • element

    • class

    • id

    • attribute

    • pseudo-class

      • link

      • visited

      • hover

      • active

      • focus

      • nth child

      • first-child

      • last-child

      • nth-child(even)

      • nth-child(odd)

      • nth-child(n)

      • nth-last-child(n)

      • nth-child(an+b)

      • only-child

      • first-letter

      • first-line

    • nested selectors

      • div p

      • div > p

      • div ~ p

      • div + p

  • margin: 0 auto & display

  • The Surfer Page

  • All HTML tags we have learned so far

    • Html

    • Head

    • Body

    • Meta

    • Title

    • Paragraph

    • Heading

    • Unordered list

    • Ordered list

    • List item

    • Link

    • Image

    • Anchor

    • Paragraph

    • Div

  • All CSS properties we have learned so far

    • width

    • height

    • background-color

    • color

    • font-size

    • display

      • display: inline

      • display: block

      • display: inline-block

      • display: none

    • padding

    • border

    • margin

      • margin: 20px auto;

      • margin: 0 auto;

        • TRBL

        • TB   RL

        • T   R   B   L

    • box-sizing: border-box

    • border-radius

    • background-image

      • background-image: url("../000_img/pup.jpg");

    • background-size

      • background-size: cover;

    • background-repeat

      • background-repeat: no-repeat;

    • text-align

      • text-align: center;

    • cursor

      • cursor: pointer;

  • All CSS selectors we have learned so far

    • element

    • class

    • id

    • *

    • attribute

    • link  

    • visited

    • hover

    • active

    • focus

    • first-letter

    • first-line

    • div p

      • All p tags beneath a div

    • div > p

      • All p tags immediately beneath a div

    • div ~ p

      • All p tags that are a sibling following a div

    • div + p

All p tags that are an immediate sibling following a div

Review
08:55
+
CSS Order & Specificity
8 Lectures 34:04
  • When more than one CSS rule-set is applied to the same element, what determines which declarations will be applied?

    • CSS specificity and order determine which declarations are applied

      • CSS specificity

        • inline style

        • id

        • class, attribute, pseudo-class

        • element, pseudo-element

      • order

        • when specificity is equal, last declaration wins

  • Applying multiple classes to the same element

  • 9 challenges

  • Hands-on exercises
Section Overview
03:13

  • Different browsers, different rendering engines

    • Webkit

      • Safari  

      • Blink

        • Chrome

        • Opera

        • Amazon Silk

    • Gecko

      • Firefox

    • Trident

      • Internet Explorer

    • EdgeHTML

      • Microsoft Edge

  • As a developer …

    • Order matters

    • Specificity matters

      • Keep selectors as simple as possible

      • Prefix selectors

        • Provides scope to your page

  • CSS is applied top to bottom

  • If multiple rule-sets target the same element

    • CSS specificity and order determine which declarations are applied

      • CSS specificity

        • inline style

        • id

        • class, attribute, pseudo-class

        • element, pseudo-element

      • order

        • when specificity is equal, last declaration wins

  • When selectors have an unequal specificity value ...

… the more specific rule is the one that counts.

  • When selectors have an equal specificity value …

… the last declaration is the one that wins.

  • The universal selector ( * ) has a specificity of 0, 0, 0, 0.

  • Description

As you add more CSS rule-sets to format an html page, and as your CSS files become larger, you might start having conflicts between different CSS selectors. In the event of two CSS selectors targeting the same element and conflicting, there CSS specificity rules which are followed to determine which CSS rule-set should be applied.

The Browser’s Application of CSS
09:14

  • Description

A challenge which demonstrates the calculation of CSS specificity.

Challenge & Solution #1
03:17

  • Description

A challenge which demonstrates the calculation of CSS specificity.

Challenge & Solution #2, 3, 4
04:05

Challenge & Solution #5, 6
05:31

  • (1) Write some CSS that has two rules applying to the same element. The first rule should use a class and the second rule should use an ID. Calculate the CSS specificity of each rule to explain which rule won.

  • (2) Write some CSS that has two rules applying to the same element. The first rule should use an element selector and the second rule should use an ID. Calculate the CSS specificity of each rule to explain which rule won.

  • (3) Write some CSS that has two rules applying to the same element. The first rule should use an element selector and the second rule should use a class. Calculate the CSS specificity of each rule to explain which rule won.

  • (4) Write some CSS that has two rules applying to the same element. The first rule should use an element selector and the second rule should use an attribute. Calculate the CSS specificity of each rule to explain which rule won.

(5) Write some CSS that has two rules applying to the same element. The first rule should use an class selector and the second rule should use an attribute. Calculate the CSS specificity of each rule. Explain which rule won and why.

Hands-On Exercise
00:56

  • Description

Here are the solutions to the hands-on exercises. These solutions are live-coded in webstorm. The solutions will show you how to solve the exercises.

Hands-On Exercises - Solutions
02:46

  • When more than one CSS rule-set is applied to the same element, what determines which element will be applied?

    • CSS Specificity

      • inline style

      • id

      • class, attribute, pseudo-class

      • element, pseudo-element

    • Order: last declaration wins

  • All HTML tags we have learned so far

    • Html

    • Head

    • Body

    • Meta

    • Title

    • Paragraph

    • Heading

    • Unordered list

    • Ordered list

    • List item

    • Link

    • Image

    • Anchor

    • Paragraph

    • Div

  • HTML tag attributes

    • Applying two classes to the same element

      • class=”authorize emphasize”

  • All CSS properties we have learned so far

    • width

    • height

    • background-color

    • color

    • font-size

    • display

      • display: inline

      • display: block

      • display: inline-block

      • display: none

    • padding

    • border

    • margin

      • margin: 20px auto;

      • margin: 0 auto;

        • TRBL

        • TB   RL

        • T   R   B   L

    • box-sizing: border-box

    • border-radius

    • background-image

      • background-image: url("../000_img/pup.jpg");

    • background-size

      • background-size: cover;

    • background-repeat

      • background-repeat: no-repeat;

    • text-align

      • text-align: center;

    • cursor

      • cursor: pointer;

    • font-style

      • font-style: italic;

  • All CSS selectors we have learned so far

    • general

      • element

      • class

      • id

      • *

      • attribute

    • link

      • link  

      • visited

      • hover

      • active

    • form

      • focus

    • text

      • first-letter

      • first-line

    • nested

      • div p

        • All p tags beneath a div

      • div > p

        • All p tags immediately beneath a div

    • following siblings

      • div ~ p

        • All p tags that are a sibling following a div

      • div + p

        • All p tags that are an immediate sibling following a div

    • compound

      • examples:

        • ul#summer-drinks li

        • ul#summer-drinks li.favorite

        • html body ul#summer-drinks li.favorite
Review
05:02
22 More Sections
About the Instructor
Todd McLeod
4.5 Average rating
11,392 Reviews
130,414 Students
11 Courses
Faculty in Computer Science and Computer Information Tech

I am passionate about helping others learn and improve their lives. The courses offered under my account are courses taught by myself, along with courses I helped friends create. As for my credentials, I am tenured faculty in Computer Information Technology at Fresno City College. I have also served as adjunct faculty in Computer Science at California State University, Fresno. I began programming in 1996. I began teaching programming in 2001. My area of expertise is web programming, the Go programming language, and online education. I have taught over 560,000 students online how to build websites and use the Go programming language. Follow me on Twitter to stay current @Todd_McLeod