Web Development Curriculum

Summary

This course is intended to provide beginners with the basic knowledge of website design and development. It will start out with a proper introduction to the necessary languages needed for designing websites and there will also be an accessibility (a11y) and semantic element training. There will also be a thinking workshop which shows the students the best way to find out solutions to problems their trying to fix online.

Over the duration of the week, the students will apply the knowledge they were taught in class towards developing a fully functional, responsive and aesthetically pleasing portfolio page which will display their projects from the other workshops. The students will also be given an introductory course to working with version control using Git and Github and they will be taught how to deploy static websites to Git Pages.

What the students gain through this course:

Learn how to build websites
Understand the need for accessibility in websites
Learn how to make websites responsive
Learn how to use semantic elements
Learn about version control
Learn how to translate design to code
Improve their eye for design by recreating projects from Dribbble
Learn how to find answers to errors using Google and StackOverflow
Practice manipulating existing websites using browser developer tools

Technical Takeaways:

Semantic HTML Elements
Styling with CSS
Responsiveness using CSS Media Queries
Manipulating DOM elements using Javascript
Javascript Logic and Conditional statements
Working with Git in the command console
Navigating through Github
Deploying static web pages

Schedule	Exercises
Day 1: Introduction to Website Design	Basics of HTML and CSS: The students will learn all about the basics of building websites using HTML and CSS. The following topics will be covered: semantic HTML elements, developing for accessibility, styling with CSS and building responsive websites. There will also be a mini workshop that teaches students the best way to navigate the internet to find answers to any challenges they may occur while building their website.
Day 2: Practical Web Development	Website Layout Design: Students will start working on their portfolio. They will come up with a design of their own choosing or find one online to work on. They will be taught how to translate design to code and apply this knowledge practically. The instructors will provide hands-on assistance to help each student get started on their chosen portfolio design. Students will be required to finish the basic layout for the portfolio page at home.
Day 3: Version Control	Introduction to Git and Github: Students will create Github accounts and learn how to push and pull repositories using the Git command line and the Github visual interface. They will push the code for their portfolio pages to a Git repository. The instructors will help sort out errors, if any, the students may have encountered while building their portfolio pages. The students will continue working on their portfolio pages at home, and they should have a suitably complete version of the page.
Day 4: Programming	Working with Javascript: The students will start working with the Javascript programming language. They’ll learn how to manipulate elements in the DOM using JavaScript. They will add functionality and transitions to their webpages using Javascript. They will also learn some programming fundamentals.
Day 5: Deploying	Deploying a static webpage: The students will deploy their finished portfolio pages to a static website using GitHub Pages. The instructor will help students finalize their portfolios.