I’m using a common .title class for all the absolute postioned background text and then four separate modifying classes to position each title at the four corners of the page. Here’s some of the sample code:

Topics Tutorials This tutorial teaches the fundamentals of setting up a tailwind project and working with a sample tailwind project. There are a few changes to tailwind since this tutorial, so bold values are changes. Here is a summary of the setup: Problem Set Revisit the Tweet cards project from web design 1 or a… Continue reading Design2 – CSS Libraries Part 2

Topics Tutorials Problem Set Using Bulma, build a simple default page and elements page similar to what you’ve seen in HTML5Up. For the Blog Describe which Bulma components to be the most useful for building something quickly and how you could see using them.

Choose two fonts from Google fonts that will be a good pair for a heading font and a body text font. You may wish to choose yet another highly styled font for a ‘title font’ as well. Things to consider with your pairing and simple web page created: Upload a link to the simple webpage… Continue reading Font Pairing Exercise

Go to any website of interest and take a screen shot of a card or a page that shows the heading and body text used. You may have more than one of each. Then using the inspector identify the following traits of each font:

Find a piece of card layout design within a larger piece of web design from designspiration. Then draw a box model on the design working from the outside to the inside. Don’t worry about “content” (text and images) only draw the boxes needed to build the layout. Next create an HTML skeleton model that has… Continue reading Basic Layout Exercise

A fundamental of layout design is the organization of your design elements into gridded spaces (or sometimes breaking-out of those gridded spaces). In this exercise, find a piece of design that includes text, image, shape, etc. and draw boxes over it, outlining the gridded spaces. Feel free to use which tools you prefer. The example… Continue reading Making the Grid

This is a tutorial for using the “Live Sass Compiler” extension as an alternative to using node and “node-sass” as presented in Jonas’s tutorials. Install the Extension “Live Sass Compiler” Update your Settings JSON in VSCode Using the command palette in VSCode add the following key/value pairs to your JSON Use the sass filename “style.scss”… Continue reading Live Sass Compiler

Choose a primary color from your last week’s color palette exercise and build a complementary or triad color palette with light and dark versions using Paletton or another generator from those found on this site’s design and code page OR create your own shades based on a primary & secondary colors in CSS using CSS… Continue reading design 1 & 2 complementary color palette exercise

Have a look at the site designspiration.com and I would like you to find four pieces of design that are of interest to you, and place them in a blog post. CHOOSE IMAGES THAT INCLUDE SHAPE AND/OR TEXT. NO PHOTO or ILLUSTRATION ONLY SELECTIONS. You can use a number of different ways of searching: color,… Continue reading Designspiration