For this project you will develop a basic website with three individual pages, or a one page website with with three linked sections. There are three options for this project.
- Download a free theme from HTML5up.net and use that as a starting point.
- Build your site from scratch, being sure to use and demonstrate your agility with Flexbox and standard CSS.
- This one is reserved, and recommended, for Dev track students who have never used WordPress. Visit the excellent section on WordPress from our Introductory Web Development workbook, and build your 3 page site with this platform. My expectations aren’t super high, but I think that it is important that all students gain exposure to easy to use content management systems, and WordPress is by far the most popular of that genre.
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 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 hippo, 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 include. Unsplash is a great resource for images. 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. There’s a bit of wiggle room with copyright when you’re using an image for a school assignment, but why not get into the practice of finding fair-use photos? Likewise, it’s easy to make sure you are giving a photographer (or other artist) credit for their work! A quick sentence like: “Photo by Raoul Droog on Unsplash” will do the trick!
Grading
Many of the projects in this course will be graded by both:
- A list of things you must do not to fail (required elements) and
- 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.
✅ 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 stylesheet (You should only have one stylesheet for the entire project. All style rules need to be on this sheet.)
- 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! [footnote]This is by no means an exhaustive list. If you have a cool idea related to this project that isn’t listed here, go for it! (But maybe check with your instructor first just to make sure you’re both on the same page)[/footnote]:
- 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.
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 class homepage.
Rubric
A-Level Work
- Exceptional quality, originality, and/or insight
- Fully meets criteria with no significant errors
- Polished, organized, and professional
B-Level Work
- Meets all criteria with minor issues
- Solid understanding and effort
- Good organization and presentation
C-Level Work
- Meets most criteria; notable gaps
- Basic or inconsistent understanding
- Organization or clarity needs work
Below C-Level (Not Passing)
- Disorganized, incomplete, or poor quality
- Meets few or no criteria; major errors or omissions
- Limited or no understanding and effort