Using max-width on an IMG (or any other element)

This refers to a question asked near the end of class today. It turns out max-width (for images) is covered in Robbins chapter 7, but in the latter part of the chapter that you were not assigned to read. I realize now that this was related to changes in the new edition of the book, because Robbins details how to use srcset and multiple versions of an image file, and I DO NOT want you to bother with all that, because in professional settings the multiple versions are created by automated software on the organization’s web server.

However, max-width is easy to use and very common, and it will likely help you in Assignment 4 (your second CSS assignment). It’s used for more than just images.

One of the easiest ways to use it is to make sure your image can automatically shrink in size if necessary.

img {
   max-width: 100%;
}

That would affect EVERY image on the page. Just add it to your CSS. If the image is inside a DIV or other element that changes in size on a smaller device, the image width will always be NO WIDER than the containing element. The image will not overflow its containing element.

Another common (and nice!) use of max-width is to constrain the width of an element holding text. On wide screens such as desktop computers, you don’t want the lines of paragraph text to be the whole width of that giant monitor. You want it to look more like a column. So you can apply max-width with rem or px to constrain the containing element, such as article. For example:

article {
   max-width: 700px;
}

Why 700px and not some other number? Well, maybe it’s because that width looks great with your images, depending on the width of the images — and whether they are inside the article or outside of it. In other words, there is no “magic number” of pixels or rems that is “best.” It depends on your content, your page design, your font size, etc.

Making sure your paragraph lines of text do not get too long is actually something that helps make your content easier to read. There’s something called optimal line length, and it affects the readability of your text.

Using max-width this way on an element containing text also allows it to shrink gracefully on smaller screens. If you use just width, it will not shrink. Note that this shrinking I’m referring to is completely separate from flex — not even using flex at all, max-width will allow elements to shrink.

Fall 2019 in Web Apps

Here are some things students said about this course (on the official course evaluation form) at the end of fall 2018:

This course had an assortment of resources and reference material. It let students not only prepare, but go beyond the scope of the course itself if they wanted to. The instructions for assignments were very well detailed and thorough. Reading material was always relevant. Workshop hours were great, especially having them at the end of the week when the deadline is coming fast.

I love the world of tech and coding, and I could tell from my first day in lab that Professor McAdams had the same interest and enthusiasm. Even better, she had the skills I was looking to gain. The class required a lot of effort; it was intense. I had to put in more time into this class than my more difficult classes, but it was worth it and it goes to show how much effort McAdams put into the course herself. Thanks to this class, I feel confident in the skills I have learned and I feel at a good starting point to keep learning and developing my front-end skills independently.

Intro to Web Apps is one of the most valuable classes I’ve taken in the j-school. I really got a sense of new skills that I could see myself using in career — even an entry-level position in digital editorial — that would set me apart from other applicants (or at least put me in the ranks of other journalism grads who have web design skills). The course-load was challenging with quizzes/a hefty amount of reading and videos each week, but the format of the class made sense for what we were learning, and it challenged me to come to lab as prepared as possible and soak in all the material in the way that worked best for me.

This class was really difficult for me and I hated it at times during each project, but each time I finished a new one I was so proud of my work and I’m so glad I have this new skill. I thought that all of the course materials were relevant and helpful to the assignments.

My favorite class of the semester. I learned so much!

Looking up tags, etc.

As I walked around the classroom last Tuesday, I saw a few students consulting the website named W3schools. I do NOT recommend that site. It is not the best one for accurate, up-to-date information about how to use HTML and CSS today.

In the sidebar of this course website, you’ll see a list of resources that I DO recommend. For looking up the right way to use HTML tags — and CSS selectors and properties — your first choice should also be MDN. You can get what you need in a Google search by adding mdn to your search terms. (I always search this way.) For example:

headings html mdn

If you find MDN not to your personal taste, my second recommendation is HTML Dog. It is reliable and accurate.

Note that W3schools is NOT associated with the official World Wide Web Consortium (W3C). Their name is misleading.

Page layout

Here is a wonderful example of page design that:

  • Enhances the story.
  • Does not use flashy gimmicks.
  • Is built with a framework (Foundation, which is similar to Bootstrap in many ways).
  • Adapts perfectly to all device sizes (try it in Chrome Developer Tools and see).

Screen Shot 2015-11-19 at 10.57.41 AM

Even if you are not especially interested in the people behind the Paris attacks, take some time to examine how the design serves the storytelling. There’s nothing unnecessary in this design.

The design itself helps to tell the story more clearly.

Observations from Assignment 3

Here are some things you need to think about and understand.

A CSS rule for body is a rule for most things

Several students had color: #000 for the body selector, and then later repeated color: #000 for other selectors such as article. This repetition is completely unnecessary. When you specify color in a rule for body, just about everything on the page will have that color. The same goes for background and font-family when declared in a rule for the body selector.

