What To Do NOTE: if this is a regular weekly exercise, the mark is out of 1, as usual. Consider the questions identified as “bonus” to be part of the exercise (and not for bonus marks). The marks listed below are for if this is an exam. Video Demonstration Please ignore the video in the […]
Category: CSS
Please download the starter files and set them up as a new project in the editor of your choice. In this exercise, you will make a single-page responsive design. You can definitely use the Internet or your notes. If this is a test, you may not talk to anyone other than me or the Instructional […]
Below are some of the Visual Studio Code Extensions I use and recommend: Live Server: automatically reloads browser when html or css files are saved Rainbow Brackets: colors bracket pairs. Very useful in JavaScript StyleLint: error checking for CSS File Utils: adds file management functionality (duplicate, rename, move, etc) VSCode-Random: generated random data. CSS Navigation: for searching […]
Site Set Up First, please download these files. this duplicator archive WP site the graphics files for the site the screenshots Install the site in a new database in your testing environment. As part of the Duplicator site install, create a new admin account. In that process, include your real First and Last Name. For […]
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 […]