Computer Programming: Website Design HTML & CSS

Listen to Lectures, Practice in Real Coding Environment

Learn to Add Stylesheets

Step-by-Step Concepts - Hints Included!

Understand How It Works - See What You Create!

Interested in Enrolling?


Website Design Coding Fundamentals Course Description

Updated 8/2018

Melamed Academy provides a completely secure and sheltered environment for students to learn and master valuable technology skills. Students are provided with a coding environment, and private websites in which to practice, do their homework exercises, and test their codes. This entire course experience takes place without ever needing to see the general internet. Additionally, all of the students’ work, applications, and website projects remain shielded from viewers on the general internet.

HTML is the underpinning of the entire internet. Every page out there is written in HTML. It tells the browser about the content in the page, and CSS tells the browser how to style it.
In this course, students learn the building blocks of HTML and CSS in order to create and style their first web page from scratch.

This is a half credit course.

Course Topics:

Getting Started – What is the Web?

1.1 Welcome

1.2 The Internet

1.3 Browsers

1.4 Viewing Websites

1.5 End of Unit Test

HTML – Structuring Websites

2.1 Introduction to HTML

2.2 Structure of an HTML Page

2.3 Formatting Text

2.4 Links

2.5 Images

2.6 Copyright

2.7 HTML Lists

2.8 HTML Tables

2.9 HTML Styling

2.10 HTML Colors

2.11 End of Unit Test

CSS – Styling Websites

3.1 Introduction to CSS

3.2 CSS Select by Tag

3.3 CSS Select by Class

3.4 CSS Select by ID

3.5 The Cascade

3.6 End of Unit Test

Project – Create Your Homepage

4.1 Homepage: Your First Website

Advanced HTML and CSS

5.1 Getting Started

5.2 Multi-file Websites

5.3 Embedding iframes

5.4 Divs

5.5 Spans

5.6 Combining CSS Selectors

5.7 The Don’t Repeat Yourself Principle

5.8 Special Selectors

5.9 Visibility

5.10 Reading Documentation

5.11 Using the Inspector

5.12 The Box Model

5.13 Image Manipulation

5.14 Animation

5.15 Interaction

5.16 End of Unit Test

Project – Tell a Story

6.1 Project: Tell a Story


7.1 What is Bootstrap?

7.2 Getting Started with Bootstrap

7.3 Jumbotron Pages

7.4 The Bootstrap Grid System

7.5 Bootstrap Components

7.6 More Bootstrap Components

7.7 Navigation Bars

7.8 Drop Down Menus

7.9 Using Bootstrap Examples

7.10 Bootstrap Challenges

7.11 End of Unit Test

Bootstrap Project

8.1 Bootstrap Project

Designing User Interfaces

9.1 Intro to Design Thinking

9.2 Empathy

9.3 Define

9.4 Ideate

9.5 Prototype

9.6 Test

9.7 End of Unit Test

Final Project

10.1 Final Web Design Project