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:
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
Here’s the code (HTML and CSS only) for that example.
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.
Building personal projects is the best way to get better at code and front-end development. Here are two personal projects I made with Bootstrap 3 (note: NOT 4 — they are older).
You’ll find a link to a complete GitHub repo at the bottom of each of those, so you can see the code if you’re interested.
Each of the examples also has a README at GitHub if you’re curious about the why and how of it.
Be sure to also read this.
Common mistakes on Assignment 4:
- If you start Part 2 before Part 1 is perfect and finished, you are making extra work for yourself.
- You forgot to put
box-sizing: border-box; into a CSS rule that includes margin and/or padding.
- You used a width in pixels where a width in percentage would work better.
- You did not clear your floats correctly.
- 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.
- If your background color inside an element has “collapsed,” read the “TIPS” note under Part 2 (3.b) in the assignment.
text-align: center; is ONLY for text. Never use it to center an image or any other element.
- You forgot that
h1 are all very different things in HTML.
- We will never, ever use any color words in CSS. We use only hex codes for all colors.
- 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
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.
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.
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.
For handy reference, here are the descriptions of this week’s videos.
To keep your work organized when managing web files, you must be able to see the file extensions on your computer (.html, .jpg, .gif, etc.). Turn them on and leave them on!
“Hour of Code” is an international effort to get people of all ages to try coding for themselves. The official dates for the big promotion are Dec. 5–11 this year — but the Hour of Code tutorials are online (and free) year-round.
Hour of Code tutorials
You can choose by grade level (even pre-schoolers can play), subject matter (e.g. “language arts”), and length of time. Most tutorials can be completed in an hour or less.
Tip: If you get others to take a leap and try code, you might find yourself in the role of teacher. Guess what? By teaching, you learn more yourself. Give it a shot!
If you want to see demonstrations of what jQuery can do — with just a few lines of code! — view these examples. These are complete files, not jsFiddles. You can copy and use any of this code. This is a GitHub repo with several nifty example pages.
In addition, here are some of my fiddles with brief jQuery examples:
Don’t forget — the perfect place to look up a jQuery function is the official jQuery site.