Topics Circles – draw your eye; Saccade – eye is constantly scanning around; Things that move are perceived first, then brightness, then color… Circles live outside the lines; Diagonals add dynamics allows us to break up the grid. Lecture Design for Developers, Layout – Shape video Exercise 1 Choose two sample images, one of web… Continue reading design1 & design2 – exploring shape and saccade

Topics CSS the very basics World of CSS selectors Tutorials For the blog How do we organize website or webpage projects? Why use a folder for each and inside have an HTML file named index.html? And a CSS file named style.css? What’s the purpose of this pattern? Use an example to support your answer. A… Continue reading design1 – CSS Basics & The World of Selectors

Topics Rule of thirds Triad Composition Swiss Design Tutorials Design for Developers Asymmetry in Art (5 min lecture) Triad Examples Problem Set / For the blog Again using Dribble and other resources of your choosing, find an example of triad design in each of the following categories: website, illustration, and “Swiss Design.” You will likely… Continue reading design1 & design2 – exploring asymmetry in art

Topics Our first design theory lectures will present some fundamentals of layout and in particular grids, symmetry, and asymmetry. We’ll be listening to frontend developer and designer Sarah Drasner from her Design for Developer series. I encourage watching the opening intro videos if you’re interested, they’re all pretty short and she’s pretty great! Also, you… Continue reading design1 & design2 – Layout, symmetry & asymmetry

Topics Semantic HTML HTML Forms and Tables Tutorials Problem Set Your first project this semester will be to create an HTML only recipe page picking a recipe from Buzzfeed’s Tasty Recipe Youtube Channel playlists. You have a model to work from to structure your page (also see the image at the bottom of this post). Recipe Requirements HTML Considerations… Continue reading design1 – Semantic HTML, Forms & Tables

Topics Tutorials After downloading the project files from the github repository, you find a Natours folder with three subfolders: “starter”, “after-S05”, “after-S06”. Make a copy of the “starter” folder and rename it “version01”. Once finished with the first week’s tutorials, this directory is what you’ll upload. Problem Set Create the above full page hero using… Continue reading design2 Natours project setup and start

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