Skip to content

HTML5, CSS3 & JavaScript Projects New Projects Added Monthly

CodeCampKidz makes learning to code fun and achievable. Each project finishes with a completed App Page and introduces new code or techniques that are added to your Toolbox in the PlayRoom. You will then apply what you have learned on a personal project and show it to your instructor! Start with the HTML Basics project and have some fun coding :) Remember to submit your project for a code review before moving on.
LEVEL 1 - Syllabus

Basic Web Development with HTML5 & CSS3

1) HTML Basics - locked

If you are new to the Hyper Text Markup Language (HTML) this is a good place to start. HTML is the language a web browser uses to construct and show a page. In this project you will learn the basic structure needed to support a valid HTML page.

HTML Basics

2) CSS Basics - locked

Cascading Style Sheets (CSS) give life to pages. They add colors, borders and a host of other effects. In this project you will learn the basic structure needed to support styles and the basic idea of how they work.

CSS Basics

3) CSS Box Model - locked

All HTML elements are actually boxes. In this project you will learn some layout and design basics using padding, borders and margins to change the spacing of one element in relation to another.

CSS Box Model

4) London Bridge At Night - locked

Have fun, learn to code, and program your first web page. You'll develop a basic skill foundation in HTML5 (structure) and CSS3 (style) while building step by step and watching your page grow.

London Bridge At Night

5) Working with Text & Backgrounds - locked

Introduces Font Awesome Icons, Header Tags, Page Backgrounds and various commonly used CSS properties for manipulating text in a HTML document.

Working with Text & Backgrounds

6) Working with Tables, Lists & iFrames - locked

Introduces HTML tables, 2 list types and iFrames using a YouTube Video for an example.

Working with Tables, Lists & iFrames

7) Working with Tables & MP3 Audio - locked

Use the HTML5 < audio > element to add audio to your page. You'll build a page using the HTML Table structures you've learned along with a picture of the beach. Then you will add an audio clip of waves crashing to enhance the effect. When you get to the Playroom you can use the File Uploader and a conversion site to add your own audio clips to your pages.

Working with Tables & MP3 Audio

8) Working with Tables & MP4 Video - locked

Use the HTML5 < video > element to add video to your page. You'll build a page using the HTML Table structures you've learned along with a background matting. Then you will add a MP4 video clip of a pulsing Star taken by the Hubble Telescope courtesy of NASA/ESA. When you get to the Playroom you can use the File Uploader and a conversion site to add your own video clips to your pages.

Working with Tables & MP4 Video

9) Email Form Processor - locked

Learn how to create a HTML form with labels, a textbox, textarea, radio buttons, checkboxes, hidden fields and a button. When you are finished you will be able to send information entered into the form to your email address. Easily customizable, you can add or remove up to 20 form fields to suit the needs of your page.

Email Form Processor

10) Your Final Project for Level 1 - locked

Congratulations! You covered a lot of ground as you made your way through the Level 1 projects. Now it's your opportunity to bring together what you have learned and create a page of your own design that can be added to the Showcase.

Your Final Project for Level 1

LEVEL 2 - Syllabus

Advanced Layouts & Effects with Bootstrap JS

1) Bootstrap Grid Basics - locked

The Bootstrap libraries will make creating a page layout much easier. Bootstrap breaks the width of a page into 12 columns like a grid. Using their code patterns and CSS styles you will be able to take complete control over the page layout.

Bootstrap Grid Basics

2) Bootstrap Fixed Grid vs Fluid Grid Layouts - locked

Bootstrap offers a few different ways of creating layouts for your page. Two of the most popular are fixed and fluid layouts. Fixed layouts will center the content with a fixed width container size of 1199px adding left and right margin to support wider screens. Fluid layouts are percentage based and will stretch or contract depending on the width of the view screen. In this project you will experiment with both layouts so you can compare them for yourself.

Bootstrap Fixed Grid vs Fluid Grid Layouts

3) Responsive Layouts & Media Queries - locked

Learn how to control the appearance of your page as the width of the viewing device expands and collapses. You will be introduced to CSS Media Queries and learn how to set them for screen widths triggering the use of specific CSS classes. You will gain control over how your rows and column align themselves by stacking Bootstrap column classes for specific screen widths.

