Skip to content

HTML, CSS, Bootstrap JS, jQuery & 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 - open

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) Events, Functions and Error Handling - locked

JS & jQuery Foundation: Learn the basics of Javascript and jQuery Code. You will learn how to create functions, handle errors with try/catch blocks and log data to the console. jQuery methods for text manipulation and special effects will be introduced along with the onLoad, onChange, onMouseOver, & onMouseOut events.

Events, Functions and Error Handling

2) Data Types, Numbers & Strings - locked

JS & jQuery Foundation: You will be introduced to 4 javascript data types, basic math functions & number methods. Strings, string arrays and looping will also be covered.

Data Types, Numbers & Strings

3) Conditionals, Comparisons & Loops - locked

JS & jQuery Foundation: You will be introduced to the foundations of logical decision making in code using the "if" statement, "switch" statement, comparison operators and different looping techniques.

Conditionals, Comparisons & Loops

4) Arrays & Dates - locked

JS & jQuery Foundation: You will learn how to store and manulpulate data in a virtual filling cabinet called an Array. Getting and formatting dates will also be covered.

Arrays & Dates

5) JSON, LocalStorage & Ajax Callbacks - locked

JS & jQuery Foundation: Sending data from the browser to the webserver and back is a foundational concept of modern web design. In this project you will be introduced to JSON objects for data transfer and the Ajax callbacks that make it all possible.

JSON, LocalStorage & Ajax Callbacks

6) Shopping Admin - locked

JS & jQuery Applied: This is the 1st part in building your ecommerce application. You will write the front end Javascript & jQuery code to communicate with the webserver and create your own product catalog from an Admin section.

Shopping Admin

7) Shopping Main - locked

JS & jQuery Applied: This is the 2nd part in building your ecommerce application. You will write the front end Javascript & jQuery code to get the product catalog from the webserver and show it to the customer so they can buy products by adding them to a cart.

Shopping Main

8) Shopping Cart - locked

JS & jQuery Applied: This is the 3rd part in building your ecommerce application. You will code the front end Javascript and jQuery to create a shopping cart including the ability to add, update and delete products.

Shopping Cart

9) Shopping Checkout - locked

JS & jQuery Applied: This is the 4th part in building your ecommerce application. You will code the Javascript to update product totals in the shopping cart, process an order on the webserver and reset the form.

Shopping Checkout

10) Shopping Admin Receipt - locked

JS & jQuery Applied: This is the 5th part in building your ecommerce application. You will code the Javascript to get order data from the webserver and display it on the screen adding and removing CSS classes for effects. You will also code the functionality to print an order receipt.

Shopping Admin Receipt
More Projects Added Monthly