Problem Set 02: Hello World

Due 09-27 (7 days)

These sketches you will get familiar with HTML and CSS. We will look at the design and construction of these web pages. To encourage divergent and exploratory thinking, you can present up to three solutions. We will also be looking at the source of these pages. Because we are using CSS, you should reuse the same HTML to produce the three sketches.

For this assignment you are expressly forbidden to use Javascript.

These exercises are designed to be approachable for beginners. Because we have a diverse classroom, learners with more experience are expected to:

• Assist, coach, and encourage first time practitioners.
• Go beyond the the minimum expectations.
• Provide inspiring and exemplar solutions.
• Take more risks, look for counter-examples & edge-cases, and fail in public.
• Provide a written summary or explainer of your work, especially if you are using techniques or topics we haven't gone over in class.
• Include great navigation between pages of your problem set.

Reading:

Even if you are familiar with HTML & CSS, it will probably be useful to review some of the keys ideas in this set of reading:

• HTML Basics from the Mozilla Developer Network. (MDN)
• CSS Basics from the Mozilla Developer Network.
• Web design in 4 minutes by Jeremy Thomas
• Eloquent JavaScript: Intro
• Eloquent JavaScript: Chapter 12

Optional Reading & Reference:

• A la carte tutorials at marksheet. Start with HTML basic and CSS basics. Let your mind wander from there.
• Browse the MDN HTML Element reference. There are many esoteric HTML tags defined here. Explore the examples using code pen
• Browse the MDN attribute reference
• Read the MDN CSS Layout guide
• Learn about Flexbox layout. from MDN.

ps-02

• 2016-SWC/ps-02/index.html.
  • Include your name, the date, and the problem set number (ps-02).
  • Include links to each of the exercises below.
  • Style this index page using CSS.
  • 15 points.

a: (1-3) 'profile cards':

These pages should be like business cards, brief personal profiles, or pokeymon cards. If you are not comfortable making a card for yourself, feel free to choose a fictional character.

• Each page should include:
  • An image tag. A drawing or photo of the subject.
  • A heading tag. The headline: e.g. 'Noah Paessel'
  • A smaller headline tag. The secondary heading. e.g: 'Coach'
  • A small paragraph of text. Possibly 1 - 4 sentences, or contact information, or a table or chart of special abilities.

b: (1-3) Compositions of 3 squares:

Create web sketches consisting of exactly three squares. Work in monochrome. The design markup of these pages should be composed empty <div> tags. You can include optional navigational or informational markup, but it should be well considered, and not detract from the composition.

c: (1-3) Quiet & Loud:

Create the loudest (or quietest) web page you can, in monochrome. Use clean, minimal markup. What would a subliminal page look like? A page with a hidden message?

d: (optional) Tag explainer:

Create a web page that demonstrates and explains an unusual HTML tag.

For stretchers:

• Above pages should be easy to navigate.
• Pages should look good on a multitude of devices.
• Bring something new or surprising to the table.
• Go down a rabbit hole, and be prepared to talk about it.