Images are by default inline elements that are a certain size and will take up that space on your web site. For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example: The following needs to be in… Continue reading Responsive Images and Video
Category: Layout
CSS Grid
CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started to exploring more complex layouts. In class we looked at My Examples: https://profstein.github.io/css-grid-basic-examples/ Reference Guides and Cheatsheets These help show all of the grid properties,… Continue reading CSS Grid
Media Queries
In order to have a fully responsive web page you need three things: We have already covered Fluid Layout. When you use FR units (grid-template-columns: 1fr 1fr; ) you are creating a fluid layout. This post outlines the third item, Media Queries. Media Queries are CSS rules that allow you to apply CSS styles only… Continue reading Media Queries
Creating HTML from Wireframes
When making your web site you need to create HTML that matches your wireframe diagrams. Perhaps the biggest lesson here is to make sure to that you have set up Page Structure elements (see HTML 5 Periodic Table) to match the page areas that you have outlined in your wireframes. Remember that for both CSS… Continue reading Creating HTML from Wireframes
One-Line Layouts
10 modern layouts in 1 line of CSS by Una Kravets In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox. Article (written and video): https://web.dev/one-line-layouts/ Editable Demo Examples on Glitch: https://1linelayouts.glitch.me/ GitHub Repository: https://github.com/una/1linelayouts YouTube Video… Continue reading One-Line Layouts