The only reason to include color in rules for selectors other than body is to change the color.

Avoid adding anything to your CSS that is not doing a job!

Elements: header, footer, article, aside, figure

Do we need a header element on every Web page? No. Do we need a footer element on every Web page? No.

When do we need them? When the structure of the document calls for them. Please try never to use any unnecessary tags or elements in HTML. If you have a simple single page — an invitation to an event, for example — it might have no header, no footer, no article, no aside, and no section — and it would be perfectly CORRECT.

Likewise for figure. On most pages, for most images, the simple img element alone will be just fine.

Use of comments in CSS

Many of you noticed a few comments I put into the CSS, like this:

/* add your pseudo classes below this line */

It’s very helpful for beginners to divide their CSS file with comments in this way, especially as the CSS gets more complex. I suggest you don’t go crazy and add too many comments, but a few — well placed — might really help you keep your CSS rules neatly organized. That can help you to avoid errors.

Use of comments in HTML

Of course, HTML has comments too. A few students went overboard with these. It’s good to write a comment if you think it will help you avoid a mistake later (if you come back to the file to copy some markup, for example). However, too many comments just clutter up the HTML, and they certainly do not look professional.

The link pseudo classes

The order of these in your CSS literally affects the way they work — in terms of whether users see the hover color, focus, active, etc. So it’s really important to get the order correct.

That said, most of the super-correct, standards-following Web designers today will write their CSS for links like this:

a {
    color: #2455c3;
    }
a:hover, a:focus {
    color: #487ffa;
    }

They style ALL anchors (the a element) one way, and then follow that rule with a change for only a:hover and a:focus. It is perfectly fine if you follow this example. But be sure to do it exactly as shown! You can add more declarations inside the curly braces, of course.

If you need to change link colors for part of a page — say, the footer — remember to use the selector in front of each a.

footer a {
    color: #2455c3;
    }
footer a:hover, footer a:focus {
    color: #487ffa;
    }

Double selectors are bad

What I mean by “double selectors” is that you wrote two separate rules for ONE selector. Say you have body at the top of your CSS, followed by a few declarations like background, color and font-family. That’s one rule for body. Then you have rules for article, aside, and some other selectors. And THEN you have body AGAIN. That is not a good idea.

Check your CSS carefully and organize it logically.

Soon you’ll see that we might create a rule for, say, the p element and later write another rule for p.special or aside p. That’s not the same as the bad double selector because p with a class, such as .special, and p as a descendant of aside are subsets — those selectors would affect some p elements but not all of them.

Tips after Assignment 2 (HTML)

How can you do better?

One great tip is to run your HTML through a validator. Robbins explains this on page 67 (chapter 4). The one I use is here — the HTML5 validator. Check the two options, select “Text Field,” delete the default in the field, and then paste in your entire HTML — from the DOCTYPE line at the top to the closing HTML tag at the bottom. Click Validate and see what happens.

Screen shot of HTML5 validator

Filenames and folder names: Professionals lowercase all filenames and folder names. Also, NO SPACES. Robbins says this explicitly on page 53. Your page will not validate if any image filenames have spaces in them, for example.

Making your content fit to be seen by others: A photo caption that says “Photo by Joe Blow” is okay (really that’s a photo credit). A photo caption that says “Original Photo Here” doesn’t look like something I would expect to see on a real website.

Choice of filenames: For any assignment, the main page in a folder can be index.html. For Assignment 2, recipe.html makes sense. Naming a file assignment2.html looks like homework. Think about your portfolio.

Text for the alt attribute value:Alternate text (also referred to as alt text) should serve as a substitute for the image content — serving the same purpose and presenting the same information” (Robbins, page 126). More here, from the W3C, keeper of all Web standards.

Editing a super-long URL: Any super-long URL is unwieldy, and also, it will often throw an error in the validator. I demonstrated how to fix this in the “Assignment 2 Part 2” walkthrough video, at 4:00 in the video. This editing is also recommended for links you click in social media, like this one:

See the question mark in the URL? That question mark and everything following it can be deleted:

That is a cleaner, shorter and better URL to share and to use on your Web pages. But a word to the wise: ALWAYS click the link on your page to double-check that it goes where you intended it to go.

Review of Assignment 1

What did you learn?

  1. Basic structure tags and elements, their correct order and use: DOCTYPE, HTML, HEAD, BODY
  2. Required elements inside the HEAD, and the correct order for them: META charset and TITLE
  3. Correct use of these text elements: H1, H2, P, BR, IMG
  4. Correct use of two attributes required inside IMG: src and alt
  5. Ensuring that images you choose from Wikipedia can be used legally on your pages; getting the correct URL to prove it.

Please make notes on these and don’t forget how to use them! You’ll be using all of these every week.

In future assignments, errors in using any of these will cost you dearly.