Unit 2 Lab

This assignment will have you bring your wireframe to life as you begin programming your first site! Make sure to refer to the unit readings for helpful reference material as well as additional resources.

Description

Use what you’ve learned about HTML and CSS to bring your wireframe to life. Since you only have one week, we don’t expect your site to be fully finished and perfect. Instead, focus on completing the following main tasks:

  1. All 4 pages are present (even if incomplete)
  2. Each page has the appropriate metadata including:
    • Language (using the lang attribute of <html>)
    • Character encoding (using the charset attribute of <meta>)
    • Title (using <title>)
    • Linked stylesheets (using <link>)
  3. All images include alt text (using the alt attribute of <img>)
  4. All pages have a consistent menu or navigation bar
  5. All links are functioning
  6. Major design elements are present on each page (i.e., each page looks reasonably close to its wireframe)
  7. Some styling is present and is mostly placed in an external stylesheet
  8. Styling makes appropriate use of classes and IDs, as necessary

For now DO NOT use any templates or frameworks, we’ll get to that soon!

Below is a demo of a completed Unit 2 lab based on the sample wireframe from last week:

Refer to the recorded lecture below for a walkthrough of me programming the sample site as well as the completed code.

Once you’ve completed your site, record a short video sharing your screen. Start by showing us tehe wireframe you submitted and discussing any design changes you made as you were programming. Then, walk us through your code, tell us what were the greatest challenges as you programmed your site, and then show us your site live. Make sure to show us each page and click through your links to confirm they work. Use the inspect element feature of your browser to show us the alt text for each image on your site.

Tips

  • You can use placeholder images and placeholder text to fill the content of your site. For now, focus on making sure the HTML elements and desired placement are present and you can fill the actual content later.
  • As you program your site, remember to include comments for yourself so you remember what you did and why for future reference (trust me, you’ll thank yourself later)
  • If you’re searching for an IDE, below are some recommendations of free and simple text editors:

Recorded Lecture

The lecture below provides additional information on programming a site from scratch which you may find particularly useful for completing your assignment. However, if you feel comfortable with the material already, you may choose to skip watching this lecture. A copy of the completed code presented below is available here (you might have to right-click to save/download).

What to Submit

Submit your video ensuring your screenshare was visible and your audio or text annotations are clear and meet the requirements. Remember all submissions are done through Canvas.

Requirements

Video

  1. Video shows student’s wireframe
  2. Video presents student’s code for each page, including styling sheet(s)
  3. Video tells us student’s greatest challenges as they programmed their site
  4. Video show us student’s site live
  5. Video shows us all four pages live
  6. Video shows links being clicked through
  7. Video shows student using inspect element
  8. Video shows the alt text for each image on site

Code & Site

  1. Site includes all 4 pages
  2. The code for each page has the appropriate metadata including:
    • Language (using the lang attribute of <html>)
    • Character encoding (using the charset attribute of <meta>)
    • Title (using <title>)
    • Linked stylesheets (using <link>)
  3. All images include alt text (using the alt attribute of <img>)
  4. All pages have a consistent menu or navigation bar
  5. All links are functioning
  6. Major design elements are present on each page (i.e., each page looks reasonably close to its wireframe)
  7. Some styling is present and is mostly placed in an external stylesheet
  8. Styling makes appropriate use of classes and IDs, as necessary

results matching ""

    No results matching ""