Topics various CSS and Sass strategies particular to the videos in Trillo; Tutorials/Problem sets In the last four weeks of class you will need to complete a number of tutorials from the Trillo Project: Week 10 – APR 13 & 15 design 2 videos 72-74 (project layout) Week 11 – APR 20 & 22 design… Continue reading design 2 – Trillo project posts

Topics/Problem set Project First Best Version design 1 – this week a first draft of your best effort to solve layout problems using css, additional component or repetition of a component may be created. index.html img/all-pngs-jpgs css/style.css design 2 – a project directory with required assets and files including: same three sets as design 1… Continue reading design 1 & design 2 – Final Project Site Part 3

Topics additional descending selectors to create our last three card types; using display: none to remove unused elements in cards. Tutorials/Problem set This week you will complete the CSS for the last three card designs in our project. There will a second ‘feature’ card as well as two additional ‘main’ cards. To help with the… Continue reading design 1 – card project last three

Topics/Problem set Project architecture design 1 – a project directory with required assets and files including: index.html (first component html skeleton included based on previous week’s proposal); img/all-pngs-jpgs (downloaded and organized as many images needed to start); css/style.css (should have a reset, palette defined with css variables). design 2 – a project directory with required… Continue reading design 1 & 2 – project site part 2

Topics Using VSCode wrap command and emmet syntax to edit HTML; Using CSS comment syntax to add section labels to our CSS document; Using CSS variables to manage colors and more. Tutorials/Problem set Two videos from the HTML/CSS card system series: Card title anchor links CSS comments and CSS variables For the blog Describe your… Continue reading design 1 – Card document maintenance

Topics For the second tutorial of the week we’re going to be building our second card in the project layout. A couple weeks back, you completed code that creates the HTML for all cards and the CSS for the first card. If you want to use all the images I’ve used in the tutorials, they can be found… Continue reading design1 – Card 2 Hero Card layout

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