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.

HTML-CSS- JavaScript Portfolio Projects

Unlimited

Dashboard

Courses

Schedule Tutor

Profile

Memberships

Bundle Courses

Communities

Groups

Digital Products

Physical Products

Live Products

Video Library

Audio Library

Events

Appointments

Premium Pages

Certificates

Badges

Order History

Coin History

Organization Orders

Subscription

Affiliate Dashboard

Settings

Billing

FrontLineDesigns

Primary Menu

Cookies

PreCodeCamp Colors

System Defaults

Primary color

Primary color hover

Heading text color

Body text color

Banner text color

Primary button text color

Primary button text hover color

Secondary button background color

Secondary button background hover color

Secondary button text color

Secondary button text hover color

Navbar item background color

Navbar item text color

Navbar item text hover color

Primary Color

Primary Color Hover

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

HTML-CSS- JavaScript Portfolio Projects

Level

Course content

Course Description