Topics How to implement “solid-color gradients”; uses a linear-gradient() function that takes a degree value and three color values rather than your typical two. linear-gradient(105deg,rgba($color-white, .69) 0%,rgba($color-white, .9) 50%,transparent 50%) How the general and adjacent sibling selectors work and why we need them; [selector1] + [selector2] Adjacent sibling elements are on the same level and immediately follow one… Continue reading design2 – Natours with Sass Part 5

Topics Extending our understanding of flexbox with item properties; align-self; order; flex-basis; flex-grow; flex-shrink; Tutorials ADV Section 04, videos 042 – 051 The following HTML and CSS pairs will need to be completed as part of the code-along and uploaded to your server: navbar.html / navbar.css polygon.html / polygon.css holy-grail.html / holy-grail.css Problem set Find… Continue reading design1 – Layout with flexbox part 2, item properties

Topics How to make text flow around shapes with shape-outside MDN property We use the value circle(50% at 50% 50%); basic shape MDN passing three arguments to the function circle([radius] at [positionX] [positionY]). must have a defined width and height; and a float is required. This causes the floated text to wrap around a circle shape, but we still need to make the element itself a circle using… Continue reading design2 – Natours with Sass Part 4

Topics Understanding what flexbox is and how it is used for layout; Process for making an element a flexbox container with display: flex; Using flexbox container properties to position child elements (flex items); flex-direction; justify-content; flex-wrap; align-items; align-content; Tutorials ADV Section 04, videos 031 – 041 The following HTML and CSS pairs will need to… Continue reading design1 – Layout with flexbox part 1, container properties

Topics Tutorials Problem set Your template inspired by the html5up models is just getting started. You’ve hopefully defined the main font as well as a heading font and presenting these in your first draft of your elements page. There’s a lot to learn from downloading the template files and looking at the Sass files included. They do not… Continue reading design2 – Natours with Sass part 3

Topics using @keyframes to create multi-state animations; reviewing a number of animation CSS properties: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode. Tutorials ADV Section 03 CSS Animations Keyframes, videos 024 – 030 The starter code for many of these examples come from Codepens. You will need to create your own HTML/CSS files and copy/paste… Continue reading design1 – CSS animations keyframes

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