Code Academy (HTML)




Quick Links

(Students: Prior to Lesson 1, you have completed the Hour of Code Project. Each lesson is composed of four parts, a Presentation, a Code-Academy Course, a Handout, and a Quiz – you must do all of them to pass the unit and level up).

Introduction / General Information

HTML Resources

HTML is just like learning another language. In order to help you learn your new language, we have found and created some Vocabulary Resources for you. Periodically, we will have a vocabulary quiz to determine how much you know about HTML. The links below will help you study for your vocabulary quizzes and tests. Please review this vocabulary guide often! It pays to study the language everyday.

As a part of this course, it will be important that you have access to an offline HTML Editor and a modern web-browser (that supports HTML 5). I recommend that you us one of the code editors below and either Google Chrome or Firefox.

Grading Policies

The coding course is composed of 3 Units: HTML, CSS, and Java. You will be graded on all of the quizzes and CodeAcademy Courses that you complete. In order to get an A in the course, you must complete 95% of all assignments. Each of the 12 HTML Lessons will be worth 20 points. For Unit 1, you can earn 240points. If you earn 300points in Unit 1, you will earn an additional Level (i.e. an A+).

Week 1: HTML Basics

The first week of this course will introduce students to materials and resources inherent to HTML. We will explore the syntax and structure of the HTML Language, and how that compares to other spoken Languages. Each student will be required to have an account on CodeAcademy in order to get started. Once you have your CodeAcademy login, feel free to start with the lessons below.

Lesson 1: Introduction to HTML

In the Hour of Code Project, you all learned the basics of Coding. It will take you a lot of practice before you are able to create a similar program from scratch. Lesson 1 begins with simply logging into the basic coding program of CodeAcademy. For this lesson, you will need to create a CodeAcademy Account, which you can learn to do here. This first lesson is worth 20 points. In order to get full credit, you must show completion of: the Lesson (screenshot), the Practice (screenshot), and the Quiz (screenshot).


1.Presentation2.Handout3.Lesson4.Practice5.Quiz




1.1 HTML Basics I.pdf


Every time you start a lesson, it is important that you use all of the tools on the left to help you. The tools are designed to support you advancing through this CodeAcademy Course. You are on your way! Buckle down and keep up the good work!


If you want to really learn this language, or any language, you need to practice everyday. If you keep up your practice, you will eventually be an amazing programmer. To keep up your practice, you should complete the extra practice set.

The Practice Content is another CA Course which you can find by clicking on this text.


Do you think you are ready? Can you prove to the entire world that you understand the basics of HTML? This is your chance! The quiz is only 15 questions – all multiple choice. Do your best!

You can take the quiz, when you are ready, by clicking on this link.


Lesson 2: Learning to use HTML

Well, that wasn’t too bad! You made it through the introductory material in a snap. The second lesson will begin adding additional functionality into HTML with basic styles. In order to move on, you need to communicate with your teacher to get the password and demonstrate that you completed the first lesson. Here is how you can get the password: Take a picture of your Quiz Grade and email it to Mr.Fitzjarrald. When I receive it, I will send you the passcode to unlock the next lesson below. If you need a refresher on the previous lesson, click the links above.This first lesson is worth 20 points. In order to get full credit, you must show completion of: the Lesson (screenshot), the Practice (screenshot), and the Quiz (screenshot).




1.Presentation2.Handout3.Lesson4.Practice5.Quiz


1.2 Project – Build Your Own Webpage.pdf


Every time you start a lesson, it is important that you use all of the tools on the left to help you. The tools are designed to support you advancing through this CodeAcademy Course. You are on your way! Buckle down and keep up the good work!


If you want to really learn this language, or any language, you need to practice everyday. If you keep up your practice, you will eventually be an amazing programmer. To keep up your practice, you should complete the extra practice set.

The Practice Content is another CA Course which you can find by clicking on this text.


Do you think you are ready? Can you prove to the entire world that you understand the basics of HTML? This is your chance! The quiz is only 15 questions – all multiple choice. Do your best!

You can take the quiz, when you are ready, by clicking on this link.

Week 2: HTML, Email, and the Internet

Now that we have some basic understanding of how HTML is coded, we will begin to use and understand how HTML forms the backbone of the Internet. Students will study how servers interact with one another to send email, and how that is fundamentally different than the basic structure of HTML. We will also explore the basic history of the Internet and how it has grown over the past 50 years.




Lesson 3: HTML and Email

Welcome to Week 2! You are definitely on your way to becoming a web-programmer. At the end of lesson 12 (or six weeks of class) you will be able to create your own website – and that is when things will get interesting. Look at it this way, after this lesson, you are 1/4 of the way done with the HTML Unit! If you need a refresher on the previous lesson, click the links above. This lesson is worth 20 points. In order to get full credit, you must show completion of: the Lesson (screenshot), the Practice (screenshot), and the Quiz (screenshot). In order to receive credit, your screenshots must include your Username!


1.Presentation2.Handout3.Lesson4.Practice5.Quiz


2.1. HTML Basics II


Every time you start a lesson, it is important that you use all of the tools on the left to help you. The tools are designed to support you advancing through this CodeAcademy Course. You are on your way! Buckle down and keep up the good work!


If you want to really learn this language, or any language, you need to practice everyday. If you keep up your practice, you will eventually be an amazing programmer. To keep up your practice, you should complete the extra practice set.

The Practice Content is another CA Course which you can find by clicking on this text.


Do you think you are ready? Can you prove to the entire world that you understand the basics of HTML? This is your chance! The quiz is only 15 questions – all multiple choice. Do your best!

You can take the quiz, when you are ready, by clicking on this link.


Lesson 4: History and Future of the Web

