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.
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.
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.
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.
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.
Introduces HTML tables, 2 list types and iFrames using a YouTube Video for an example.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
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".
8) Bootstrap Modal Form - locked
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.
2) Data Types, Numbers & Strings - locked
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.
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.
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.
6) Shopping Admin - locked
7) Shopping Main - locked
8) Shopping Cart - locked
9) Shopping Checkout - locked
10) Shopping Admin Receipt - locked