Categories
CSS HTML JavaScript

HTML/CSS/JS Exercise: Photon Software

For this exercise, there is nothing to download, except for the screenshots. In the exercise, you will make a single page for an imaginary software company called Photon Software. The page will display details of five apps built by the company. Each app’s details will occupy one panel in the page. Please look at the […]

Categories
CSS HTML WordPress

Getting a Domain and Hosting for Your Website

The WMDD 4840 final assignment requires you to deploy WordPress to a live server and get a domain name. In the materials below, there are three different ways to do this.  Deploying to Amazon Lightsail Deploying via the control panel of a typical host company such as Namecheap.com Deploying to the WMDD Server with the […]

Categories
CSS HTML JavaScript

WMDD 4835-Only Alternative Final Assignment

This assignment is only for students taking WMDD 4835 without taking WMDD 4840. Online Film Festival For this exercise, you will make a website mockup for an imaginary College Film Festival that will take place over five days June 13 – 17 of next year. Think of the project as a prototype of parts of […]

Categories
CSS HTML JavaScript

HTML/CSS/JS Exercise: Full Page with Image Credits

For this exercise, please download the starter files. This will include an html file and a folder of images. And please download the screenshots. Finally, here is a Loom video describing the task. There is already lots of HTML in the page. Feel free to add to, or subtract, from that HTML. Font Awesome is […]

Categories
CSS HTML JavaScript

HTML/CSS/JS Exercise: Full Page with Form Slide-In

For this exercise, please download the starter files. The starter files include an html file and a folder of images. Here are the screenshots. And here is a Loom video describing the task. There is already lots of HTML in the page. Feel free to add to, or subtract, from that HTML. Font Awesome is […]

Categories
CSS

Using Font-Awesome with Pseudo Elements

Sometimes, you will inject Font Awesome icons into a document using pseudo elements rather than the empty <i> tags that are commonly used. Here’s example code using Facebook and Twitter. Note the font family: Font Awesome 5 Brands For the content value, put a backslash followed by the unicode value. You can find the unicode […]

Categories
CSS HTML

Object-Fit

Please download the starter files from here. A useful but occasionally confusing css property is object-fit (and its related property object-position. It allows to “crop” images with CSS, which can be very useful in responsive design. I have created a series of Loom videos to explain how to use it. As always, please watch them […]

Categories
CSS Graphics HTML

All About WebGraphics

I have created a Loom video series about web graphics. To go through the videos and practice the techniques shown in them, please download the starter files. Topics covered include: jpeg file size reducing jpeg file size via dimension & quality batch processing in photoshop, bridge, and xnconvert svg: the web’s vector file format png8, […]

Categories
CSS HTML JavaScript

Creating A Basic Sliding Menu with JavaScript

In this exercise, you will learn how to create a sliding-down menu for small screens. In it, you will learn about: First, please download the starter files. Set them up as a new project in your editor (likely Visual Studio Code). Now, please watch this Loom video series. Please start with the video that has […]

Categories
CSS HTML

Reasons to Learn About Advanced Selectors

Increasing Specificity If… you want to target LIs, but only when they are in NAVs. you want to target LIs but only in NAVs in the HEADER you want to target the last li in the NAV in the HEADER you want to target the third article in the section you want to target all […]