CIS89A - 6. 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



Keywords

  • 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?


Assignments

Coding project requirements - CSS for layout

  • floating, positioning - text and images, padding, margin, border
  • flexbox


  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 - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
    * Chapter 15 Using CSS for Page Layout . Chapter 16 Layouts with CSS Grid and Flexbox

  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 - 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? What are two key points that stand out to you? How does this impact you as a global citizen and internet user? How does it impact you as a web developer? Is this new information to you? Post your reply to the Tech ethics discussion. Review the post of 3 others. Post at least one question to another post that will help your understanding of the issues.
    https://www.cbc.ca/radio/ideas/tech-s-moral-void-1.5056316 ..updated 20may23

  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.
  9. 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.
  10. Change over time - Search for your Pro site in the Internet Archive and look at some of the old versions - use the timeline bar at the top of the page display to move to different views by date. What are some of the major changes over time? Have there been new features added? How has the overall "look and feel" changed? Add a note to your Learn from the Pros - Revisited discussion.

  11. Privacy, online identity, digital footprint - Digital Footprint - the record or trail left by the things you do online. Your social media activity, the info on your personal website, your browsing history, your online subscriptions, any photo galleries and videos you’ve uploaded — essentially, anything on the Internet with your name on it. Just like a tattoo, your digital reputation is an expression of yourself. It's highly visible, and hard to remove. What is one thing that you will do differently having reviewed this list? Post ONE sentence in the Digital Footprint discussion.

  12. Success Skills - Protect it - Digital Citizenship. Review 2-3 articles from the Success skills PROTECT list in the Media section below. Pick one article you would recommend. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Protect it discussion.

  13. Community Participation - Virtual "communities" are groups of people with common interests who share information, ask questions and have discussions online. Many are professional or special interest groups. These can be casual discussion forums or more formal requiring members to join to participate. If you don't participate in a "community" try searching in Reddit or Twitter for a group that interests you.
    In the Community participation discussion, post a note about your online communities.

  14. New normal - XR - eXtended Reality - Augmented Reality (AR) and Virtual Reality (VR) alternatives are being developed to replace in-person experiences. Shopping, spectator sports, live entertainment, school are a few. Find an example of eXtended Reality (XR / AR / VR) - either currently available or proposed. Include the link and a brief explanation of how you personally will be impacted by this development, and post to the New Normal - XR (eXtended Reality) discussion. Review and comment on 2 others.

  15. 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.

  16. Modules 1-6 Midterm Review - This is about the middle of the course. We have covered a lot in a relatively short time. Think about the CIS89A Web Development course so far. In the first 6 modules of the course, what was one pleasant surprise? What is one question that didn't get answered? What is something that YOU can do that will improve your course participation? Submit your comments and questions as the Modules 1-6 Midterm Review assignment.


Icon multimedia.gif

Media



Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 15 Using CSS for Page Layout . Chapter 16 Layouts with CSS Grid and Flexbox


Examples Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x6layout: Error parsing XML for RSS


FLEXBOX Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/flexbox: Error parsing XML for RSS


Mixed Reality (xreality) Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/xreality: Error parsing XML for RSS


PROTECT Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/protectit: Error parsing XML for RSS


Retrieved from "https://wikieducator.org/index.php?title=User:Vtaylor/CIS89A_Learning_Web_Design/CSS_Layout&oldid=1107697"