In this exercise, we will make a MOBILE-FIRST grid-based layout. 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 the main part […]
Author: km
Categories
Flex Table Sort Exercise
First of all, please download this file and double click it to unpack it. In this exercise, you will make a sortable table using your knowledge of CSS Flexbox and the JavaScript classList method. You can use the Internet or your notes. I would recommend the CSS Tricks Guide to Flexbox and the Mozilla Developer Network’s […]
The verb to enqueue comes from the French language. It means to add something into a lineup. In WordPress the wp_enqueue_style() and wp_enqueue_script() functions are used to manage the loading of external resources like scripts and stylesheets. Why do we do things this way? Imagine if you have a theme that requires a dependency (some […]
For this exercise, please download and install this Duplicator archive package into a new empty database. Then download an underscores starter theme. If we have covered SASS in class, click Advanced Options and choose _sassify! Once you’ve done that, please install the new starter theme into your newly created WordPress site and make sure to activate […]
Categories
Image Placeholder Services
A useful tool when creating mockups are the many image placeholder services on the web. They give random photos at the sizes you specify. Some will let you choose categories, etc I use placekitten.com a lot. Another is lorempixel.com. With both, to get a random image in your page, you put in code for an image but for the […]
Categories
FlexBox Layout Exercise: Holy Grail Layout
In the early days of web design, many people proposed solutions for a type of layout that became known as the holy grail layout. The idea was that the layout would have the following characteristics: it would have a header, a footer, and a middle three-column section the footer would stick to the bottom of the page […]
Basic Setup For this exercise, we will learn about the WordPress Template Hierarchy, the WordPress Loop, and some basic WordPress template tags. First of all, please download this zip archive. Inside it you will find a folder of screenshots and a folder with a Duplicator installer and archive combination. Copy the installer and the archive […]
Originally Created for WMDD 4840 2017 Midterm Set Up a Testing Site Download the latest version of WordPress. Unzip it, and rename the resulting wordpress folder to your first name and last intial (for example: kevinm ). Put that folder where it needs to go to work in MAMP. Set up your site. The site name will be European […]
For this exercise, please download these files. In this exercise, we’re going to add the SIZES attribute. Make a new HTML page and add the following code to it. Make sure the path to the images is correct. If the folder name in the download is different, make adjustments. We’ll discuss these values in class.
Responsible Responsive Design: SRCSet In this exercise, please use the Firefox or Firefox Developer Edition browser: Chrome very aggressively caches images, which will make the demonstration appear to not work as described. To begin, please download these files. A basic strategy that evolved to deal with different screen widths is the now-classic img {max-width:100%} responsive image style. However, […]