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!

℘

Bootstrap 4 Help

Updated Oct. 30, 2020

If you’re tempted to add your own styles to a page you are making with Bootstrap CSS — stop and consult these pages FIRST. It’s so much better to work with styles that Bootstrap has already given us.

• Spacing — read everything under Notation to add margin or padding to any element
• Text — alignments, bold, italics, etc.
• Typography — make headings much larger, style pullout quotes and source attributions, and more — LOTS here
• Images — aligning them, centering, making responsive
• Buttons — make them bigger, smaller, full-width, etc.
• Colors — add the Bootstrap colors with these special styles
• Alerts — even more colors (lighter colors)
• Forms — all the styles for form controls, labels, etc.

Collapse is a Bootstrap replacement for jQuery hide/show.

Remember, all the things can be found in links on the left side of the Bootstrap Documentation pages.

IMPORTANT: The special layouts and devices such as the Carousel can be found on the Examples page. The code for those is in the GitHub repo on THAT PAGE — click the “Download source code” button and download the zipped repo file. Find the files you need by opening, in order, these folders:

1. site
2. docs
3. 4.5
4. examples

Happy Bootstrapping!

CSS grid and CSS flexbox

This week we start to learn about CSS grid. Last week, we learned about CSS flex styles. There are certainly times when you will be puzzled about which of these two choices is the best one for a particular design problem you are facing.

A CSS grid layout has one huge difference from a CSS flex layout:

1. When you choose grid, you want to arrange items in two directions, both rows and columns, inside a grid container.
2. When you choose flex, you will work with only one row, OR one column, inside a flex container.

You will still scratch your head over this choice at times, so here are two wonderful, free resources that might help:

• Grid by Example is a site with tons of examples of how to use grid layouts, with a handy visual arrangement that makes it easy to identify a pattern that might work for your design.
• CSS Flexbox Examples includes a bunch of sample layouts for distinct situations, like a photo gallery.

Flex actually has far fewer options, because with flex we are only arranging one row of things, or one column of things. So check this out: A Complete Guide to Flexbox.

For fancy, artistic grid examples, see Web Design Experiments by Jen Simmons.

CSS Grid resources

Ryan was kind enough to give us a demo of CSS Grid in class on Nov. 21. He recommended these resources for learning to use grid layouts:

• CSS Grid Changes Everything (YouTube video; demo)
• Grid By Example, by Rachel Andrew
• Firefox Devtools (Firefox has made major updates recently, and it provides great tools for working with grid)
• Firefox CSS Playground (a great visual intro to grid)
• A Complete Guide to CSS Grid, by Chris House

.

Using a background image

In your final project, some of you may want to use images in ways that seem awkward at first. Maybe you have forgotten that an image can be used as a background for any container-type element in HTML: a div, an article, a section, etc.

Here’s an example of the same image (one image) used to “cover” the background of three different-sized divs, with the image centered in each case. This is done with CSS. Robbins explained this where she talked about the background property in CSS.

Notice how I wrote white text over top of the image using normal HTML <p> tags.

Here’s the code (HTML and CSS only) for that example.

You’ll notice that Codepen is a site similar to jsFiddle, only more beautiful. It’s a good place for searching for solutions to tricky CSS and Bootstrap problems you need to solve. Just make sure you link to the exact Pen you used if you copy any code from Codepen! You may also embed the URL to the Pen in your CSS or JavaScript as a comment.

Do not steal code and fail to give credit to where you found it. Always include a complete URL for any copied code so that you don’t break the plagiarism rules.

Tips for Assignment 4 (CSS 2)

Be sure to also read this.

Common mistakes on Assignment 4:

1. If you start Part 2 before Part 1 is perfect and finished, you are making extra work for yourself.
2. You forgot to put box-sizing: border-box; into a CSS rule that includes margin and/or padding.
3. You used a width in pixels where a width in percentage would work better.
4. You did not clear your floats correctly.
5. You added too many declarations in a rule for one element. Less works better. Try to use the minimum possible to achieve what you want.
6. If your background color inside an element has “collapsed,” read the “TIPS” note under Part 2 (3.b) in the assignment.
7. text-align: center; is ONLY for text. Never use it to center an image or any other element.
8. You forgot that head, header, and h1 are all very different things in HTML.
9. We will never, ever use any color words in CSS. We use only hex codes for all colors.
10. We will never put CSS into the HTML file. CSS stays in its own file with the .css extension.

Updates inspired during class:

• If you’re having trouble with the header color being too narrow (top to bottom), have you specified a background color for the header?
• Floating left and right: Again, this concerns the header (and h1 and nav). Even though you’re working on Part 1, read the “TIPS” note under Part 2 (3.b) in the assignment.
• Clearing floats: You do not need to add a class or an id to the HTML to clear floats. Just add the clear property into the rule for the appropriate selector in your CSS.
• Trying to add some space below the white article box in Part 1? Using margin on the article element won’t work, because of margin collapse. Try adding padding-bottom to a different element.

Week 5: Sept. 18–22 (more CSS)

The videos this week will be very helpful for your homework — Assignment 4 — because I show you how to do all of the things that are required in the homework.

Margin, padding, and floats can become very difficult and very badly messed up if you apply them willy-nilly in your CSS. So take the time to watch me make HTML elements (such as div and article) behave exactly as I want them to, and you’ll be able to do the same.

Here’s the video list for this week.

These CSS skills are covered in the Robbins book as well, but sometimes seeing the results in a video is better than just reading about the way the CSS properties work.

Hurricane week updates (week 4)

Unless I hear compelling arguments from students in this class, I’m going to keep the deadlines and the syllabus unchanged.

We will have workshop hours on Friday from noon until 4 p.m. in Weimer 3020.

Note, please, that Assignment 3 is going to take more time to complete than the previous assignments.

You’re starting to use CSS on this assignment. Right now we are focused on using the background and color properties correctly. We have not yet covered fonts, margin, padding, and many other elements of CSS. Do not use what we have not covered.

The assignment requires you to use several HTML tags we have not used before: article, aside, header, footer, figure, and figurecap. It’s important that you use them correctly, as instructed in the assignment.

I sent a lengthy email to the class Listserv earlier today. Check your UF email to find it.

 

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.