Website Examples

• • https://craigseanhooper.com/
  • https://www.melaniehoff.com
  • https://www.theslowmoguys.com/

Description

We’re going to use everything we’ve learned over the last couple of weeks on coding and apply it to making our own websites! Last week we worked on mockups and these will be the basis of the website we’re creating! We will be using glitch to host our websites so that when they’re finished, the websites can be immediately searchable online!

SPECS

• Your one-page site should follow the specs from the mockups:
  • A way to navigate it
  • A layout of Projects
  • An about section
• Each page should use media queries to be responsive on both desktop AND mobile.

DESIGN REQUIREMENTS

• Since we are building the site using the mockups from the previous week, all of our design requirements stay the same.
• Have the following text styles
  • H1
  • H2
  • H3
  • List Items
  • Paragraph
• A Color Scheme of at least three colors
  • Primary Color
  • Secondary Color
  • Accent Color
• At least Two Fonts
  • Heading Font
  • Body Font

INSTRUCTIONS

Note: During class on Friday, we will be setting community agreements about how to collaborate with one another.

FOR WEEK 1 OF PROJECT

Deciding On Your Approach

1. With your mockups in mind, decide what your approach is going to be for coding your website.
2. Here are some guiding questions to help you decide:
   • Are you coding desktop first? or mobile first?
   • Are you coding each page one-by-one before moving onto the next page?
   • Are you setting up the HTML first before adding in your CSS? or are you getting in all the basics of each style beforehand
3. I won’t be dictating how you set up your website. How you manage your building your website will be up to you!

Translate Your Mockup into an Outline

1. Getting right into it might get you started quicker but coding, like InDesign, is a process that benefits from planning and consideration before jumping into it.
2. Look at your mockup and create an outline to help you prep and think through the following:
   • What styles am I going to need for my elements?
   • What is the HTML structure for the site?
   • Are there any things I’m going to have to figure out with Javascript? And what’s it going to have to do?
   • What will my breakpoints be for my media queries? and how will those styles change?
   • Are there any special features that I’m going to have to dedicate time to figuring out? (i.e Slider, Lightbox, etc)
3. How you make this “outline” is up to you! It can be a drawing, you can write it out, it can be a set of comments posted in your Glitch files.
4. In your plan, make a “Week 1 progress goal” to decide how far you want to get in the coding before the second week!

Start Coding!

1. Implementing your plan, start coding your website!
2. Use your “Week 1 progress goal” to help you keep on track for finishing the website.
3. This is important for the W10 Working Session so you can ask any questions of me around any issues when coding!

FOR WEEK 2 OF PROJECT

Code, Code, Code!

1. The second week of this project will be dedicated entirely to coding your website!
2. We’ll be using Week 10 as a working session and Office hours session to talk about any issues you might be having with the project to this point.
3. There won’t be an in-class exercise so it’s really dedicated to working!