Howdy! This is a tad dense, so I’ve added a handy table of contents to help you navigate. Every week of the class is mapped out for you. If you stay on track, all you need to do is find the week and check things off the to-do list. I recommend reading through the material before you get started on the homework!
Note: the homework listed for a given week is due at the start of the following week. Example: the homework listed for the first week of class (Create Free Code Camp (FCC) account; Install course software) should be completed by the second week of class.
Week 0: June 6 – June 9
Hey everyone, welcome to Web Development! Use these first few days (6.6–6.9) to get used to the flow and to ask questions! You’ll need to complete everything on the to-do list each week to stay on track!
If you have some extra time, I recommend getting started on Week 1!
To Do:
- Review Syllabus: This is super important and you should probably look at it more than once!
- Review Schedule: That’s this thing! Make sure to read it carefully!
- Attitudes & Habits: Getting into the headspace that will help you succeed.
- Course Software: Time to download the course software to your Mac or PC!
- Setting Up Your Mac: This is optional! Some tips and tricks if you are a new Mac user.
- Getting Started with Free Code Camp: Set up your Free Code Camp account so you are ready to hit the ground running.
- Help Help: This is your crucial guide to getting assistance this semester! After you read this you will know that you should never take a picture of your computer screen to get help. (Seriously! Take a screenshot, instead!)
Homework:
- Create FCC account
- Install Course Software
Week 1: June 10 – June 16
Look at that! Week 0 is complete and we’re already onto the next! This might be the toughest week of the entire course. Don’t give up, I promise you’ll do awesome!
Weekly Summary – HTML:
📆 Project 1: Hand-crafted website – DUE Sunday, June 23 at 11:59P
🏕 Free Code Camp: Complete FCC 1-3
💻 Read: 1: HTML and CSS
Curious about what my suggested reading breakdown is?
- Mon-Wed: Your First HTML File – Homepages and the Course File Structure; FCC-1
- Thur-Fri: Lists – Images; FCC-2, FCC-3
- Sat-Sun: Catch up on anything left or take some time to yourself—you deserve it!
To Do:
- Your First HTML File: We all have to start somewhere!
- HTML Tags: Hold up! What even is HTML?
- HTML Boilerplate: You might want to keep this page in mind for when you need to start a new HTML file from scratch!
- Files and Folders: This is one of the most important lessons you’ll encounter this semester! Read it closely, and then read it again!
- Setting Up a Domain and Hosting: Step-by-step instructions to purchase your website and hosting.
- Uploading to the Server: This is another important one! How do you get those beautiful web pages you are about to make onto your server? Cyberduck to the rescue!
- Cyberduck 101: How an FTP client works and some workflow advice!
- Homepages and the Course File Structure: Here you will download the course file structure that we will use this semester and create a simple homepage for both the root of your directory and your webdev directory.
- Lists: Like the one this link is in!
- Links: Connecting those web pages together!
- Images: This will walk you through the process of adding an image to your HTML file. This reading also contains 🚀 EXERCISE 1 🚀 an easy, and optional, exercise that will help you practice your skills from this module!
- Info Form: This is super important so make sure to have this form filled out by the end of the week (
DUE June 16 at 11:59P). I won’t be able to access your work to grade it, so double-check that your links work and reach out to me on Slack if you have any questions. Please do not make me track you down due to broken links or not submitting this form! 😱
Homework:
Week 2: June 17 – June 23
Hopefully, HTML is starting to click with you! We’ll continue building on our skills by introducing CSS this week. The bulk of your freeCodeCamp exercises will happen this week. Work through them in small chunks and it’ll be over before you know it. A lot of it will be repetitive, but it’s all about practicing.
Your first project is due at the end of the week. Don’t wait until Sunday to start on it!
Weekly Summary – HTML & CSS:
📆 Project 1: Hand-crafted website – DUE Sunday, June 23 at 11:59P
🏕 Free Code Camp: Complete FCC 4-12
💻 Read: 1: HTML and CSS
Curious about what my suggested breakdown is?
- Mon-Wed: HTML Tables – Styling Links, start on Project One; FCC-4, FCC-5, FCC-6, FCC-7
- Thur: Applied Accessibility and work on Project One; FCC-8, FCC-9
- Fri: Work on Project One; FCC-10, FCC-11, FCC-12
- Sat-Sun: Finish up your first project and get ready to jump into Bootstrap!
To Do:
- HTML Tables: Just like in a Word document – kind of!
- CSS: Adding a bit of style to our web pages!
- Linking to an External Stylesheet: You can refer back to this for the code to link your stylesheet to your HTML document.
- Applying CSS Rules: A quick look at elements, IDs, and classes.
- Fonts: A simple way to add fonts to your webpage.
- CSS Box Model: Understanding the Box Model will help you use borders, padding, margins, and CSS in general much more effectively!
- Div Tags and Semantic Elements: How to add some order to your HTML.
- Styling Links: This is an optional reading!
- Applied Accessibility: When we create for everyone we make better websites.
Homework:
Week 3: June 24–June 30
We’ll start exploring Bootstrap this week. This is one of my favorite parts of this course and I hope you love it too! Bootstrap is an incredibly popular (and powerful) front-end framework that will help you develop responsive websites. As always, let us know if you have any questions!
Weekly Summary – Bootstrap Part 1:
📆 Project 2: Bootstrap Triptych – DUE Sunday, July 7 at 11:59P
🏕 Free Code Camp: Complete FCC 13-14.
💻 Read: 2: Bootstrap
Curious about what my suggested breakdown is?
- Mon-Wed: Bootstrap – Bootstrap Grid Exercise; FCC-13
- Thur: Media Queries – Responsive Optimization Exercise; FCC-14
- Fri: Work on Project Two
- Sat-Sun: Get ready for another week of Bootstrap!
- What is Bootstrap?: An introduction to Bootstrap, including the Starter Template and how to use it!
- Bootstrap Starter Template: A handy reference!
- Bootstrap Playground: Explore some Bootstrap components! This will be graded, so make sure you explore.
- Bootstrap Grid Exercise: This reading contains 🚀 EXERCISE 2 🚀 an easy, and optional, exercise that will help you practice your skills from this module!
- Media Queries: These are one of the key players in responsive web design.
- Responsive Optimization Exercise: This is an extensive exercise that isn’t graded, but is an excellent resource for all things Bootstrap! I highly encourage you to follow along with the steps: especially the parts that deal with custom CSS as that will be something you’re asked to do for your project!
Homework:
Week 4: July 1–July 7
Weekly Summary – Bootstrap Part 2:
📆 Project 2: Bootstrap Triptych – DUE Sunday, July 7 at 11:59P
🏕 Free Code Camp: Complete FCC 15.
💻 Read: 2: Bootstrap
Curious about what my suggested breakdown is?
- Mon-Wed: Shopping for a Theme – Inspector Gadget; FCC-15
- Thurs–Fri: Work on Project Two
- Sat-Sun: Wrap up Project Two!
- Shopping for a Theme: How do you find a good theme? Check out this lesson!
- Customizing Bootstrap: A quick resource for the right way to customize your Bootstrap CSS.
- Working with a Bootstrap Theme: Make sure to read this before you start Panel 3!
- Inspector Gadget: This reading will guide you through the Inspect tool on Chrome– something you’ll need to understand for both Project 2 and 3! Spend some time here to make sure you’re comfortable with Dev Tools.
Homework:
Week 5: July 8 – July 14
Welcome to WordPress! This powerful CMS is going to allow you to create more complex, dynamic websites at lightning speed! This will be yet another fun week of exploration, good luck!
Weekly Summary – WordPress Part 1:
📆 Project 3: WordPress Variety Pack – DUE Sunday, July 21 at 11:59P
💻 Read: 3: WordPress
Curious about what my suggested breakdown is?
- Mon-Tue: Intro to WordPress – 20 FAQs
- Wed–Thur: Block Editor – Shopping for a Theme
- Fri: Start on Project Three
- Sat-Sun: Get ready for another week of WordPress!
- Intro to WordPress: What is a CMS? PHP? MySQL? Learn the secrets of these mysterious acronyms!
- WordPress Starter Steps: This step-by-step guide will walk you through installing WordPress on your server and getting it ready for action.
- Pages vs Posts: What’s the difference between these two similar ideas?
- 20 FAQs: Good general overview of WordPress!
- Block Editor: This is a good resource for you as you begin to explore WordPress. Give it a scan, but you don’t have to follow along for the entire exercise!
- Plugins: These are a great way to add additional functionality to your WordPress site.
- Shopping for a Theme- Revisited: We’ve looked at this lesson in our Bootstrap unit, but it’s a good idea to revisit it now that we’re in WordPress land. Trying on WordPress themes is a little like finding the perfect pair of jeans!
Homework:
- Get started on Project 3
Week 6: July 15 – July 21
In the second. half of our WordPress unit we’re going to focus on WooCommerce– a nifty plugin that you’ll use for your WordPress project!
Weekly Summary – WordPress Part 2:
📆 Project 3: WordPress Variety Pack – DUE Sunday, July 21 at 11:59P
💻 Read: 3: WordPress
Curious about what my suggested breakdown is?
- Mon-Wed: WooCommerce – Order Off the (Navigation) Menu
- Thur: Customizing WordPress CSS – Backing Up WordPress
- Fri: Work on Project Three
- Sat-Sun: Finish up Project Three!
To Do:
- WooCommerce: What is WooCommerce and why are we using it?
- WooCommerce Starter Steps: As the title suggests, this guide will walk you through installing WooCommerce on your WordPress site! I suggest following along as you get set up for Project 3!
- The Wide, Wide World of Widgets: What’s a widget and how do you utilize them?
- Order Off the (Navigation) Menu: Customize your WordPress menu so you can make sure your site is easy to navigate!
- Customizing WordPress CSS: Whenever we use a theme we want to make it our own! This lesson will show you how to add additional CSS to a WordPress theme so that it’s truly unique.
- Moving a WordPress Site: This is crucial reading if you are A.) Working with a client and need to hand off a WordPress site, or B.) Install WordPress in the wrong location on your server and need to move it. Make sure to check this out!
- Backing Up WordPress: You wouldn’t write an essay for English class without pressing “Save,” would you? Then don’t make a WordPress site without creating a backup copy!
Homework:
Week 7: July 22 – July 28
Woo, we made it to the final stretch! You have the remaining time (about 2 weeks) to create a very, very well-polished dossier and a really impressive final project where you push the boundaries.
Weekly Summary – Final Project & Dossier:
Curious about what my suggested breakdown is?
- Mon-Tue: Research Final Project
- Thur: Come up with a plan for finishing the Dossier and Final Project
- Fri: Get lots of work done on Final Project and Dossier
- Sat-Sun: Keep on rolling and get a plan together for the last week!
To Do:
- Final Project Proposal: Time to commit yourself to a Final Project for this class! This proposal form is due no later than Sunday, July 28 at 11:59P, but you can turn it in early if you like! I’ll follow up with you if I need any more information or have any concerns by the end of the day on July 29, so keep an eye on Slack 👀. If you don’t hear from me, get to work on the Final Project on Tuesday!
Homework:
- Get started on your Final Project and Dossier Assignment
Week 8: July 29 – August 2
I front-loaded the semester to ensure you have lots of time to work on the Final Project and Dossier assignments! Make sure you take advantage, ask questions, and make some cool stuff!
Weekly Summary – Final Project & Dossier:
📆 Both your Final Project and Dossier are DUE Friday, August 2 by 11:59P.