Preamble: a bit about projects generally

Welcome to your first project for this course! Projects are, quite simply, fantastic. They’re a chance to bring together all the skills you’ve been working on in classes, readings, and FreeCodeCamp lessons to actually make something.

Before you dive into this project, take a look at the Project Rubric that will guide through all of your Web Dev projects this semester including a grading scale.

🌎 Overview

Create a three-page website entirely by hand using HTML and CSS.

🧠 Rationale

This project is designed to let you flex those brand new web dev muscles! Hand-coding this website will give you the chance to test out all the HTML and CSS tricks you’ve learned through Free Code Camp and our class website. What you create might not be beautiful– and that’s okay! We are going to learn lots more very soon to really make our websites beautiful. But you should certainly feel proud of this project, because it’s a testament to all you’ve learned in just a few weeks!

When you’re working on a project for this class, aim not just to complete its requirements, but rather to actively think1 about each step of what you’re doing: what it’s aiming to accomplish, how it works, why you’ve made the choices you’ve made, etc.

Required Elements

🏗 Structure

This one is pretty simple. Your website should include three pages, and each must contain at least one image and a bit of writing (i.e. headings, paragraphs, lists, tables, etc.). Additionally, each page must contain a link to all the other pages of your Project One website, and a link to your webdev homepage.

📺 Content

What should this three-page website be about? Anything you choose! If you want to dedicate your three pages to how to build a birthday cake for a baby hippo2, that’s great! Your favorite movie, band, sports team, or hobby are all good choices, too. The point is to pick content that you care about and that you want to spend some time thinking about. If you’re bored creating the site, there’s a good chance your audience will be bored, too.

When picking your topic, think of something that not only piques your interest but something you can easily share in a few paragraphs, headings, and images. While there is by no means a word count in this project (we’re not that kind of class, please don’t ask, “Is this enough?”), you need to have more than an image gallery. Don’t worry, this is the Internet: the paragraphs can be short. Think 3-6 sentences. Maybe throw in a list or a table too, if your topic permits. Basically, this website should be made with love, so put a little effort into your content creation.

Where should your images come from? They can be pictures you’ve personally taken, or scour the web for an image that you’d like to include3. As a general rule of thumb, it’s best to make sure the images you’re using are not copyright-restricted and to give the photographer credit for their work.4

Note: You can pick different content for the remaining projects. You are not committing to a single topic for the entire semester.

📓 Grading

Many of the projects in this course will be graded by both:

1. A list of things you must do not to fail (required elements) and
2. A menu of cool things you can choose from to take your project from passing to awesome (qualitative elements)

Required elements are the bare minimum; they’re what you must do to not fail. You must complete each and every required element. Doing so is essential, but by no means sufficient, to earn a good grade.

Qualitative elements will take you from merely passing to excelling. And, some great news: you don’t need to complete all of them to earn full credit for an assignment. Instead, think of them as a menu of options from which you may choose.

You might select one or two and go incredibly in-depth on them, or choose a more moderate approach across a handful of them. We’ve built this flexibility in by design so that you can choose the ways in which you want to challenge yourself.

Outstanding projects will of course check the box for all required elements and demonstrate ambition and mastery through one or more qualitative elements. Check out the grading scale for more details.

✅ Required Elements, 7.5 points

One point will be earned for completing each of the following:

• Sensibly named files
• Properly formatted HTML and CSS (indented code, etc.)
• A minimum of three pages, all linked together so that the user can always reach any other page from any given page.
• All CSS in an external stylesheet5
• Each page must contain at least one image, appropriately sized
• Implements accessibility best practices (semantic elements, alt text, etc.)
• Reflection (see below for more details!)

😍 Qualitative Elements, 3 points

These points are earned by demonstrating a high overall level of quality, effort, and ambition. Choose from the following; keep in mind you don’t need to do all of them— a deeper dive on one or two is totally fine! The name of the game here is to put some effort into going above the required components! 6:

• Attention to typography (Google Fonts, typographic scale, typeface pairings, etc.)
• Overall aesthetics
• Use of advanced CSS visual presentation techniques (rely on your FreeCodeCamp experience for CSS graphics, animations, etc.)

🤔 Reflection, 1.5 points

This reflection serves two important purposes. First, it helps you articulate your thoughts about the process of creating your website which in turn will help you synthesize the skills you’ve learned and reinforce that learning.7

Aside from being a great learning tool, this reflection is actually beneficial to you in another way: it gives you a chance to share what you’re proud of and draw the instructor’s eye to elements of your work—which can end up helping you during the grading process! In other words, tell me why you’ve earned all those qualitative points! What did you do to go above and beyond?

Your reflection should be a short-ish paragraph or two. You might consider the following elements:

• New skills acquired
• Struggles faced
• Things you’re proud of (especially those qualitative elements)
• Additional things you’d like to learn/work on in the future

Your reflection should be included on your webdev homepage8, along with a link to your first project. If you like, you can also include a screenshot of your project.

🛝 Playground (3 points)

Practicing is really important! Make sure that you’ve uploaded a playground for Bootstrap. Submission for this includes linking your work to your course homepage and uploading the files to the playground folder:

yoursite.com/webdev/playground

Submission

Your instructors will evaluate your project by visiting those URLs, so to double-check that everything’s in the right place, visit those URLs yourself, ideally in a separate browser or an incognito/private window to ensure that you aren’t falling victim to any caching issues. Check it once, and then check it again! If I can’t access your work it will be considered late.

Getting Started on Project One

Ready to get going? Excellent! Check out the lesson aptly titled Getting Started on Project One to get the ball rolling. If you decide to just jump right in without reading this less, no problem! However, it will be a good idea to double-check your work against the outline in his lesson to make sure you’ve hit all the highlights!