Topics Tutorials Problem Set Inspired by HTML/CSS templates by HTML5up. For this assignment, you will create the start of an “elements” page using Sass. HTML5up templates usually includes three parts: a homepage layout, a “generic” page, and an “elements” page. The homepages are the most complicated part of the layout, but the generic and elements pages… Continue reading design2 – natours about section

Topics The value of animation in UI design; Review of pseudo classes: :hover, :focus, :active; The transform property and the translate() function; Additional functions scale(), rotate(); The transition property and values for duration, type, timing function. Tutorials ADV Section 02, videos 004-023 The following HTML / CSS pairs will need to be completed and uploaded… Continue reading design1 – CSS animations transforms and transitions

Topics Tutorials Below are description of the versions of Natours you should save and the file/folder structure for each version: Problem Sets Recreate the outline buttons from Bootstrap using Sass to compile your CSS. Use the reset and font-size management strategies introduced in the tutorials. Button HTML Button CSS Button colors in Sass For the blog There… Continue reading design2 – Sass nesting, 7-1 architecture, grid system

Topics Manipulate common font and text properties using CSS ; Include external fonts using Google fonts (***note the Google font website UI has changed, but the process is the same); Define and manipulate the four components of the box model. We’re going to consider our next design lesson after color, and that’s visual hierarchy. In… Continue reading design1 – intermediate CSS

Below describes the main steps for setting up a project folder to be able to compile scss files to your css files. Setup Project Transfer project

Topics Tutorials Problem Set For this exercise you’re going to get additional practice setting up a project to be built with Sass. You can rewatch tutorials if you need to refresh the process or follow my condensed quick start for node or use the Live Sass Compiler. Using the HTML/CSS from your comment box exercise… Continue reading design2 – Intro to NPM and Sass

Topics Understand the general rule for CSS syntax; Correctly include CSS in your HTML files; Select elements by tag name, class, and ID; Style elements with basic properties like color and background; Use Chrome CSS Inspector to debug HTML and CSS. Tutorials Section 05 Introduction to CSS – videos 032–042 The following HTML and CSS… Continue reading design1 – intro to CSS

Topics Tutorials Problem sets Find a website that uses the BEM naming strategy (another list) for their classes. Within the site, chose and breakdown a particular component identifying the primary classes that are used for the component’s block name, elements, and modifiers. Your breakdown should include the following: For the blog There are certain CSS properties applied… Continue reading design2– how CSS works

There’s a lot we’re going to sort through on this first day of class. We’ll walk through the Web Design 1 and Web Design 2 syllabi as well as figure out the accounts and tools you’ll need to be able to be successful in the course. But no coding today (ok a tiny bit), only… Continue reading Setting up for the course