Fall 2022 TECH 272: Week 3

Review: CSS Cascade, CSS Selectors & CSS Reset | Intro to Images | Intro to Using Fonts in HTML & CSS  | HW: 501c3 "Donate Now"

First, we'll start with a quick review of concepts from last class, including thinking about DIVs as containers; following proper naming conventions, etc.

We'll also review when we use class vs id.

Then we'll talk about the value of CSS Resets - what they are; how we use them; why we use them, and more:

 

 

Next we'll talk about using images in HTML in 2 ways.

-------------------

1. Images inserted directly into a web page

These images can be located on your project's directory or from an external site. To do this, we use the HTML tag <img>.

The <img> tag creates a holding space for the image using its source attribute ("src").

<img> is an empty element and needs dimensions added to make it show on a web page.

<img> contains two required attributes:

src - Specifies the path to the image

alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed

examples:

<img src="image.gif" alt="The Image" width="128px" height="128px">

<img src="images/image.gif" alt="The Image" width="128px" height="128px">

Note that the 2nd example is calling for an image in a folder different from the location of the HTML file - in this case the image is stored in a folder called "images".

Note too that saving your images in a common folder is a best practice, while linking to images on other sites is usually a bad idea.

Given that the above examples work, we can improve them.

See how this is the wrong way to do it:

<img src="smiley.gif" alt="Smiley face" width="42" height="42" style="float:right">

This is the right way to do it:

HTML

<img src="smiley.gif" alt="Smiley face" class="main-icon">

CSS

img.main-icon
{
width: 42px;
height: 42px;
float: right;
}

See? I gave it a class name, so I could select it with CSS and then style it. This way, the styling is *separated from the HTML*, which as we discussed is usually a very good idea.

When using images in a web page you can use these formats:

2 - used as the background image for a container such as a DIV

Images can be used another way as well: with CSS only. For example, we can make an image show as the background for a DIV, or a nav bar, or other container.

The same image formats as above all apply here as well. The main difference is that to make an image a background of something, there is no call to the image's SRC in the HTML; instead, we select the container & set it with CSS.

Note that when we add an image this way, anything else in the parent (containing) element will sit directly on top of it, whereas with an image added as an <img> in the HTML, any object in the parent will flow above, next to, or below the image.

In other words, the CSS-only approach takes the image out of the document flow.

 

Search engines read image filenames and count them towards SEO. Therefore, you should give your image a descriptive filename:

dinosaur.jpg is better than img835.png.

 

HTML & CSS | Don't Hard-Code Image Values

Using Google Fonts Example

This Week's Class Links & Assets

 

Quick Note about CSS font-size:

Rememebr the close relationship  between font-size and line-height (the latter is often refered to as “leading” in print.) The font-displays at a certain size and the line-height determines how much space is between each line in your text.

It depends on the look-and-feel of your work, but I generally aim for a font-size/line-height ration of 1:1.25. So if my font size is 16px, I’d check its line-height at 20px (20 = 16 + 4).

Look at the line-height here: it’s too small a value and the lines are too close together, especially given the extra lines inferred by the serif font. Inspect it in devTools and try a different value to get something that looks better.

https://knightlab.northwestern.edu/posts/

 

google fonts
https://fonts.google.com/

 

 

NIKE Ad

 

 

 

Prototype for HW (“Donate Now”):

 

This Week's Homework Readings & Videos

Images in HTML
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML

CSS Background Image – With HTML Example Code
https://www.freecodecamp.org/news/css-background-image-with-html-example-code/

CSS background-repeat
https://css-tricks.com/almanac/properties/b/background-repeat/

 

FONTS

How to use Google Fonts in your next web design project
https://www.freecodecamp.org/news/how-to-use-google-fonts-in-your-next-web-design-project-e1ad48f1adfa/

Get Started with the Google Fonts API
https://developers.google.com/fonts/docs/getting_started

What Is a “Font Stack”?
https://www.thoughtco.com/font-stack-definition-3467414

This Week's Homework Assignment(s)

