CIS89A - 7. CSS Layout

From WikiEducator
Jump to: navigation, search
Blue Linckia Starfish.JPG

CSS Layout

Another major addition to web design included with CSS is extensive control over display layout. More complex layouts, dynamic page display and graphics presentation are supported.

Learning outcomes

  • include specific layouts within the page
  • format web pages for printing
  • explore additional CSS presentation features


  • floating, positioning, padding, margin, border, flexbox, grid

Reading guide

  • What are some of the additional display options available with CSS?
  • How can CSS be used to make page elements more visually interesting?


Coding project

  • css layout * include floating, positioning, padding, margin, border, flexbox, grid

  1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  2. Textbook - Willard 5-6. 5. Page Structure, 6. Positioning Page Elements

  3. CSS Layout - In a new coding project, demonstrate requirements using all the appropriate elements and tags within your project. Publish your HTML file.
  4. Submit the web address of your coding project to the CSS Layout assignment.
  5. Post a link to your coding project and any comments or questions about the assignment to the CSS Layout discussion.

  6. Galleries - Sometimes it is appropriate to display lots of images as a single web page. These are often called galleries. Find an example of a gallery. How are the images arranged? What steps has the developer taken to make the experience pleasant for the viewer? What would you do differently if you were building this gallery page? Post a link to the gallery site you selected along with your comments on the design, viewer experiences and suggested improvements to Image gallery discussion.

  7. Tech's Moral Void (audio podcast) - Lawyers and doctors have a code of ethics. Even journalists have them. So why not the tech sector, the people who create and design our very modes of communication? Listen to the podcast. What are two key points that stand out to you? How does this impact you as a global citizen and internet user? Hoe does it impact you as a web developer? Is this new information to you? Post your reply to the Tech ethics podcast discussion. Review the post of 3 others. Post at least one question to another post that will help your understanding of the issues.

  8. Professional web pages - Review the site you selected for the Learn from the Pros discussion in Module 1. Examine the source code for the site. (If the site uses a lot of JavaScript, select another site that relies on HTML and CSS.) How is this source code different from what you have been making? Is there code to handle mobile devices separately from desktop-size screens? What makes this web site more professional than what you are producing for the coding projects? How can you use some of these ideas and techniques to make your code more professional? Post a link to the web page that you like and give a brief description of what the professional developer is doing differently to the Learn from the Pros - Revisited discussion.
    Since web site accessibility is a subset of web site usability, one needs to ensure that the site is accessible as part of the aspects that ultimately make it usable too. Check the accessibility of the site you selected with on of the Free Web-Based Web Site Accessibility Evaluation Tools listed. Report the evaluation findings in your Learn from the Pros - Revisited discussion.

  9. Community Participation - Virtual "communities" are groups of people with common interests who share information, ask questions and have discussions online. Sometimes these are personal - family and friends, but many are professional or special interest groups. In the Community participation discussion, post a note about your online communities. These can be casual - Facebook groups, newsletters, discussion forums, or they can be more formal requiring members to join to participate.

  10. WebXR - Virtual/Augmented Reality - Although it would be nice to have a special viewer, you can still see the videos in a regular browser from your computer or phone. You won't get the full effect, but you will get the idea. Access the WITHIN site and explore. WebXR is an open specification that makes it possible to experience WebXR - VR (Virtual Reality)/ AR (Augmented Reality) in your browser. The goal is to make it easier for everyone to get into WebXR experiences. Just use your computer or phone without a headset. You won’t be able to see in 3D or interact as fully in most example experiences, but you can still look around in 360 degrees. View several of the experiences. Select one and post a link and short summary of your experience. How was this different from a regular video? Have you ever used a VR viewer? Is WebXR going to change how we experience audio and visual content? Post your reply to the WebXR Experience discussion.

  11. Group Project groups - Portfolios are the new resume. Who would you want to see your portfolio and why? What should be included? If you were a hiring manager, what would you want included? In your group discuss ideas for what to include and why this would be important. Use the Group Project groups discussions (pinned at the top of the Discussion page) to share your comments and suggestions. Note: This discussion is ongoing through out the course. You will have a partial score based on your participation to date.

Icon multimedia.gif


  • Textbook - Willard Chapters 5. Page Structure, 6. Positioning Page Elements


Understanding CSS Absolute and Relative Units
The units in which length is measured can be either absolute such as pixels, points and so on, or relative such as percentages (%) and em units.Specifying CSS units is obligatory for non-zero value...
How to use the position property in CSS to align elements
Positioning elements with CSS in web development isn’t as easy as it seems. Things can get quickly complicated as your project gets bigger and without having a good understanding of how CSS deals...
Flexbox Cheatsheet
A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. Fo...
Common CSS Flexbox Layout Patterns with Example Code | Tobias Ahlin
list of 10 example flexbox layouts with CSS that you can copy and paste to get started with your own layouts. We’ll walk through these basic layout patterns (click to jump to an example): Every e...
CSS Grid Layout
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. An HTML element becomes a gri...
CSS grid vs. Flexbox: Webflow layout tutorial - YouTube
video 4:00 When should you use flexbox? When should you use CSS grid? In this video, we lay out the similarities and differences between the tools so that you know what to use and when."
video 32:05 CSS Grid is now live in all major browsers, and with it everything we know about web layouts changes! The CSS Grid Layout Module introduces a native CSS grid system, provided at the vie...