Topics Tutorials Problem Set Find a card model or a piece of 2D design (it must include, image, and typography) from designspiration, then draw over the design a ‘box model’ for the main layout of the design. Take a screenshot/photo of the drawing. From there, come up with a HTML skeleton strategy. Below is a… Continue reading design1 – pricing panel code-a-long

Topics Tutorials Problem Set SIMPLE RETWEET CARDS WITH TWO MODES: HORIZONTAL AND VERTICAL. Using flexbox create two cards modeled after the images above. Using the same HTML, create classes that allow you to switch between horizontal and vertical just by adding or removing a class. Your HTML boilerplate should look something like this: You should… Continue reading design1 – Responsive CSS & Flexbox

Topics Using scale, rotation, and cropping to find focal points in an image for design Lecture Design for Developers – Scale and Cropping Exercise Find three images, one from among each of the following categories: portrait, landscape, still life, and icons. For each each pick portion of the image to focus on. Using crop, scale,… Continue reading design1 & design2 – scale and cropping

Topics Box Model Assorted CSS Properties Tutorials Problem Set The final set of tutorials, videos 100 & 01 are a code-a-long to build a basic, nice looking photo blog. You should build this project using photos of your own or from a source like Unsplash.com. Have the images follow some sort of theme: content choice,… Continue reading design1 – The Box Model & Assorted CSS Properties

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