Topics For the remainder of the semester your goals should include completing all tutorial and problem sets from the first two-thirds of the semester, as well as reporting out on each week with a blog post. I’ve had the opportunity to speak to many of you one-on-one about your current status and I hope you’re… Continue reading design2 – final weeks

Topics For the remainder of the semester your goals should include completing all tutorial and problem sets from the first two-thirds of the semester, as well as reporting out on each week with a blog post. I’ve had the opportunity to speak to many of you one-on-one about your current status and I hope you’re… Continue reading design1 – final weeks

Topics What the “checkbox hack” is and how it works; Have a <input type=”checkbox”> that will be hidden later; Have a <label> connected to the checkbox that will become our button; Use the :checked pseudo class to reveal the fullpage navigation. How to create custom animation timing functions using cubic bezier curves; easings.net cubic-bezier.com How to animate “solid-color gradients”; Use a linear-gradient with… Continue reading design2 – Natours Sass part 6

Topics Implementation of a variety of CSS properties and values to build a site homepage. Tutorials Problem set This week’s problem set is the above code-a-long with a couple of additional requirements. You will be implementing flexbox, a reset, animations, and more. But I’d also like you to make some changes based on inventing your… Continue reading design1 – Startup Site Project

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