Previously we showed some basic CSS to make an image responsive. All that does is allow the image to resize as the element that contains it resizes. This means that you have to add the image at the largest size it can possibly be. The techniques below allow you to […]
Responsive Design and Layout
6 posts
In order to have a fully responsive web page you need three things: Fluid Layout: the width of the layout is set in fluid units like percent or fr units. This allows the layout to expand and contract to fit the width of the browser window. Flexible Media: images, video […]
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 […]
CSS Fundamentals As you come in to class today visit this post and start trying to play the CSS game it links to. We will play a little in class and talk about CSS basics. Files at the END of class: Here is a zip of the HTML and CSS […]
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. Getting Started Guides These guides are designed to help you learn Grid. They all teach […]
Files From Class: DOWNLOAD: Here are the files we created in class based on our sketch: https://www.dropbox.com/s/q5n75j2ffp1bxxp/Bonobos-inClass-9.9.19.zip?dl=0Wireframe Sketch: here is a pic of the wireframe from the board. I converted it to a PDF. https://www.dropbox.com/s/vpsbsbs5mvhzvnw/Bonobos-Wireframe-Sketch-.pdf?dl=0 For the homework you would upload two files like these, the HTML and a Sketch […]
