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.

Advertisements

Colors for web apps!

Screen Shot 2018-09-17 at 12.01.39 PM.png

This article is full of amazing resources for choosing a palette for your web app. In addition to the subtle palette shown above, they show 19 more examples from “Sites of the Day” chosen by aWWWards.

And that’s not all! Below the 20 inspiring examples, the article links to a bunch of free online tools for choosing and combining colors. For example, 0 to 255 lets you enter one color and see a huge sample of lighter and darker shades of that color.

Screen Shot 2018-09-17 at 12.09.02 PM

If you’re having trouble wrapping your mind around hexadecimal codes for color, watch this 4-minute video:

Last but not least: When choosing text colors, always make sure they have enough contrast against your background color to make reading the text easy. If you have any doubt about it, you can check the level of contrast here to make sure it’s good enough.

Things to do before class, Aug. 29

No workshop hours this Friday, Aug. 25. But if you want to meet with me, just let me know. I can be available!

  1. Get the book and read all the things listed on the Course Schedule under the Week 2 heading.
  2. Videos: The titles of the videos correspond to the assigned reading. The videos are listed in order here: YouTube Playlist. Watch the videos before class — they are the lecture.
  3. Complete Quiz 1 before it expires (in Canvas) — Monday deadline!
  4. Download, install and run the text editor program Atom before you come to class. Here’s some help for getting started with Atom.
  5. Bring your laptop and power cord and headphones/earbuds to class on Tuesday. Be prepared to stay the entire three hours (unless you complete Assignment 1 in less time than that).

During class you will be doing Assignment 1. I don’t intend to lecture you. (The videos are the lectures in this course.) My role will be to answer your questions and help you if you get stuck.

Assignment 1 is available now in Canvas. You can certainly preview it before class, or even get started on it.

Chapters 1 and 2 in the assigned book are background and foundation material. People who work on digital stuff — apps, websites, games, etc. — know these fundamentals. I hope you will want to understand them.

Chapter 4 is your first introduction to HTML. NOTE: Skip pages 51 and 52. You are NOT using either one of those text editor programs!

The exercises in chapter 4 will be very helpful for you. Consider typing them out — not merely reading them. Learning what is in chapter 4 is essential to completing Assignment 1.

There’s a sidebar about XHTML on page 61. Ignore that. This is one of the few outdated things in this book — we don’t do XHTML at all nowadays. Now everything is HTML5.

Things to do before class, Aug. 30

No workshop hours this Friday, Aug. 26. But if you want to meet with me, just let me know. I can be available!

  1. Get the book and read all the things listed on the Course Schedule under the Week 2 heading.
  2. Videos: The titles of the videos correspond to the assigned reading. The videos are listed in order here: YouTube Playlist.
  3. Complete Quiz 1 before it expires (in Canvas) — Monday deadline!
  4. Download, install and run your text editor program before you come to class. Links to text editors are near the top of the Course Schedule page. (Atom is my favorite.)
  5. Bring your laptop and power cord and headphones/earbuds to class on Tuesday. Be prepared to stay the entire three hours (unless you complete Assignment 1 in less time than that).

During class you will be doing Assignment 1. I don’t intend to lecture you. (The videos are the lectures in this course.) My role will be to answer your questions and help you if you get stuck.

Assignment 1 is available now in Canvas. You can certainly preview it before class, or even get started on it.

Chapters 1 and 2 in the assigned book are background and foundation material. People who work on digital stuff — apps, websites, games, etc. — know these fundamentals. I hope you will want to understand them.

Chapter 4 is your first introduction to HTML. NOTE: Skip pages 51 and 52. You are NOT using either one of those text editor programs!

I think the exercises in chapter 4 will be very helpful for you. Consider typing them out — not merely reading them. Learning what is in chapter 4 is essential to completing Assignment 1.

There’s a sidebar about XHTML on page 61. Ignore that. This is one of the few outdated things in this book — we don’t do XHTML at all nowadays. Now everything is HTML5.

Things to do, Sept. 2–8

You’ll be wrapping up Assignment 1 in time to meet your deadline Friday night. I will have open workshop hours Friday in Weimer 3219 — that is our original classroom. Just drop in any time between 12:45 and 3:45 p.m. I’ll be there, ready to help. Workshop hours are always optional.

Most of you have already turned in Assignment 1 (nice work!).

Please note that Quiz 2 is due on Monday, even though that is Labor Day. If I move the quiz deadline, everyone gets confused the next week, so the deadline is always MONDAY night. Of course, you can do the quiz early.

For Quiz 2, your reading assignments are listed under Week 3 on the Course Schedule page. You’ll be learning a bunch of new HTML tags this week. Try to figure out a way that works well for YOU to keep track of them — a paper notebook, a set of text files on your laptop, or just a set of HTML files that you create for yourself. You will refer to these many times during the coming weeks. Try to create an organized system to help yourself make progress.

There are nine videos this week. Six are named “HTML Basics,” and they cover chapter 5 in Robbins. One additional video (chapter 6) explains relative links, which students always seem to have a ton of trouble with. Two videos cover images (chapter 7). Quiz 2 covers all of this, but keep in mind that the quiz questions come from the book, not the videos.

In class on Tuesday, we’ll follow the same procedure as this week. Bring your laptop, earbuds, power cord. Be ready to work on Assignment 2, using all the new HTML stuff from chapters 5, 6 and 7.

Room Change

UPDATE: Class will meet in Weimer 3032 (the large room at the end of the atrium wing, third floor) on Tuesday, Sept. 1.

This is the second room we moved to on the day of the first class.

We will meet in this room every week — unless I tell you otherwise. There are two or three weeks when we will need to meet elsewhere. Don’t worry, I’ll keep you in the loop!

Bring your laptop, your power cord, and your earbuds or headphones.

I will bring one printed copy of the book that you can look at if necessary.

Things to do before class, Sept. 1

UPDATE and ROOM CHANGE: Class will meet in Weimer 3032 (the large room at the end of the atrium wing, third floor) on Tuesday, Sept. 1. We will meet in this room every week — unless I tell you otherwise.

No workshop hours this Friday, Aug. 28. But if you want to meet with me, just let me know. I can be available!

  1. Get the book and read all the things listed on the Course Schedule under the Week 2 heading.
  2. Videos: The titles of the videos correspond to the assigned reading. The videos are listed in order here: YouTube Playlist.
  3. Complete Quiz 1 before it expires (in Canvas) — Monday!
  4. Install and run your text editor program before you come to class. Links to text editors are near the top of the Course Schedule page.
  5. Bring your laptop and power cord and headphones/earbuds to class on Tuesday. Be prepared to stay the entire three hours (unless you complete Assignment 1 in less time than that).

During class you will be doing Assignment 1. I don’t intend to lecture at all. My role will be to answer your questions and help you if you get stuck.

Assignment 1 is available now in Canvas. You can certainly preview it before class, or even get started on it.

Chapters 1 and 2 are background and foundation material. People who work on digital stuff — apps, websites, games, etc. — know these fundamentals. I hope you will want to understand them.

Chapter 4 is your first introduction to HTML. NOTE: Skip pages 51 and 52. You are NOT using either one of those text editor programs! I think the exercises will be very helpful for many of you, so consider typing them out — not merely reading them. Learning what is in chapter 4 is essential to Assignment 1.

There’s a sidebar about XHTML on page 61. Ignore that. This is one of the few outdated things in this book — we don’t do XHTML at all nowadays.