Introduction to Web Design

We love, love web design! This course targets CoderKids who dream of creating the website that is an instant hit. Utilizing the most current development platform, our curriculum enables CoderKids to design and create a website that best reflects them, their goals and motivations.

Want to design a mobile-friendly website? CoderKids are covered with our hybrid app model that takes into account mobile platforms.    

Ages 11 - 13 years old


Course Objectives

Coder Kids:

  • Understand and employ basic HTML5 markup tags to build their own websites

  • Use CSS3 to customize, position and animate their web page elements

  • Organize the code that makes up their website by splitting it into markup, CSS and JavaScript

  • Use basic JavaScript commands to store information, do basic calculations and manipulate web elements

  • Use control operators in JavaScript in their web development

  • Prototype their website design by using open source WYSIWYG tools

  • Use responsive web design to generate websites that can be viewed on mobile devices

  • Incorporate third party packages in their websites

  • Use built-in web developer consoles to debug their applications


Course Summary

The Coder Kids Introduction to Web Design course invites CoderKids to learn how the websites they use everyday are built.  As technology becomes ever more ingrained in our lives, it is important for CoderKids to understand how the content they are digitally connecting to is created.  The Web Design course covers the basics of Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript- the three key languages for building any website.  Our lessons use the most recent updates of each language to ensure CoderKids are always using the latest technology. With the help of Coder Kids, building for the web has never been easier or more fun.

This course begins with an Introduction to HTML.  HTML is used to create the structure and bones of every website.  CoderKids begin by writing a “Hello World” program, the first step of any beginner developer.  To write this program CoderKids use a program called Brackets, a text editor that understands HTML, CSS, and JavaScript.  Brackets even has the ability to debug issues to help us write code faster.  To begin writing in HTML, CoderKids learn how to write a tag.  Tags tell the computer how we want text to be formatted.  The first tag CoderKids learn about is the h1 header tag.  This allows the CoderKids to write Hello World in big text on the screen.  The beauty of writing code for the web is that your CoderKid sees the results of the work rendered in their browser immediately.  

Continuing from the h1 tag, CoderKids learn about the other vital tags for creating a website such as the head, body, and paragraph tags.  CoderKids learn how each tag plays a role in creating a working website.  Once mastering these tags CoderKids learn other tags such as list tags, which are used to create both ordered and unordered lists, the blockquote tag, which quotes another source, and the emphasis tag, which makes text bold, among other tags used in the course.  

CoderKids then learn to add different media forms to their website.  Starting with Youtube videos, CoderKids utilize the iframe tag to add videos directly from the video engine to their website.  In addition, CoderKids learn how to add images by using the img tag and to organize these visual components on their websites using div tags, a key component of every website.  

Once mastering the foundational elements of HTML, the Web Design course introduces CSS.  CoderKids learn that CSS is what makes the HTML look like a real website by offering hundreds of different ways to format text and other content.  By simply typing a tag type and pair of curly brackets CoderKids learn they have the ability to instantly modify any element of their website.  A whole slew of properties are available for editing such as the color property which allows CoderKids to change the color of their text.  While this way of coding in CSS allows us to change every element on the page there are sometimes cases where we only want to change one part.  This is where classes come in.  By using classes CoderKids learn to change the color or size of only one element.  By using an additional property known as font-family CoderKids learn to change the font of text in their HTML document. Unfortunately, not every browser supports every font type, so CoderKids learn to use CSS to automatically handle this challenge so that their websites render properly in any browser.  

In the final section of this course CoderKids learn the key aspects of JavaScript. The JavaScript lessons introduce the mathematical principles used in JavaScript such as variables, operators, and arithmetic.  CoderKids learn to use their computer to perform mathematical operations and to store the solutions to these equations as variables. In working with variables, CoderKids learn best computing practices in using and naming their variables. The course continues by building the CoderKids’ JavaScript vocabulary and teaching them concepts such as the difference between variable strings and literal strings, how to find the length of a string, and how concatenation works and what it is used for.

The Web Design course culminates in the final project. For the final project CoderKids apply all of their newly won skills in HTML, CSS, JavaScript, and logical thinking to create their own website with their own code, reflecting their own interests.  

The Introduction to Web Design course is perfect for CoderKids desiring to learn how the websites they use everyday are designed and developed.  By equipping CoderKids with the skills to build their own websites, Introduction to Web Design prepares CoderKids for success in a world where technology in the only real universal language.


What's Next?

In January 2017, Coder Kids will launch courses in robotics, Python, advanced Minecraft mods in Java, and cybersecurity.