Extensions allow you to add functionality to VS Code. Learning how to work with them will help you to work faster and more efficiently and sometimes better understand your files and see mistakes that you’ve made. How to Add Extensions VIEWING INFORMATION These change the VS Code interface to add color coding, information about things… Continue reading Visual Studio Code Extensions
Author: Christopher Stein
Week 5: 9/27 + 9/29
This week we will be doing more work on the Portfolios, writing the HTML and CSS to turn your wireframes into actual web pages. We will also talk about design and work on color and typography for the sites. Along the way you will learn some Git basics and work with GitHub. Before Class: LEARN… Continue reading Week 5: 9/27 + 9/29
CSS Grid
CSS Grid is relatively simple to get started but it is also deep with a lot to learn. This page has resources about CSS Grid for those just getting started to exploring more complex layouts. Getting Started Guides These guides are designed to help you learn Grid. They all teach the basic ideas but with… Continue reading CSS Grid
Week 4: 9/20 + 9/22
This week we will start turning the wireframes from your Portfolio Brief into actual HTML and CSS. Before Class: LEARN DO THIS: Portfolio Brief If you have not yet submitted your brief, please submit it now. It was due on Tuesday, September 14. 2. Visual Studio Code and Git On Wednesday we will use VS… Continue reading Week 4: 9/20 + 9/22
Week 3: 9/13
A reminder that this week there is NO CLASS ON WEDNESDAY. There are not classes at BMCC on Wednesday the 15th and Thursday the 16th. Before Class: LEARN DO THIS: Portfolio Brief The brief is due on Tuesday, September 14. In Class: EXPLORE DO THIS: Join the Live Class Sessions The Join link is the… Continue reading Week 3: 9/13
Typographic Hierarchy
Most of the web is text so much of what you have to design is text. A typographic hierarchy helps the user to quickly scan a page and find information. Also, done right, it will make the page more visually attractive. Typographic Hierarchy tells the reader two basic things: what text is more or less important, what kinds of… Continue reading Typographic Hierarchy
Typography Basics
This post presents the basics of typography through a set of rules to follow. Like all rules they are made to be broken, but you should learn them first before you start breaking them. If you follow these rules your web typography won’t suck. It will most likely be pretty good. The simplicity of the… Continue reading Typography Basics
CSS Games
CSS Diner: Selectors Game Play Game: https://flukeout.github.io/ This is a web game that requires you to write CSS Selectors. It’s a fun way to test your knowledge of writing selectors for CSS. It also explains the selectors so it can be a good learning tool as well. By the end of this class you should… Continue reading CSS Games
Gestalt Principles and Web Design
A big part of graphic design in general and the web design we do in this class is communicating a message to a particular group of people (audience). The Gestalt Principles were created to help explain how people make sense of what they see. They are particularly useful for web design where we’re using a… Continue reading Gestalt Principles and Web Design
Week 2: 8/30 + 9/1
In a typical week there would be activities to do before class on Monday. This week we will do these in class. If you see this before our first class on Wednesday and want to get started, great. If you are not able to do some or any of this, don’t worry. We will go… Continue reading Week 2: 8/30 + 9/1
Week 1 Homework
Most weeks I won’t post a separate announcement about any homework. You’ll be able to find this in the BEFORE CLASS section of the week ahead. However, to help make things clear and because I’m traveling this weekend and may be late with the Week 2 post, I’m making this announcment. Here is what to… Continue reading Week 1 Homework
Week 1: 8/25
In a typical week there would be activities to do before class on Monday. This week we will do these in class. If you see this before our first class on Wednesday and want to get started, great. If you are not able to do some or any of this, don’t worry. We will go… Continue reading Week 1: 8/25
Responsive Images and Video
Images are by default inline elements that are a certain size and will take up that space on your web site. For responsive web design we need our images to be able to shrink in size if the container they are in is smaller than the image. For example: The following needs to be in… Continue reading Responsive Images and Video
Submitting the Portfolio Brief
Instructions on how to submit your Portfolio Brief. Format Please submit your brief as a single PDF file. I suggest using Microsoft Word or Google docs to create it and then exporting as PDF. You will most likely use some other tool (Figma, XD, etc) to create your wireframes and site map. Export an image… Continue reading Submitting the Portfolio Brief
Protected: Class Recordings
There is no excerpt because this is a protected post.
Software for Wireframing and Prototyping
Wireframing and Prototyping are two different (related) activities. They are here together because many of the software that do one will do the other. Adobe XD Came on the market in 2017. This tool is designed to make wireframes and prototypes. Adobe seems to be continuously updating it. It is lacking in some of the… Continue reading Software for Wireframing and Prototyping
One-Line Layouts
10 modern layouts in 1 line of CSS by Una Kravets In this article and related resources Una shows how to create modern layouts with just a small amount of CSS. The layouts mostly use CSS Grid and Flexbox. Article (written and video): https://web.dev/one-line-layouts/ Editable Demo Examples on Glitch: https://1linelayouts.glitch.me/ GitHub Repository: https://github.com/una/1linelayouts YouTube Video… Continue reading One-Line Layouts
CSS Resources and References
Here are some places where you can find out more about CSS Syntax, Selectors, Properties and Values. Nobody can remember everything about CSS Syntax, how to apply it etc. Your goal should be to know some of the main terms and ideas so that you can more quickly find the information you need in a… Continue reading CSS Resources and References
HTML Fundamentals Videos
This is a series of videos I made showing the fundamentals of HTML and how to write it. HTML Fundamentals Part 1 This covers the basics of what HTML is and it’s purpose. Duration: (11:10) HTML Fundamentals Part 2: How to Write HTML In this video I cover writing HTML and how tags are structured… Continue reading HTML Fundamentals Videos
HTML5 Periodic Table
This is an interactive site that helps you to view the different types of HTML elements. Clicking on the buttons on the top filters the elements. You should know all of the Core elements. Important sub-sets are: Setup: These elements set up the page so that it is ready. Most of these elements will be… Continue reading HTML5 Periodic Table
