Class: Wednesday 8:30am CST/CDT
Lab: Monday 6:00pm CST/CDT
Answer the following questions, with your answers formatted as an ordered list in an HTML document that you upload to the server. Make sure you use the folder and file name specified below.
font-weight, font-style, letter-spacing, text-transform, text-decoration. Place each sample on its own line. Include a label for the group that shows which css property the group demonstrates. Include a label for each line that shows which value is used. Style the whole page to present your samples cleanly and clearly.Over the next few weeks, you will be designing and building a web page that presents a recipe. We'll start that project by finding/choosing a recipe, and doing some design research. This week, you will upload an HTML document that presents the following:
The CSS Diner exercise below is a fun and effective way to learn about more complex CSS selectors. Work your way through the set of challenges in the CSS Diner link below.
Then, walk through the short lesson on pseudo-classes and pseudo-elements.
Based on your research and the presentation in class, you should be ready to create three sets of low-fidelity prototypes for your recipe page. The objective is to experiment with the visual arrangement of elements in a fast, low-commitment way. You probably have a picture in your mind of what a recipe 'should' look like. Sketch that, but then set it aside, acknowledge that your first solution might not be the best one, and take a run at it from a different perspective!
At minimum, each set should include a portrait-oriented mobile view and a landscape-oriented laptop-view. Don't 'crop' the sketches at the bottom of the device, sketch the full layout. You don't need to spell out words, but if it's not obvious what a box or mark represents, label it!
Deliver your sketches as images collected and presented on a single HTML page, organized and labeled appropriately.
Recreate the structure of the background image from the starter page for this assignment. The starter page includes the CSS link for the required font, and a background image that you will "trace" using HTML. Create each of the five horizontal panels using the <section> element. Use your own images and colors. There are various ways to complete this assignment, but your final HTML should be very close to a pixel-perfect copy of the background image. As you complete each panel, add the panel's background image or background color last (otherwise you won't see the other elements you need to trace).
This assignment will use virtually everything we have learned thus far: type styling, complex selectors, foreground and background images, image optimization, the HTML box model, floats, grids, and shared classes. Referring to those previous lessons will help, but not every answer lies in a previous lesson. Your creative adaptation of what you've learned will be important.
Notes: use the Chrome browser to avoid any browser rendering discrepancies. You'll need to link to the Google font 'Archivo Narrow'.
BE ADVISED: This assignment may require considerably morse time than the exercises we've done thus far. Plan accordingly.