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.
1) JQuery Basics - locked
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.
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.
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.
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.
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.
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.
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.
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.