6 weeks - 4 hours per week (24 hours total)
Throughout this six-week course, students learn the basics of front-end web development. Students will learn the basic practices, fundamentals, and ideas behind creating dynamic websites with HTML, CSS, and JavaScript. With a focus on applied knowledge, students will get hands-on training using HTML to create semantic pages structures, CSS to implement modern designs, and JavaScript to make the pages dynamic and interactive. This course can also be utilized as a preview to the immersive 12-week program, giving students new to development exposure to what the full-time course would feel like and a great introduction to being a developer.
During the course, students will build a multiple page application, implementing the topics and ideas that are learned during class.
By the end of the course, students should be able to:
- Explain the basic developer workflow
- Implement semantic HTML to structure a webpage's content
- Implement CSS to style and layout a webpage's presentation
- Implement JavaScript to manipulate and HTML webpage's behavior
- Solve simple problems with JavaScript
- Utilize, using JavaScript, APIs to build data driven websites
- Create a website and deploy it to the internet
Each class will consist of a 2 hour morning lecture, lunch, lab time and a short review or mini afternoon lecture. There will be one ongoing homework assignment that is assigned at the end of day 1. This will be one big website that the student will grow over the course.
Lectures will be recorded and available online after class.
Saturdays
lecture: 10 AM - 12 PM
lunch: 12 PM to 1 PM
Lab: 1 PM to 2 PM
Review: 2 PM to 3 PM
Course schedule might change at instructors discretion.
| Week # | Lecture | Afternoon Review | Projects |
|---|---|---|---|
| 1 | Semantic HTML | Web Accessibility | Create the HTML for your project |
| 2 | Intro to CSS | Tooling | Add CSS to your project |
| 3 | Flexbox | CSS Grid | Add Responsive CSS |
| 4 | Media Queries | Mobile First Design | Finish CSS on your project |
| 5 | Intro to JS | Using JS w/CSS | Add JavaScript to your project |
| 6 | Tools/new project | Finishing touches | Completed your project |
Over the course, you will be building a website for a hotel, restaurant, flower shop, or beauty salon/barber. An example would be creating a clone of https://sdg-tourism.netlify.com. Use the topic of the day to build out different sections.
We will be using glitch.com to create your website. It is a free service that allows you to create and edit your website in the browser. During the last week, we will explore the developer environment and build a project 'from scratch.'
Instruction:
- Basics of HTML and HTML5
- Using semantic HTML
- How to breakdown and implement a basic webpage design
Review
- Web accessibility: why and how.
Instruction:
- inline styling aka why CSS matters
- Using CSS to style a page
- Using CSS to layout a page
- Creating Responsive webpages
Review
- Getting to know your Dev Chrome Tools
Instruction
- Flexbox
- Responsive CSS
Review
- CSS Grid
Instruction
- Making it look good on mobile
- Media queries
Review
- Javascript types, the console and DOM.
Instruction:
- Intro to Javascript
- Using Javascript to affect your CSS
Review
- Conditional Statements
Instruction
- Arrays and loops
- Inputs and Javascript
Review
- Introduction to the developer environment
- Building a project togehter from scratch (fun jar)