For this exercise, you will make a single page layout for a mock magazine website. First, please download the starter files and the screenshots. The HTML I have given you a lot, but not all, of the HTML required. Try to get as close to the screenshot designs as possible. I have given you all […]
Category: CSS
NOTE, October 2020: This tool is now incorporated into the regular version of Firefox, so you don’t need to use the Firefox Developer Edition to get the functionality described in the article. The regular version will work the same way. While the Chrome Developer tools will show a Grid outline when you click on an […]
Please download the starter files. In this exercise, you will make a page comparing two American guitar companies: Fender & Gibson. In case you’re wondering why there are no menus: I want the focus here to be on layout and design principles. Inside the downloaded package of files you will find three screenshots showing the […]
This post will take you through the RWD Berlin Number Nine Grid & Flex exercise step by step. Here are the starter files. Please drag the project folder onto the Atom icon in your dock. Make a new index.html file and a new styles.css file. Don’t forget to connect the stylesheet to the index page. […]
In this exercise, you will make a MOBILE-FIRST layout using Grid and Flex. The first step in the mobile-first method is realizing that by default most elements are already mobile friendly (as long as we scale our images). For that reason, we should put any styles that are common to all our responsive states in […]
Our last task is to do a few tweaks to the menu. In an earlier part of this exercise, we set the menu up for the phone view: Let’s modify that just a bit. Our CSS for the links in the menu is the following: Remove the background-color declaration. We were just using it to […]
The bonus tasks in the exercise both involve the use of CSS positioning. Here I am referring to: the border effect on the section-titles the placement of the category on top of the photo (with a translucent background) The border treatment changes a little bit between breakpoints, but not massively (just a text alignment difference). The text-on-photo […]
Our next task is to make the layout work at other sizes. To do that, we will use one or more media queries to deliver additional styles for larger screens. Choosing Responsive Breakpoints Often I will guess at a breakpoint or two, and then modify them later. Another approach is to open the Inspector and […]
The Menu To get the menu working for the way it is in the Phone view layout ( 2 buttons per line ), we have a number of options. We could use display: inline-block on the LI elements display: grid on the NAV UL element display: flex on the NAV UL element The first method […]
If you look at the screenshot that ends the previous article in the series, or at the current state of the layout in your own file, you’ll note that there are some box-model issues that need to be dealt with. For example, our header is not going all the way to the edge of the […]