Categories
CSS HTML

The Eatery Restaurant Menu 2020: Responsive Page

For this exercise, please first download these files. Once you unzip the files, you will see that there is an index.html file, a folder of images, a screenshots folder, a file called index-not-marked-up.html. There will be two ways to do this exercise: CSS Emphasis: the index.html file has most of the HTML & the content […]

Categories
CSS HTML

The Eatery Menu 2020: Step by Step Instructions pt 2

(…continued from part one of this exercise…) Now we’ll build the additional layouts the site requires. Header Area If we resize the screen quite wide, the site logo will get absurdly big. We’ll limit that by using our space more economically. First resize the browser window to determine at what size to change the header […]

Categories
CSS HTML

The Eatery Menu 2020: Step by Step Instructions

This is a step-by-step run-though of the layout in this exercise. First, please first download these files and open them up as a new project in your editor of choice. The index file has most of the content for the page. We’ll add a bit more HTML as we go through it. Note: there will […]

Categories
CSS HTML

DTN Mag Layout Lab Exercise 2020

First download these files: DTN Magazine Layout If inside the downloaded folder is a file called Instructions, delete it. It was for an older version of the exercise. Your Task Inside the downloaded content is a folder of screenshots.  Your job here is to make the page look as close as possible to the layouts […]

Categories
CSS HTML

Layout Exercise: Pretendco

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 […]

Categories
CSS HTML

Layout Exercise: Metonymy 2020

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 […]

Categories
CSS HTML WordPress

Visual Studio Code Extensions

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 […]

Categories
HTML

Links Review Exercise

In this exercise, you will make a page with four sections, each devoted to a different guitar company. If there is anything in the exercise we have not covered in class … get googling! Download The Files Here are the image files you will need. Once unpacked, this zip will reveal an img folder with […]

Categories
CSS HTML WordPress

WordPress Theme Configuration Exercise 1066

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 […]

Categories
CSS HTML

Gibson vs Fender Grid Layout Exercise 3769842

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 […]