Topics Tutorials When writing code for your tutorials remember to start in Visual Studio Code with creating and opening a folder for the week’s exercises. For example use a folder named, “week1”. Problem Set Create a webage page, “my hobby,” picking your own hobby/interest illustrating two examples. Create a folder and save files inside like… Continue reading design1 Intro to HTML

Topics Tutorials / Problem Set There are no new tutorials or problem sets for this final. You should review your work completed and submitted by looking at each week’s tutorials, problem sets, and blog prompts from the schedule. If there is work you’d like to still complete and submit you have until Friday May 24.… Continue reading design1 & design2 – final reflections and HTML/CSS Knowledge survey

Topics Using a CSS library (gridlex) to create a grid layout our cards; Adjusting our HTML and using emmet syntax to wrap card elements; Tutorials/Problem Set Second to last tutorials from the card system playlist: Page Layout with Gridlex part 1 Page layout with Gridlex part 2 For the blog Describe how a grid system… Continue reading design 1 – card project grid system library

Topics/Problem Set/For the blog Project Final Version For both design 1 & 2 – it’s been a bit of tough go for those trying to work on sites without a ton of feedback. So it’s time to put together the your best ‘final’ version and submit it. Things to focus on: Look back to your… Continue reading design 1 & design 2 – Final Project Site Part 4

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