Author: Michael Branson Smith
Michael Smith is an Assistant Professor and Director of the Communications Technology program at York College. Prof. Smith hosts a personal digital archive project blog on Commons titled It Cannot Be Trivial.
Bonus Flexbox Grid
To support responsive design, often developers use CSS libraries to speed there build processes. A CSS library can be a huge set of pre-written CSS that when incorporated with pre-designed HTML skeletons produce a huge array of components and layouts. To popular examples are Bootstrap and Bulma. But if you’re looking to work with just… Continue reading Bonus Flexbox Grid
Final Project Update Presentation
With only a few weeks to go in the semester I want you to create a presentation that serve both as an update to your project’s progress as well as a first draft of your final presentation. Below is a description of the final presentation requirements, you may not be ready to complete all of… Continue reading Final Project Update Presentation
Tailwind CSS Setup
This is a quick start guide for setting up a project that uses the functional CSS library Tailwind CSS. This setup allows you to write Tailwind CSS classes in HTML and whenever you save changes to the file, the compiler will add any missing CSS to your style.css file. First Time Setups Settings: search for… Continue reading Tailwind CSS Setup
Dür site v1
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:
Design2 – CSS Libraries Part 2
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
design2 – css libraries and tools
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.
Font Pairing Exercise
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
Font Identification 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:
Basic Layout Exercise
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
