1.1 - HTML Basics

Activity 1

1.1 - Activity 1 - Hello Coding World!

Programming involves writing "code". Coding is writing a special "language" that computers can understand. Throughout the Fundamentals of Web Design course, you will be learning three programming languages: HTML, CSS, and a even a little bit of JavaScript. The first language you will learn is the basis of all of the web: HTML.

HTML is the programming language used to compose HTML documents
HTML documents are a technical term for what makes up web pages. Every web page is a downloaded HTML document that is displayed in your browser.
If you learn the correct symbols and commands to use, then you can compose HTML documents, and turn your website dreams into website realities!

View Activity 1 Slides

Activity 2

1.1 - Activity 2 - More Typography

We've learned how to <h1>make text bigger</h1> using h1. We'll now learn the "p-tag", and the other "cousins" of h1 (h2 through h6).

<p> P Tag - You may have already noticed that hitting "enter" or "return" in HTML does not seem to do anything, or create new paragraphs or lines. That's because HTML ignores "whitespace", the term used for enter, spaces, and such. The solution is the P Tag.
<h1> through <h6> - Header 1 isn't the only header. There is also Headers 1-6 (but none others!). They let us specify different sizes of text, to signifiy different sections, subsections, subsubsections, etc. H1 is the biggest, H6 the smallest.

View Activity 2 Slides

Activity 3

1.1 - Activity 3 - Style Tag

While we can produce some simple content, our HTML is very boring to look at. We'll now learn the CSS programming language, which is the coding language that we use to specify the style and appearance of our HTML.

CSS - CSS, an acronym for the older term Cascading Style Sheets, is another coding language which allows creation of designs, specifications of colors and sizes, and much more. Without CSS, HTML is mostly black-and-white and has no interesting layout or appearance. With CSS, HTML gets displayed with style and color.
<style> </style> Style tag - Text inside of style tags does not display, but instead is interpreted as the CSS coding language. This will "transform"
p { ... } CSS Rule - All CSS is in the format of "Rules"
p { color: green; } CSS color property - One CSS "property" you can adjust is color, which controls the color of the text
What colors are there? There are many, many colors! Mozilla's MDN documentation has a list here.

View Activity 3 Slides

Activity 4

1.1 - Activity 4 - Body & Background

We'll now learn the CSS properties for changing background colors, and the use of the "body" selector to change the background or text color of the entire page at once.

background: green background property - Change color of background
body { ... } body selector - If you want to change an aspect of the page, use "body"

View Activity 4 Slides