Category: CSS

Initial Setup First please download the required files. When you unzip that archive file, you should have a folder called GibsonVsFender-History-Players-Gallery-2019-StartingFiles. Inside that folder is an index file. I have given you some of the HTML (such as the images), but you will definitely need to add more HTML. In choosing your HTML, make sure […]

On the previous page, we examined the desired layout for the main area. We then did the code for the menu responsive states, however, because they were easier to do, and to therefore make your introduction to grid gentler. We’re should be ready to finish the page now, though, by tackling the rest of the […]

At this point, our page should look like this: The first problem we notice is that under a certain size, the images go beyond the edge of the browser window rather than scaling with the page. Responsive Images The solution, and a fundamental technique of Responsive Web Design, is to make your images resize to […]

Typography Go to the Google fonts website and select the fonts Oswald (weights 400 & 700) and Roboto Slab (weight 400 only). If you need to review how to do that, consult this page. Now let’s make some basic typographic styles. If any of what we’re doing here doesn’t make sense, try adding the CSS […]

At this point, our default layout looks pretty good. However, we should modify the .guitar-small style just a bit so that the boxes aren’t touching and so that there’s a bit of space between the guitar name and the border. This should, then, nicely separate each guitar box: Responsive States via Media Queries Our phone […]

In the exercises on this site, type out the code in the exercises, rather than cutting and pasting it for this site: this will help you memorize the tags and concepts. Build The Main Page Structure Inside the BODY of your document, put in a HEADER element, a MAIN element, and a FOOTER element. Use […]

First, please download the files you’ll need for this exercise. Once you unpack the downloaded zip file, open the main folder in your code editor. You will see that you have two folders: one for images and one for your CSS files. In this exercise, we are going to use a mobile first methodology to build the […]