Web Development

For the first class, students will simply use any text editor. They can use Notepad on Windows, or TextEdit on Mac.

Then, students will be introduced to HTML and a handful of basic building blocks that will allow their website to come to life! They'll learn about the tags or elements that build a site from the ground up.

We are certainly not limited to only a handful of HTML elements, there are a lot of useful ones to work with! In this lesson, students learn about even more of them to further structure their website and add more tools to their tool belt.

If you've spent any time on the internet, you will certainly have seen tables, some simple and some complex. In this lesson, the mystical is demystified and students learn exactly what goes into making a table using HTML.

Like all languages, things should be written in a way that they are the most easily understood. Semantic tags make that possible for us and students will see what they are, how they work, and the difference they make on the readability of their work. The same applies for comments!

After this, students dive into forms, which allow users online to input data and submit it for our website to handle, the very same way you'd fill a form on this site!

HTML provided us the 'skeleton' of our web page, the structure that defines what goes where. Now it's time make it look extravagant. CSS (Cascading Style Sheets) works with HTML to add styling to a webpage. Colors, backgrounds, mobile responsiveness - there's so much you can do! Students will learn about the syntax it uses and how to select specific elements on the page to style!

Now that students have learned how to write CSS, select elements, and add some basic styling, they can dive even deeper. Different color codes, different fonts and sizes, opacity, hover effects - anything you can imagine! They will also get into the 'cascading' part of CSS, which dictates how different rules to the same HTML element apply. There are a lot of styles we can apply, and this lesson introduces important (and fun) ones.

Funny enough, at the root of everything, everything CSS displays is simply a box. Circle on the screen? It's a variant of a box. A GIF of a cat knocking something off the table, while it moves around your screen? It's just a box. Knowing the box model is critical to the understanding of how CSS handles it's styling, and in this class students learn all about it!

Students learn here how to determine the 'type' of box that CSS renders, and how they will behave with the other boxes around it, or it's siblings. Also introduced are Media Queries that dictate how elements will respond based on the size of the browser, just like how your phone and tablet would display websites with a different layout compared to your computer or laptop. Additionally, this is the class where we will review anything the students wish and answer any questions. Finally, we'll run a small multiple choice quiz on Kahoot - whoever gets the highest score receives a 5 dollar Amazon gift card!

For this class, students will build a website using everything they've learned! There are no instructions, simply let your imagination take control and have all the colors, gifs, and fonts you want. Once completed, they can proudly say that they have created a website that is unique and amazing.