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 […]
Author: km
Categories
Batch Processing Images With XnConvert
Often you will need to process a number of photos at the same time, with the same settings. For a single image, you can use Photoshop’s Export > Save For Web feature or right click on a layer and chose Export As… For batches of image, you can record Actions, which are the Photoshop equivalent […]
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 […]
So we’ve marked up our content. Let’s style the mobile view. The idea in the Mobile First methodology is that is always easier to build up, so we will set the stylistic properties that are present at the smallest screen size, as well as those that are present across all breakpoints. First, make a styles.css […]