One Month HTML: Learn to Code For Free

Code along with me! I'll introduce you to some basic HTML and CSS concepts. And I'll kiss my arm.

Let's add some colors to our project

CSS

1. Adds styles to our page

2. Examples of styles include: background color, fonts, borders, margins, and many more

3. CSS stands for: Cascading Style Sheets

Whats the difference between h1 and h2 tags? When do we use p tags? In this lesson you will learn some of the most important HTML elements.

Images are beautiful. Let's bring some into our website!

Let's start building our portfolio site

Feeling overwhelmed when you start building a website from scratch? Try to use a template. And start with the HTML (text, and images) first. Let me show you how I do it!

In 1965, Ted Nelson coined the term hyperlink. That's almost 30 years before Tim Berners Lee invented HTML and the World Wide Web. I'm a New Media geek, ask me questions if you'd like to hear more about where the web came from!

In this lesson you will learn how to add images to you're HTML project using the <img> (image) tag. The image tag does not have a closing tag. When we add an image with HTML we add the "src" (source) attribute to tell the website where the image is located. And than we add the "alt" (alternative text) attribute to describe the image.

HTML Image

<img src="cat-image.jpg" alt="Cat Image">

The "src" (source) attribute tells you're code where the image is located.

While the "alt" (alternative text) attribute is used to describe the image.

We want to separate each coding language into its own file. That will help keep us organized.

Let's add in some glorious color.

1. Each color has a different hexadecimal number

a {

color: #BFE35B;

text-decoration: none;

}

...

2. Understand the Photoshop eyedropper

Lets you pick from "millions of colors", and gives you the corresponding hexidecimal code

3. Understand the Digital Color Meter (mac only)

Padding, border-radius, text-decoration, and adding images with CSS

Make an HTML portfolio site for yourself! For your homework you will add a new background image (using CSS), embed a video from YouTube, choose your own color palette, and more.

Complete the following tasks

Please make sure you do each of the following in your final project

1. Choose a new background image

2. Change the title and copy

3. Use your own color palette

4. Include a video embed from YouTube

5. Include a link "Made @ One Month"

1. Download Cyberduck

2. Connect to your web host

1. Select FTP

2. Nickname: Whatever you'd like to call it. This is only for you, and won't affect connection.

3. Server: Add your domain/URL (you get this from Hostgator)

4. Username: Your username (you get this from Hostgator when you sign up)

5. Password? You'll add this immediately afterwards when you try to connect

3. Upload your files

You can download my Bowie Unicorn example if you'd like. Or, if you feel confident you can upload any of your own files (.html, .css, .jpg, .png, etc).