Unit 2: Web Programming Basics

Unit Essential Questions

You should use the questions below to assess your own learning and understanding of course material. These questions are also a good method of organization if you’re taking notes.

Dev Tools

  • What are browser developer tools?
  • What can I do with developer tools?
  • How can I better develop sites through trial and error?

HTML

  • What role does HTML play in creating sites?
  • How do I program a basic website using HTML?

CSS

  • How do HTML and CSS work together to create sites?
  • How do I program a basic website using HTML and CSS?
  • What is the CSS box model and why is it useful?
  • What are different ways to group and position my HTML elements?

Unit Readings

Developer Tools

HTML

CSS

CSS Box Model

CSS Basics

Preparing for JavaScript

Given that this course has CS pre-requisites, we’re assuming you’re comfortable with progamming basics such as variables, loops, and functions. We’ll start talking about JavaScript soon so if you’d like to review some programming basics within the context of JavaScript, you may refer to the material below:

Unit 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

Additional Resources

Dev Tools

HTML & CSS

General Reference

Lists

Tables

Forms

results matching ""

    No results matching ""