HW ASSIGNMENT: “Tech 272 Fall – Week 3: 501c3 Donate Now

DESCRIPTION
For this assignment you will create 2 versions of a “Donate Now” section for your 501c3, each of which uses the same 7 to 9 pieces of information of your choice pertaining to your 501c3.

For example, the Nike ad (under assets on our class website) has 9 individual pieces of information conveying its overall message:

– make yourself

– fit

– photo of woman running on road

– get fit

– Nike free xt

– start … technology

– Nike free xt quickfit

– nikewomen.com

– nike logo

Your equivalent approaches will each use 7, 8 or 9 pieces of similar information (it’s up to you). At a minimum you’d have the name of your 501c3; a headline; a background image; an image; and a call to action (“Donate Now” is an example of a call to action – yours may be different.)

That’s 5 right there. So you have to add more information to get to the number we want. Ask yourself, What’s missing – url? social media icons? Secondary headline? body text to tie-together all the informational elements? etc.

LESSON GOALS

The main goal of this lesson is to explore giving a personality to your sites by adding external fonts as well as imagery. These are skills you will use every day as a modern designer/coder.

The secondary goal is to get used to the different techniques to add imagery to your pages, as well as choosing the right type of imahge for the task.

The tertiary goal is to explore more closely the relationship between font size and line height.

 

 

GUIDELINES
This is due in full by the beginning of class on 9/22/2022.

As usual, you must follow the approach laid-out in this assignment. Any other work cannot be accepted for a passing grade.

You will add comments to your HTML and CSS as discussed in class. This includes but is not limited to DIVs, CSS, etc.

Your id and class names must be added following the standards what we’ve covered.

You will use 2 google fonts for each selection: 1 font for headlines and 1 for body text.

You will usee the CSS @import approach to load your google fonts.

The choice of content is up to you.

You will convey 7 to 9 pieces of information in each section.

You will code each of these as HTML elements accordingly (h1, h2, lists, image, etc.) For example, “Donate Now” may be the most important headline on the page, so that’d be an h1.

You will use a to make part of your text catch the eye, like “Nike FreeXT” in the Nike ad

Note: your are not resposible for positioning text in each version as we’ve not covered it yet. In other words, it’s OK for now if the natural flow of your document is from top to bottom.

Each version will use a background image using the method we covered in class.

Each version will use an inline image using the <img> method we covered.

This image will have text that floats next to it.

Each <img> image will use the approach we discussed:
width: 100% / height: inherit / max-width: 120px; (the last value is determined by your layout)

Each version will display next to each other in the bare-bone pen I provided (see the “Nike” at the assets section of this page.) That is, I added CSS to make a basic 2-column grid – 1 design approach goes in the left, 1 goes in the right.

This 2-column grid is currently named “main-holder” – you will change it to a better name.

Each version will be designed for different audiences of your choice. That is, you are doing 2 versions – the 1st might be for people age 20-35 who live in the city. The 2nd might be for people aged 40-60 who live in the suburbs.

The imagery, CSS styling, fonts, etc., must be different in each version to refect these different audiences.

(How do you design 2 different approaches, especially when as a student you have little-to-no design experience yet?! Start with typography and photography. It’s a powerful combination – choosing the right font combination to match the right images to match the textual content is a major skillset in the toolkit of a modern coder. These are skills that transfer flawlessly between print and digital in any kind of industry.)

DELIVERABLES

As before, you will send me an email with a link to the work.

Subject: Tech 272 Fall – Week 3: 501c3 Donate Now

 

Course Syllabus

Here's the course syllabus: learn it, live it, love it.

Please Remember

You are responsible for reading all of the content I provide each week on our class website (notes, explanations, articles, links, videos, code examples, etc.)

Please note also that turning in work up to one week past the due date is OK but will receive a reduced grade. After 1 week, it will not receive a passing grade, FYI.

Finally, all assignments must follow the guidelines laid out - variations will not receive a passing grade, FYI.

Course Lessons

Links to lessons will be activated the week of their occurrence.