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:

.

Advertisements

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.

Screen Shot 2017-09-17 at 2.22.58 PM

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.

Great advice about breakpoints

When you’re coding @media queries, you choose breakpoints. Many of you take the easy way out and write just one @media query. If you do that, and your max-width is small (600px), people with tablets and even small laptops might see a very bad-looking version of your page.

This article recommends using these numbers for @media queries: 600px, 900px, 1200px — “and 1800px if you plan on giving the giant-monitor people something special” (which you don’t have to do).

screen-shot-2016-11-22-at-9-15-54-am

I often code only one @media query (usually max-width: 800px) because I tend to be lazy, and I’m only making examples for you guys. But if I had a paying client, I would write two @media queries for any app — one for phones (max-width: 600px) and one for tablets (max-width: 900px). Lots of people do use tablets much of the time, so don’t forget about them.

I would also make sure my page layout does not get wider than 1200px (that way it doesn’t look stupid on a 27-inch iMac screen) — and I would do that with a container DIV, not a @media query.

A responsive, live-updating site

This “Live Fact Check” site from National Public Radio is highly responsive and very well designed. You should check it out on desktop, phone and tablet, and compare how it adapts to all sizes. The NPR Visuals team is well known for producing excellent online and mobile apps. The site was also embeddable by NPR member stations.

npr-debate

Update (Sept. 28): This behind-the-scenes article explains how NPR managed the process of live fact checking through this app, using a Google Doc (!) — so creative!

How NPR factchecked the first presidential debate in realtime, on top of a live transcript

Note that 6 million people used the app, and “people coming from mobile actually stayed four minutes longer than people coming from desktop,” according to the article.

A nice example of a single-page Web app

This is as good as it gets: NPR’s annual roundup of the best books of the past year is an ideal one-page app.

NPR’s Book Concierge

npr_books_mobile

Above: Mobile screens. Below: Desktop, with one book selected (third from left). Fully responsive design, using Bootstrap.

npr_books_desktop.jpgnpr_books_desktop_modal

Above: Click any book and get this modal overlay, which you can also use to simply browse all titles. In a single-page app, you never leave the original Web page.

They have merged all their JavaScript into one minified file. Separately, they have merged all their CSS into another single minified file (plus two separate font-handling files).

At the bottom of the HTML source, you can see the entire dataset for all the books in the form of a minified JSON object.

The HTML is super-clean and readable. If you have used Bootstrap, you can understand it completely.

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.