So, lets summarize: You known the Basics of HTML, some styles, how the internet works, and just recently, you learned about Email. We are playing in the land of pixels and bits, and you are manipulating websites. In our increasingly digital world, it is more and more important that we can access and manipulate information from websites – like this one. Again, this lesson is worth 20pts, you must submit screenshots (with your username), and is due at the end of the week.


1.Presentation2.Handout3.Lesson4.Practice5.Quiz


2.2 Project – Social Networking Profile


Every time you start a lesson, it is important that you use all of the tools on the left to help you. The tools are designed to support you advancing through this CodeAcademy Course. You are on your way! Buckle down and keep up the good work!


If you want to really learn this language, or any language, you need to practice everyday. If you keep up your practice, you will eventually be an amazing programmer. To keep up your practice, you should complete the extra practice set.

The Practice Content is another CA Course which you can find by clicking on this text.


Do you think you are ready? Can you prove to the entire world that you understand the basics of HTML? This is your chance! The quiz is only 15 questions – all multiple choice. Do your best!

You can take the quiz, when you are ready, by clicking on this link.

Week 3: Forms and SEO

Your first challenge awaits! This week will be the first time you must demonstrate your ability to us. We will begin a coding project, and you must use Sublime Text to create your own HTML Page. This is supposed to be a challenge. Initially, this is designed to be a single person challenge – call it a test. When you complete the test, send the source files for your challenge to the instructor. This week we will learn some of the advanced features of HTML in the form of Forms and SEO. Enter the password to get access to the weekly Lessons and Challenge.



Challenge 1: Your own Webpage

For this challenge, you must download and install the Sublime Text editor. Once you have it installed, you will be adding the following items to your webpage.

  1. One ordered list of more than 3 items
  2. One unordered list of more than 3 items
  3. At least three different fonts
  4. At least two images
  5. A background and at least three colors
  6. Bold and italicized words
  7. At least four headers
  8. A CSS Stylesheet
  9. A Form with at least 5 Elements

This project will be about you. I want you to tell me where you come from, add pictures of yourself, and include a comment form. Once you have completed the project, email me the source code to complete the project. The entire page will be worth 20pts. You can find the complete rubric here. This project is due on Friday of Week 4.


Lesson 5: HTML and Forms

Welcome to Week 3! Keep going! You have completed a number of activities and have completed your own social networking page and mock website. We are going to start ramping up the amount of work required this week, and you will be expected to engage in the lessons and progress through all of the material by the end of the week (we are essentially doubling the weekly expectation for work). This lesson is worth 20 points. In order to get full credit, you must show completion of: the Lesson (screenshot), the Practice (screenshot), and the Quiz (screenshot). In order to receive credit, your screenshots must include your Username! Feel free to work in groups. If you copy and paste code from your peers, you will not learn how to program and you will fail our coding challenges in the coming weeks.

You will also notice another tab called Resources. In that tab, you will find materials, resources, and coding examples to help you complete the work that is required.


1.Presentation2.Handout3.Lesson4.Practice5.QuizResources


3.1. HTML Basics III


Every time you start a lesson, it is important that you use all of the tools on the left to help you. The tools are designed to support you advancing through this CodeAcademy Course. You are on your way! Buckle down and keep up the good work!


If you want to really learn this language, or any language, you need to practice everyday. If you keep up your practice, you will eventually be an amazing programmer. To keep up your practice, you should complete the extra practice set.

The Practice Content is another CA Course which you can find by clicking on this text.


Do you think you are ready? Can you prove to the entire world that you understand the basics of HTML? This is your chance! The quiz is only 15 questions – all multiple choice. Do your best!

You can take the quiz, when you are ready, by clicking on this link.

This first video is the introduction to creating HTML Forms. It is only 10 minutes long, and is a great resource if you are struggling with using HTML to create forms. The host goes into great detail about how to accurately use Inputs and Input Functions.

This second video goes into considerably more detail about how to create more compact forms and grouping them so that you can create a more readable document. Focusing primarily on Text-Areas, and how to define them, and the use of Selects.

The third video is the last in the installment on Forms. Rounding out the set, this video focuses on Field sets and labels for your form fields.


Lesson 6: Search Engine Optimization (SEO)

Here we go. Off to the races. This lesson is all about how Search Engines (Google, Yahoo, Naver, etc.) work to index the websites that you create. First and foremost, we must understand what allows your website to be searched, and how that will effect your Search Engine Results. This lesson is worth 20 points. In order to get full credit, you must show completion of: the Lesson (screenshot), the Practice (screenshot), and the Quiz (screenshot). In order to receive credit, your screenshots must include your Username! Feel free to work in groups. If you copy and paste code from your peers, you will not learn how to program and you will fail our coding challenges in the coming weeks.

You will also notice another tab called Resources. In that tab, you will find materials, resources, and coding examples to help you complete the work that is required.


1.Presentation2.Handout3.Lesson4.Practice5.QuizResources


3.2. Project – Clickable Photo Page


Every time you start a lesson, it is important that you use all of the tools on the left to help you. The tools are designed to support you advancing through this CodeAcademy Course. You are on your way! Buckle down and keep up the good work!


If you want to really learn this language, or any language, you need to practice everyday. If you keep up your practice, you will eventually be an amazing programmer. To keep up your practice, you should complete the extra practice set.

The Practice Content is another CA Course which you can find by clicking on this text.


Do you think you are ready? Can you prove to the entire world that you understand the basics of HTML? This is your chance! The quiz is only 15 questions – all multiple choice. Do your best!

You can take the quiz, when you are ready, by clicking on this link.

Just one reference video this time around. SEO is a huge business right now. For most businesses, if you can be in the top 5 Search results in Google, you will see a 1000% increase in sales and visits. Knowing how to make your website very searchable will pay in the long run.