Responsive Layouts & Media Queries

4) Bootstrap Image, Panel & UI Effects - locked

Introduces the Bootstrap JumboTron, Page Header, Image Effects, Responsive Videos, Panels and various types of tooltips. All these professional options will increase the quality of your page design and can be customized for re-use on your own projects.

Bootstrap Image, Panel & UI Effects

5) Bootstrap Tabs, Pills & Accordion - locked

Introduces various Bootstrap techniques to hide and show content on a page including Tabs, Pills & the Accordion. All of these tools will be added to your toolbox. You can use them over and over again to create professional looking pages.

Bootstrap Tabs, Pills & Accordion

6) Bootstrap Carousel & Timeline - locked

Introduces two powerful effects for presenting your content including the Bootstrap Carousel Slide Show and the Bootstrap Timeline. If you have ever seen how Netflix displays it's video catelog then you have seen a Carousel Slide Show. A Timeline will show a vertical representation of your content. CodeCampKidz uses one to show how the projects progress. Now you will be able to create your own.

Bootstrap Carousel & Timeline

7) Bootstrap Navigation Menu - locked

Create your first responsive navigation menu while building "The Aquarium Shop". This re-usable menu will allow your users to navigate single or multiple page websites with some minor changes. In the lesson series you will build a "single page website" with all the content on one page. This is popular for mobile presentations. In the developer challenge you will use the same content to create a more traditional "multi page website".

Bootstrap Navigation Menu

8) Bootstrap Modal Form - locked

Use a Bootstrap Modal Pop Up Dialog to create a form that solicits hotel reviews from users and displays them on the screen. You will be introduced to JQuery and Javascript to acheive the effects in a preview of Level 3. When you complete this project the customizable modal form will be added to your toolbox.

Bootstrap Modal Form

9) Your Final Project for Level 2 - locked

Congratulations! You covered a lot of ground as you made your way through the Level 2 projects. Now it's your opportunity to bring together what you have learned and create a responsive website of your own design that can be added to the Showcase.

Your Final Project for Level 2

LEVEL 3 - Syllabus

Advanced Web Development with Javascript & JQuery

1) JQuery Basics - locked

Learn the basics of using JQuery for powerful effects in a web browser. You will start by learning how to create javascript functions and progress through the 3 jQuery Selector types (element, id & class).

JQuery Basics

2) JQuery Accordion - locked

Displays collapsible content panels for presenting information in a limited amount of space. In this project we will create an accordion display that expands and contracts based on user clicks.

JQuery Accordion

3) JQuery Drag & Drop - locked

Create a product catalog using the JQuery Accordion. Drag your product selections and drop them in your shopping cart. In this project we will create a sample product catalog and show case the drag and drop functionality of JQuery.

JQuery Drag & Drop

4) JQuery Modal Message & Confirmation Dialogs - locked

Shows a pop up window with a greyed out background that forces a user to interact with the dialog. In this project we will create two modal dialogs used for different purposes.

JQuery Modal Message & Confirmation Dialogs

5) JQuery Modal Form Dialogs - locked

Shows a pop up window with a greyed out background that forces a user to interact with the form. In this project we will create a commonly used modal form dialog that asks the user for some information.

JQuery Modal Form Dialogs

6) JQuery Tabs - locked

Create a Tab display that is used to show a lot of information in a small space. In this project we will create a Tab display that changes content based on user clicks.

JQuery Tabs

7) JQuery Tooltip - locked

Tooltips are a common and great way to give users more information while they hover over sections of the screen. In this project we will create various tooltips on text and form elements.

JQuery Tooltip

8) JQuery Show & Hide Effects - locked

Show and Hide effects are powerful tools to customize a display based on user interaction. In this project we will create examples that illustrate how to show and hide screen elements based on user interaction.

JQuery Show & Hide Effects

9) JQuery Add & Remove Classes - locked

Adding and Removing CSS styling classes dynamically is a powerful way to change the display of a screen based on user interactions or conditions. In this project we will explore the mechanics of Adding and Removing classes and walk though some examples that illustrate the effects.

JQuery Add & Remove Classes
More Projects Added Monthly