Your boss comes up to you just before lunch: "OK, we just picked up this job, but I need it on my desk (well, in my inbox) before 6:00 this afternoon. It doesn't need to be perfect... it needs to be as close to perfect as you can get it in that time."
In lab today you will be building a single webpage based off of the provided design comp assets. This assignment is a lot of HTML and CSS, and not as much JS as we've been doing this week. In fact, you may choose to do this project with no JS at all, or just add some as a finishing touch.
This will be a pair-programming project, and you are free to set up whatever workflow you choose with your partner. There are multiple approaches that you can take:
- For the initial "getting things entered" phase work independently, for instance one of you gets the images linked in and the layout roughed out, and the other gets all of the text typed in. If you take this approach, make it easier on yourself by segregating the two work processes into totally separate areas of the HTML so that you do not step on each other's toes and cause merge conflicts
- Maybe you split the work by each of you building a different section of the page that you can then unify later.
- Or maybe you use some other approach that you come up with on your own
GitHub Repository & Project Setup
Create a new repository for today called chocolate-pizza. If you're both going to be coding, have one user fork the other so that you can get some practice in your Git processes. Be sure to do frequent commits, and always do your work on branches. Before starting coding, think about a strategy for approaching this project. Before writing code, think about a practical order in which to do the work:
- When should you focus on styling?
- When should you make a decision about a layout scheme?
- When should you just build out the structure of the HTML?
- When you should you add JS? Do you even add JS?
- How much time to allow for the Peter Griffin CSS tweaking?
PLAN YOUR WORK AND WORK YOUR PLAN
Assignment Overview
The assets (base design comp and images) can be found in the adjacent assets directory in this repo. Download these files and move the assets into your repo. The file "PREVIEW.jpg" contains an image of what you are striving to build in HTML and CSS, so be sure to open it up and keep it handy... but note that it is not for actual use on the page.
All of the other image files are assets you will need to realize the design comp. It will be useful to make an inventory of them and where they will go on the page... but how you choose to manage and organize this inventory is up to your resourcefulness. It's best if you have a plan for how you'll manage this.
Suggestion: set up your work directory like this:
- index.html
- style.css
- app.js (if you choose to use JS)
- img/ (a directory that contains all of your image assets)
If you want to rename any of the image files, feel free to do so. The same goes for pretty much anything else you come up with as a way to do the work.
Requirements
Use good HTML structure to scaffold this site. Reminders: Container elements (a box outside of your content box that might contain multiple content boxes) are very useful in managing layout. You will need to think about the relationship between parent and child / descendant elements as well as the order in which you place them in the HTML. Keep in mind that you can use display: inline in your CSS to force block elements, which would ordinarily stack, to sit side-by-side. Be thoughtful about your CSS layout strategy.
Use CSS to style the page to reflect the full comp image provided as closely as possible. Use what knowledge you have at this point (and any resources you find) to style your site as closely to the design comp as you can: fonts, colors, layout, all of it. You have the resources and are aware of online tools which will help you find useful solutions! On a project like this, something that finishes the basic task is the goal... it can always be refactored with better design and code later. There are no right or wrong answers... just do your best.
OPTIONAL: Add some JavaScript functionality! Get creative, but make sure the style is complete before moving onto any additional features. Wouldn't it be neato if you checking the checkboxes crossed out the text?
Submit: You'll be committing regularly and working on branches for additional Git practice. Submit the link to your most recent pull request into the Canvas assignment.