First, we need to assign the CSS handcoding. It is due Oct. 17. Take a look back at the CSS links on the Sept. 18 page. Also, you have handout “cheat sheets” on CSS and CSS layout (today) from About.com. Keep reading the CSS chapters in HTML & CSS: 11, 12, 13 and add 15 (CSS layout). Here's my evolution of layout Prezi.
And here is the direct link to Brackets.
Then we will look at these models for CSS layout:Next, here is an HTML file. We will add some CSS in class, so that the formatted version looks like this.
- Two columns with float: from Adobe
- Absolute positioning and float: from HTMLDog
- Positioning types from Digital Web (scroll down to link for example document)
- Float with footer that I did at a workshop
- CSS floats 101 from A List Apart
- How floating works from bitsofco.de (Bits of Code; what country is the URL from?)
- Learn Layout
- Comparing four approaches: tables, floats, templates (Bootstrap) and Flexbox. Flexbox we will address later, but here is a good intro or this from Sitepoint
Today’s next topics are images and JPEGs in Photoshop. Reading for today is HTML & CSS chapter 5 for images and chapter 16 for images in CSS.To practice we'll optimize this image:
- And, here are 10 Tips I came up with for use of images on the Web.
And here is Video #4 to get started on the CSS assignment
Site maintained by John Beatty