Day 1: Introductions, Setup and Long-form Text
First day of frontend! Most of the day will be spent getting to know your instructor and setting up your environment. Then we write a simple HTML blog post.
CPRG 210 Home Page
CPRG 210 - Course Schedule
Day 2: Web Typography and Floated HTML Images
Now that we have some HTML work with, we’ll begin styling the text, insert an image or two and add a top bar.
Day 3: Page Headers and Hero Sections
Home pages often have large hero sections to grab the user’s attention. Internal pages will often have a simpler page header.
Day 4: Flexbox Navigation
No multi-page website is complete without navigation. Luckily, Flexbox makes this easier than it was.
Day 5: Git and GitHub
Git and GitHub will allow us to save our work, collaborate with team members and deploy our projects.
Day 6: Open Workshop Day
Friday! This will be an open workshop day to clean up code, self-study and work on Assignment 1.
Day 7: CSS Toggles with element.classList
For our first day of Javascript will modify our page styles with the Element.classList object.
Day 8: Modifying Page Text with JS and Web Forms
Javascript is often used to control web forms. In this session we will modify page text based on form input.
Day 9: Dynamic Image Gallery with JS Loops
Expanding on what we learned yesterday, we will add Lorem Picsum images to a gallery using a loop.
Day 10: Setting up Node and NPM
We will be following the MDN Express/Mongoose tutorial modules for the server-side component of this course.
Day 11: Creating a Static Express Website
Now that we have Node, NPM and Express installed on our machines, let build a skeleton website.
Day 12: Views - Website Templates with Pug
Now that we have a static version of our travel website, we’ll convert the static HTML files into templates.
Day 13: Models, Routes and Custom Modules
Let’s copy our Animal data (our model) from our frontend Javascript app to a Node custom module. Also, it turns out Tony still likes EJS over Pug.
Day 14: Controllers and JSON Endpoints
The real power of Express comes with custom routes and controllers. In industry, we call these API Endpoints.
Day 15: Models - Adding a Database with Mongoose
We’ve got a static web server. Let’s make it more dynamic by adding a database. While we’re at it, let’s make it live on Heroku.
Day 16: Open Workshop Day
The last day of this course will be dedicated to cleaning up our projects, working on the final assignment and preparing for PROJ 207