Week 2

Advanced HTML & CSS, Accessibility

July 10: Review Quiz 3
July 14: Exercise 2

Unit Goals

Understand the differences between block and inline elements
Recognize the usefulness of the "box model"
Learn how to align elements to a visual grid with margins and padding
Learn how to employ custom classes that target specific HTML tags
Learn to use semantic HTML elements such as <header>, <main>, and <footer>

Last unit, you learned what HTML and CSS are and how they go together. This time around, instead of just styling some text, you'll start using HTML to help you create distinct "block" elements in your layout.

It's as simple as this: there are certain HTML elements that (by default) display on the page like blocks stacked one on top of the other. You didn't even notice this in Unit 2 because everything displayed vertically just like writing a Word document.

Headings, paragraphs, lists all appear as "blocks." But a link is "inline" because it doesn't interupt the flow of the text.

But we can give visual shape to these block elements on the page by applying colors, borders, spacing, and even by putting them side-by-side.

You will just need to know a bit about how these blocks function like little "boxes".

Watch the videos first to get a sense of how it all works together then review the material with McFedries.

Learning Resources

1. Review Last Week

Watch me build Exercise 1 (50 min, but you can skip around using the timestamp guide on the video)
Making use of "External CSS"

2. Follow Along While I Code

Manipulating blocks (30 min)
Advanced CSS (25 min)

3. Read

Start with Semantic HTML5 Elements Explained to learn about <header>, <main>, and <footer>.

From Designing Interfaces, 3rd Edition by Jenifer Tidwell, Charles Brewer, and Aynne Valencia

Chapter 4. Layout of Screen Elements
Chapter 5. Visual Style and Aesthetics

Read McFedries

Ch. 3 Adding Structure to Your Page (20 min., most of this is review)
Ch. 4 Formatting Your Web Page (30 min., some review but also new details)
Ch. 9 Styling Sizes, Borders, and Margins (40 min.)

Lastly, let's think about choosing colors. Read "A Simple Web Developer's Color Guide" by Laura Elizabeth from Smashing Magazine and integrate it into your css.

My favorite color palette tool is GoodPalette. It gives you a primary, an accent, and some neutrals. If you need some ideas for starting primary colors, though, you might want to try Coolors.co. These tools will give you the hex values to use in your code! Keep in mind, it's a safe bet to use a white background with your chosen color palette.

4. Review the W3 Schools

Using block & inline elements
Understand how your page is made up of (invisible) "boxes"
HTML + CSS class and ID

You should never apply styles directly to img in the CSS. It'll just mess things up once you have all sorts of different images on the page (like photos, logo, social media icons, etc.) Use custom classes instead!

Classes vs. IDs

In the era before the invention of semantic elements like <header> or <menu>, web developers used the ID attribute often to attempt to describe what type of content might be within a <div> on the page. It also was a part of a design philosophy in which ID was used to help write CSS for very specific (and big picture) parts of the page.

For example, I might still write <section id="welcome"> because I know there will only be one of them on the page.

However, developers have begun relying more on CSS classes to do most of the work because they're re-usable and you can stack classes together (<class="highlight center">) but you can't do that with IDs.

ID is a good way of labeling parts of a page you can jump to with a link <a href="index.html#unit01exercise"> where <#unit01exercise> is an ID applied to a header or section of content. (See the W3 Schools for more.)

So, for your projects you can stick to CSS classes. But it's at least worth knowing the difference.

Phew!

You should be ready to take this Unit's quiz on Blackboard! You can re-take it as many times as you need before the deadline (Wednesday July 10 at 11:59pm) to get 100%

Exercise #2

Scenario: Your favorite YouTube creator has asked for help creating a one-page website to promote their work to new viewers.

Choose any YouTube channel you enjoy. You'll need to hunt down some information for your page.

Sign-in to your Codepen account and create a new "pen" with the name Exercise 2 - YI (Your initials)
Copy-paste these CSS selectors from my project into your project's CSS window to get started.
Decide on a color palette that fits with the channel's branding.

The goal is to practice with the box model by applying colors, borders/outlines, padding/margins. You'll definitely need <header>, <main>, and <footer>. Ask yourself what kind of content makes sense in each of these parts of the page.

Content Requirements

The page content does not need to be in this exact order.

Want to host an image for use in Codepen? Try IMGUR!

GIF showing how to upload an image to IMGUR. Click Upload, drag your file, then when it shows up right click on it and choose Copy Image Address

Channel Name
A banner image for the header that's either a full-width image or uses the "hero" convention.
Brief "blurb" about the channel (30-ish words)
Three more short paragraphs of description, 100-ish words total
Two attributed quotes (using blockquote) from a reviews from viewers online (such as feedback from the comments or found on social media).

Video Embeds

Three YouTube video embeds that would be good for new viewers
- Each should be placed within figure
- Write a caption describing the video using figcaption
- Link the caption to the video
- A footer that includes the name of the channel, its URL, and a link to an associated social media account or website (if it has one)
- Make sure to use the videowrapper "small trick" from the video above to get the iframe embed to fit

Technical Requirements

Color Scheme: Determine some colors that you believe reflect the channel's visual brand; Use GoodPalette to follow Laura Elizabeth's guidelines for picking a color scheme, choose a neutral white for the body and main background, a dark for text, a base color to add some visual interest, an accent color for default links, a color when hovering links.; You can add another color or two from the palette—just don't go overboard.
HTML elements: Structure the page with header, main, footer; Use paragraphs, headings 1–3, emphasis, strong, lists (ordered or unordered), image, YouTube embed, and links (as needed); Ensure images have alt text and links have title text.; Apply HTML id="top" to main tag; Please do not center body, paragraphs, or list text.
CSS: Copy the provided example and ensure you use at least one property in each selector; Apply background colors, borders, margin, and padding to header, main, footer; One custom class (ex: .praise or .thumbnail)

Submit your CodePen link (by clicking Share ☞ Copy Link) to the Blackboard assignment by Sunday July 14 (11:59pm).