Fall 2022 TECH 272: Week 4

Review of CSS & Fonts: Font-Size & Line-Height | More About Using External Fonts | HTML: The Value of Semantic Elements | HW: Semantic HTML Resume

This week we'll have a quick review of using CSS with fonts in a webpage, specifically the way we use "font-size" and "line-height" together. Understanding their relationship will make a big difference in your design+dev skills: layout, UI and more.

After that we'll discuss more about coding semantic HTML - what it means, why it's a big deal, why you should do it.

We'll talk briefly about using code snippets with any language you write. There are a tremendous time-saver and goes to the heart of DRY.

We'll get a quick introduction to DreamWeaver as to its pros and cons, then we'll start on the HW - a semantic HTML resume.

CSS font-size & line-height

Remember 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 ratio of 1:1.25, so if my font size is 16px, I’d set its line-height at 20px (20 = 16 + 4).

As an example, look at the line-height at this link - 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/


As we're getting used to choosing fonts, let's compare a few oft-used fonts:

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


We'll also talk about "semantic HTML" -

HTML | Intro to Semantic Elements


The Value of Snippets


Making Links


We'll also start talking about using Adobe Dreamweaver.

As you consider whether to learn and use DW as part of your professional toolkit, I will offer some pros & cons to consider. Note: I suggest you ask your other tech professors their opinion on the topic, especially if they are real-world coders.

This Week's Homework Readings & Videos

What is semantic HTML and why is it important?
https://medium.com/weekly-webtips/what-is-semantic-html-and-why-is-it-important-8d90cfaf5803

HTML semantics cheat sheet
https://learn-the-web.algonquindesign.ca/topics/html-semantics-cheat-sheet/

A Look Into Proper HTML5 Semantics
https://www.hongkiat.com/blog/html-5-semantics/

HTML Semantic Elements
https://www.w3schools.com/html/html5_semantic_elements.asp

Dreamweaver – Tutorial for Beginners in 12 MINUTES!

DW Reuse code with snippets
https://helpx.adobe.com/dreamweaver/using/reuse-code-with-snippets.html

https://www.creativebloq.com/adobe/dreamweaver-web-design-tool-121518352

Is Dreamweaver Still Used?

How to Create Sublime Text Snippets

This Week's Homework Assignment(s)

HW Week 4: Semantic HTML Resume

For this assignment you will create a semantic HTML version of your resume. It will say the kinds of things about you an interviewer will want to hear about.

It will be based on a fork of this pen:

ASSIGNMENT GOALS

The primary goal of this assignment is to gain experience working with semantic HTML as we organize and present our information. Also more time spent on CSS.

The secondary goal of this assignment is to get some experience working on your resume – what you want to say, to whom, etc.

The tertiary goal of this assignment is give you a chance to look at what we’ve learned so far in this brief semester and see what is not as clear to you as you’d like.

GUIDELINES
CONTENT

– you must break-down your message into 6 sections for which we’ll use the HTML <article> tag: Statement, Skills, Experience, Contact, Goals, Your Choice

– each will have a similar look and feel

– on each you will replace my text with yours

– you will change the headline of each <article> to the text of your choice

– you will code your information accordingly as we’ve covered in class – h1, h2, p, ul, img, etc.

— Statement
Here you’ll use the photo of your choice (you can use a movie star or someone if you don’t want to use your pic.)

You’ll also have at least 2 paragraphs of text as an “elevator speech” describing overall who you are and what you want to do for work.

— Skills
Here you’ll add a quick paragraph summarizing what skills you have, software you use, etc.

These skills will be presented as an unordered list and will display vertically.

— Experience
Here you’ll add a quick paragraph summarizing what experience you have: job, volunteer, internship, etc. If you don’t yet have much experience, you can invent a job or two you’ve had.

These experiences will be presented as an unordered list and will display vertically.

— Contact
Here you’ll add basic contact info: email; phone; website, etc. Don’t use your own info here, to protect your privacy; instead, make something up.

— Goals
Here you’ll add a quick paragraph or two summarizing what kind of job you want to get, and why. Compare this with the Statement, which is generally describing who you are and what you want to do, while this is a chance to be more specific about what you want to do as a professional.

— ???
Here you’ll add whatever information you think is missing from this resume. Education? Awards? Links to work? Travel? Something else? It’s up to you so long as it pertains to this assignment and is not used in the content above.

 

NAV

– your navigation will be presented as an unordered list of 6 items and will display horizontally.

– you will turn the nav text into links, each pointing to an ID in your HTML, which you will add. (Note the comment about this in the CSS)

– You will change the text of the links to whatever is appropriate

– you will make sure the links jump to the proper location on the same page

CSS

– you will choose colors of your choice

– you will demonstrate the CSS background-image technique

– you must use 2 google fonts, 1 for headlines and 1 for body.

– you must use the CSS @import command to load them into your page.

– you will make sure the font-size and line-height throughout is readable according to standards

– you will change any id and class names in the HTML and CSS to something appropriate to this type of project (in this case, a resume) and make sure your styling still works after you do so

– the Statement image will use the technique we’ve discussed in class about 100% width (and related lines of CSS such as float:)

DELIVERABLES

This assignment is due at the beginning of class a week from this Thursday.

As usual, you will email me the link to your homework.

Subject: Tech 272 Week 4 HW: Semantic HTML Resume

 

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.