Overview
Create a responsive web page with handcoded HTML & CSS.
The page may have whatever topic and design you like. You may use
Bootstrap or another framework as a base for your design (in fact, you
are encouraged to), but you must also include a hand-coded custom
stylesheet (typically named custom.css
) which overrides
your base framework to individualize your design. Make sure you link
to this page after linking to your base framework so the styles
will cascade properly.
You do not need to demonstrate artistic talent, but your page does need to have a neat, professional appearance. Think of dressing for a job interview: not everyone has a great fashion sense, but everyone can put on a clean, well-ironed suit. If you have a flair for design, feel free to show it! If you don't, override an existing framework with a light hand, taking advantage of the design resources we discuss in this course.
Why do we do this?
Knowing HTML and CSS will enable you to make small overrides to your web sites, social media themes, catalogs, etc. without needing to ask for help. It will also give you an understanding of what's possible (useful in advocating for your organization's tech goals!) and why we use higher-level frameworks (CMSes, Bootstrap, etc.) to let us get more and higher-quality work done in less time.
Having these skills will give you the context for understanding the rest of this course. In addition, we will use this page as a base to iterate on for the web site version 2 assignment. In the real world, tech projects often start with a minimum viable product and then iterate as we discover bugs and our users' actual needs, so we're going to follow the spirit of iteration here, too.
Deliverables
- Your HTML file (one page is sufficient);
- Your custom stylesheet(s);
- Any images, scripts, or other assets your page needs to work.
Turn these in as a zip archive (make sure when I unzip it, the links from your HTML file to your stylesheet and assets will still work!). Turn your zip file in to the appropriate Learn@UW dropbox.
Grading criteria
Your page must...
- Validate for XHTML or HTML5, using validator.w3.org.
- Be responsive, with breakpoints for phone, tablet, and desktop sizes (in bootstrap3 these are 480px, 768px, and 992px, plus you get a large-desktop version for free). I strongly recommend you use Bootstrap or another framework to achieve this, but you are welcome to hand-code all your CSS if you prefer. The content and layout may change at each size, but should be presentable and coherent.
- Be clearly organized, via headers, subheaders, and/or nested divs, as appropriate to your content.
- Include at least one link, image (properly attributed, with alt text), header, paragraph, and list (either ordered or unordered is fine, as appropriate to your content).
-
Include a relevant and clear comment. (HTML comments start with
<!--
and end with-->
. In between, they should say something about your structure or content that will be helpful to future developers - e.g. labeling where sections start and end (this can become unclear with complicated structures) or explaining why you made particular choices, especially if you had to think for a while about what the right choice was.) -
Link to an external stylesheet in the
head
— no inline styles! - Use divs, not tables, for layout. (Tables are permitted if you have genuinely tabular data to display, but may not be used for overall layout.)
If you are using Bootstrap or another framework, you must...
- Serve from a CDN.
- Demonstrate thoughtful use of built-in framework classes.
Your custom stylesheet must...
- Demonstrate element, ID, and class selectors.
-
Use at least five distinct CSS properties — your choice which.
Not sure which to try? The properties I find myself using most often
are
font-family
,font-weight
,color
,background
,margin
, andpadding
. (Sometimes I use them in more specific forms, likebackground-color
,padding-top
,margin-left
, etc.)
If you are looking for additional challenge, try one of the following: pin your footer to the bottom of the page, so that the page always stretches to at least the height of the browser; do a 2-column layout where both columns stretch the full height of the page (use different backgrounds so you can see that they have); apply CSS transitions; use the Bootstrap Javascript components.
I take for granted that all work in this course will show solid English writing mechanics, and will penalize if it does not.