The exercise will focus on the essential points of the FLEXBOX CSS module. It won’t have anything design-related—just pure css layout concepts. To begin, make a folder, set it up as a new Atom project, then make an index.html file with a single unordered list with 15 list items, each holding one single-word link. Now […]
Category: CSS
Categories
ATOM Packages
A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality. Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so […]
If you want to practice float-based layout techniques, here are a few exercises. There are some very useful techniques contained in these exercises. If we have not yet covered a technique or tag yet in class, google it. Berlin Photo Gallery Go to this page and download the files and follow the setup instructions. This […]
Categories
Using Google Fonts
Using a hosted font service like Google Fonts or Typekit allows us to use a much wider range of fonts and weights than are included in the default range of fonts resident on users’ computers (as itemized at cssfontstack.com). Because the fonts will be downloaded to the user’s computer when the page loads for the […]
In this exercise, you will make a photo blog home page. Please download the starter files and the screenshots files. There are three sections to this page: a header, a main area, and a footer. The font used thoughout is the Google font Old Standard TT. If this is a lab exercise and not a test, […]
Photos from this exercise came from Flickr, under Creative Commons licence. Thank you to the following individuals for making such beautiful work available. Jérôme Lemaire Taddie88 Sebastian Krieger Etienne Eric Prunier Guido D´Elia Otero Vlad Fiscutean Thomas Hawk Domi Thomas Hawk txmx 2 Thomas Hawk go elsewhere go elsewhere Thomas Hawk Mr J. Shaft Arq, […]
Since posting the original exercise, I have made a few changes to the look of the page, so if you download the completed version, do not be surprised that some features are different from those described in the exercise. First, download the slim minified version of jQuery and add a link to it just before […]
Categories
Flex Table Sort Solution
In order to use the power of Flex for this exercise, it is very important to remember one thing: because Flexbox is all about the relationship between parent and child elements, we need the tbody to be included in this table. The “sort” will involve shuffling the order of the tr elements inside the tbody. […]
In this exercise you will make a Mobile-First layout. First, please download the starter files. Included with these files is a ScreenShots.pdf file. To view the screenshots adequately, open that file in Preview and go View > Zoom To Fit. You will edit the index.html file (and make a stylesheet file) to create a responsive […]
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 […]