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 […]
Category: HTML
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 […]
Categories
PUBL 1220 Outline (2019)
Publ 1220 Web Design Fundamentals Credits: 6 Room: A247 Contact Info: Kevin McMillan Office A248 (604) 323-5941 Days & Times: Summer Term: May 08 – June 16, 2018 Tuesday 130–520 Tuesday 600–720 (lab) Thursday 1130–320 Thursday 400–520 (lab) Friday 1130–420 (lab) Office Hours Tuesday 1130–130 Or by appointment. SKIP to Class Content This Section A class will cover HTML […]
First please download the starter files and the screenshots. If this is a test, talking to anyone but me will result in a score of “0”. In the download is an HTML file. I have put some of the HTML in. You will need to put in a lot more. Make sure that you read […]
First please download the starter files and screenshots. In this exercise, you will make the front page of an imaginary worldbeat music magazine. If this is a test, you can use the internet and your notes, speaking to anyone other than me or the Instructional Assistant will result in you receiving a mark of zero. […]
Categories