Recreate Chocolate Pizza Page:
seattle-201n8/class-10-js_debugging-wireframe_part_2/lab-assets/PREVIEW.jpg
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 midnight tonight. 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.
Create a new repository for today called chocolate-pizza. Be sure, before starting to code, to 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
The assets (Base design comp and images) can be found in the adjacent lab-assets directory in this class-10-js_debugging-wireframe_part_2 directory. Download these files and move the assets into your repo. The file "PREVIEW" 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. It is suggested that you may print this out, and you use it to mark up and sketch out page structure and identify where the image assets need to be placed.
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.
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 are able to understand and use effectively from other sources) 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! There's some pieces of this that will be new to you... use the combined brainpower of your fellow studnets to find a solution. 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 could actually check those checkboxes?