CIS89A - 6. CSS Layout
From WikiEducator
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
- 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.
- 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
- CSS Layout - In a new coding project, demonstrate requirements using all the appropriate elements and tags within your project. Publish your HTML file.
- Submit the web address of your coding project to the CSS Layout assignment.
- Post a link to your coding project and any comments or questions about the assignment to the CSS Layout discussion.
- Accessibility - Web site accessibility is an important consideration for making information available to all internet users. It is the developers' responsibility to accommodate a wide range of users regardless of the users limitations, including but not limited to hearing, sight, mobility, display device, ... Find a resource that addresses HOW to make a web site accessible to accommodate one or more of these limitations. Post the link and a brief summary of the limitation and what needs to be included in the code to the Coding for Accessibility discussion. Review 2 others.
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
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
- CSS Layout Project
- Floating and PositioningThis is a floated left div.PositioningThis is a positioned righ...
- Famous Places in The World to Visit
- "Explore Most Beautiful Tropical/Warm Places in The WorldLet your imagination wand...
- CSS for layout
- "CSS for layoutWeekSixAssignmentTop left boxBlue box!Top right boxRed box!Bottom l...
FLEXBOX
- Flexbox Tutorial (CSS): Real Layout Examples - YouTube
- "Learn how to use Flexbox to create different layouts. Link to code used in this video Link to more about browser support:display flex/flex 12:57 three column layout (order)9:09 (margins flex...
- CSS Flexbox (Flexible Box)
- The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.Like we specified in the previous chapter, this is a flex container...
- A Visual Guide to CSS3 Flexbox Properties
- layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is...
- A Complete Guide to Flexbox | CSS-Tricks
- comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and t...
ACCESSIBILITY
- Accessibility Tutorial
- Accessibility is about making web pages accessible for everyone, also people with disabilites. 25 tutorial pages for you to learn the fundamentals of Accessibility: meaningful image text, link stat...
- Screen Reader Demo for Digital Accessibility.
- Screen Reader - what it is, how it works
<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www.diigo.com/user/vtay... - HTML: A good basis for accessibility - Learn web development | MDN
- A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at...
Mixed Reality (xreality)
- Should engineers buy the Apple Vision Pro? | Engineering.com
- Virtual reality (VR) and augmented reality (AR) have been slowly seeping into engineering offices over the past decade. The technology is being used to interact with CAD models, to help assemble sp...
- 360°, Northern lights in Norway, 12К video - YouTube
- "Don't forget that this is 360° video: you can change the angle of view.Lying north of the Arctic circle within the severe waters of the Norwegian sea, the Lofoten archipelago is known fo...
- Google Arts & Culture
- "Step inside a galleryWith Augmented RealityDiscover Indian MiniaturesSee the tiny works up closeInside the Jean Pigozzi CollectionArt from Africa to JapanGetty Museum: Immersive ExperienceDis...
PROTECT
- Beat The Hackers and Stay Safe!
- Here are some other signs that might suggest you're the victim of a digital break-in: Your system or device is running way slower than it used to. Your devices seem to be overheating and...
- What is catfishing and what can you do if you are catfished? | CNN Business
- Catfishing is when a person uses false information and images to create a fake identity online with the intention to trick, harass, or scam another person. It is often on social media or dating app...
- 5 financial scams to watch out for in 2024
- "Fraud cost U.S. consumers more than $7 billion in the first three quarters of 2023, a 5% increase from the same period a year earlier, according to the Federal Trade Commission.If you are awa...
- Google's new settings let you remove your private info from search results. Here's how | ZDNET
- new dashboard for an existing feature called Results about you. Introduced in 2022, this feature lets you track any personal details that pop up in a search result so that you can ask Google to rem...
