We are going to do a few exercises in responsive columns because this is a fundamental aspect of contemporary web design, and it should be your goal to master this. The following .PDFs explain the approach of developing a responsive, 3-column web page layout (with images), but will challenge you by forcing you to write your own code and solve the problem on your own. You should have experience with responsive columns after building the Acme website, so this hopefully this is mostly review and more practice while introducing media queries.
- For the first exercise, you’ll create a web page with 3 columns. Each column should have text and an image. The goal is to go from a single column layout (for small screens) into a 3 column layout for larger screens, with all widths set as percentages so the layout is fluid and flexible. Try and match the grid I’ve created to get an idea of spacing, but don’t worry about making it pretty just yet. Get your responsive grid mastered first. Since this is an exercise, you may create a single HTML file with CSS embedded in the head section if that’s easier for you. Otherwise treat it like a real HTML web page with all appropriate tags in the <head> section and use the W3C validator for error checking.
- For the second exercise, you will duplicate the file created in exercise one and attempt to add an additional media query, for a total of two breakpoints.
- The third exercise is to duplicate the file from exercise two, add a fourth column, and tweak the percentages in your CSS to accommodate 4 columns.
If you still have some energy left, give these pages a professional touch with some fonts, images, and color. Experiment with making your text larger as browser size increases, and other tactics of responsive design. But master your responsive grid first!!! You can find high quality images at unsplash.com, and use Google Fonts.
Below is a short video demo of coding some responsive columns. Note that in the video, the columns have 2% margin-left and the .row has margin-left of -2%. If this approach gives you trouble, then do the following instead: give the columns a margin-right of 2% and set the .row to a width of 102%.