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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

instructions to get git running on your machine:

1. install git

   1. https://git-scm.com/downloads

2. setup github

   1. https://docs.github.com/en/get-started/quickstart/set-up-git

instructions to get git running on your machine:

1. install git

   1. https://git-scm.com/downloads

2. setup github

   1. https://docs.github.com/en/get-started/quickstart/set-up-git

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

• 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

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

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

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

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

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

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.

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

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

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

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

• tags may have attributes

• attributes have values

• MDN - Getting Started > HTML Basics

• 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

• <a href=”www.google.com” target=”_blank”>go to google</a>

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

• relative

• within one domain / website: relative to one resource, where is the other resource

• examples:

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

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

• MDN documentation on relative and absolute URLs

• 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

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

• 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 the pages SHOWN IN THE VIDEO

  • (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:

    • www.google.com

    • ../pic/dog.jpg

    • /pic/dog.jpg

    • chapter07/index.html

• Description

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

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

• All HTML tags

• all HTML elements

• all HTML attributes

• All CSS selectors

• all CSS selectors

• All CSS properties

• all CSS properties

• Description

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.

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

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

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

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

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

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

• (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.

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

• 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”.”

• meyer css reset (oldest)

• normalize.css (newer)

• Mcleod-reset.css (best)

• Description

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.

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

• [contenteditable]

• [src]

• [href]

• Description

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

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

• 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).

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

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

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

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

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

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

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

• Description:

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

• (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.

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

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

• 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