HTML

Create a Sound Machine. The JavaScript is already written but we will fill in the HTML/CSS to get it to look right.

Overview of the Project Files

Getting Started and Starter Code

Starting with Styling and Adding the First Header

Styling the Header

Creating and Styling a Single Button

Adding the Image Background to One Button

Applying Icons On All The Buttons

Adding A Quick Footer

Conclusion and Debugging

Sound Machine Project

Practice with CSS and best practices. Making reusable code/classes that will make our HTML seem easy to read as well as design. No JavaScript will be introduced

HTML, CSS, File Setup

Making the Header Look Like Lotto Balls

Adding the Navigation Section

Adding the Drawing of the Lotto Balls

Adding the Button For Randomly Generating the Lotto Ball Drawling

Power Ball Lottery

Create Confetti of Hearts on a page load.

Introduction to Project

Coding the HTML Document

Styling the Page with CSS

Animating The Heart in CSS

Adding the JavaScript

Adding Your Project to Codepen

Valentine Confetti Project

Create the logic behind tracking the jobs that you have applied for. We supply the HTML/CSS and you work on the JavaScript logic.

Project Overview

Visual Studio Code Setup

Creating the Job Application Class

Capturing Form Data On Submission

Adding A New Method To Our Job Application Class

Creating a Function to Clear the Table

Displaying the Jobs on the Table

Add Two Methods To Setup Local Storage

Testing Local Storage in Browser

Adding the Delete Button and Final Test

Job Tracker Project

<h2 id="01ce8082-7f34-48f8-93c5-851ca4e9f764" data-toc-id="01ce8082-7f34-48f8-93c5-851ca4e9f764">Dynamic Course</h2><p>This is a dynamic course meaning that we are going to continue to add to this course. More projects means more practice. And your portfolio will look great!</p><p>So…Get your code editors ready and code with us as we go over some HTML/CSS projects. Each chapter will be a new project for you to gain more experience with HTML and CSS.</p><p>The only prerequisite is you must be able to have fun! We walk you through the code video by video. And we make sure we are explaining things as we are going. </p><p></p>

This course contains walk-through code examples of completed projects that you could put in your portfolio. We will be adding more projects to this course as time goes on.

First Unit	Last Unit	Per Unit
1	1	$25
2	10	$25
11	∞	$20

HTML-CSS- JavaScript Portfolio Projects

Level

Course content

Course Description