Web Design and Development
DART/ENG 230

• CSS layout basics (float: position:) from Kira and Matt

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:

• 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

Next, here is an HTML file. We will add some CSS in class, so that the formatted version looks like this.

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.

• And, here are 10 Tips I came up with for use of images on the Web.

To practice we'll optimize this image:

Site maintained by John Beatty