Web Design Circuit

WEB DESIGN
CIRCUIT
Student Handbook

Web Design Circuit

STUDENT HANDBOOK
At General Assembly, our goal is to turn thinkers into creators. Over the next 12 weeks, well
provide you with the knowledge and experience necessary to plan, design, and build visually
beautiful, functionally intuitive websites that provide an excellent user experience on displays
of every sizefrom smart phones to desktops.
At the end of this course, youll receive a certificate of completion, plus youll have a finished
website to show off your skills and kickstart your portfolio.

COURSE STRUCTURE
Circuits consists of a series of week-long units and a final project. Each of those units consists of videos, quizzes,
coding exercises and design challenges, review guides, and projects.

Videos
Introduce new concepts and allow you to see them in action through images, screenshots, and screencasts. All of
our videos are written by professional web design and development instructors and presented by real-life designers,
developers, and product managers.

Quizzes & Review Guides

Make sure that youre remembering all of the important stuff. Plus, weve packed the review guides with loads of
further readings. For those of you who want to go above and beyond, weve provided resources for you to learn skills
well beyond this class.

Code Challenges
Youll use our special in-browser coding tool to click through slides, enter HTML and CSS, and immediately watch
your code get rendered in real-time! These sections will review concepts and allow you to start applying what youve
learned.

Design Challenges & Weekly Projects

These creative tasks will give you a further chance to put your knowledge into action and to start building your
portfolio.

Web Design Circuit

SYLLABUS
Each unit is intended to follow one week in the course (ex: Unit 1=Week 1, Unit 2=Week 2) and
should be complete by EOD each Sunday. While the course is meant to be flexible to work around
your schedule, its important to stay on track with the class so you dont get behind. Each unit builds
upon the previous unit, so once you fall behind, it can be very difficult to catch up.

UNIT 1: INTRODUCTION TO HTML + CSS

Concepts
Setting up your local machine, host website locally
Learn basics of HTML + CSS

Skills

Use a text editor

Setup a local environment
Understand HTML + CSS syntax
Render code in browser Compare render with
source code

Objectives
Students should be able to create a basic page using
HTML + CSS essential tags: header, body, and
paragraph tags

UNIT 2: HOW DESIGN WORKS

Concepts
Design: defined, components, tools
Learn basics of visual design
Grid-based design: organization and hierarchy

Skills
Understand some of the basic elements
of graphic design
Understand the importance of design elements in
non-linear environments
Develop basic skills with tools used in the process
of design
Create a focal point in order to establish visual
hierarchy
Create analog and digital comps with software
Use fundamental terminology when
communicating about design
Create basic wireframes using Inkscape (or other
design program of your choice)

Objectives
Students will be able to create wireframes based off
of the Design Challenge wireframes and host them
locally.

UNIT 3: PRINCIPLES OF HTML + CSS BASICS

Concepts

Color
Classes vs. IDS
Lists
Sourcing and working with
images Files + Folders

Skills
Add links and images to a website
Relative vs. Absolute addressing
Understand how files and folders are
structured around the root directory

Objectives
Students should be able to create a home page for
their business website on their local site using an
unordered list, color, email link and image against
the background.

Web Design Circuit

SYLLABUS
UNIT 4: WEB DESIGN BASICS

UNIT 6: NAVIGATION + PAGE LAYOUT

Concepts

Concepts

Typography fundamentals
Color (RGB + Hex codes) Design sins and virtues

Skills
Learn standard typography vocabulary
Understand how font and typeface properties
affects readability
Learn strategies to choose typefaces
Understand how color creates visual impact
Develop a familiarity with the color wheel and
standard color models in regards to online
environments
Develop color selection strategies
Understand the color and typographic
inconsistencies across browsers and
operating systems Source fonts online

Objectives
Students will develop an understanding of the
fundamental aspects of typographic form and
function; the technical and emotional aspects
of color; as well as the sourcing and utilization
of online type.

UNIT 5: BASIC WEBPAGE LAYOUT

Concepts

Inline vs. Block

Intro to Divs
Box Model
Core components of a webpage
Margin vs. Padding

Skills
Understand placement and purpose of
navigation elements
Prioritizing content based on its placement
on a webpage

Objectives
Students should be able to create a single column
homepage from scratch, and understand how to lay
out content on a web page using display, divs, ids,
header, navigation footer spans, sections, padding,
and margin HTML tags

Positioning and Column layouts

Skills
Translating web design layout and content
hierarchies in code
Differentiate one and two-column layouts

Objectives
Students should be able to build a multi-column
webpage and understand content layout at a basic
level using floats and clears with HTML.

UNIT 7: DESIGN CRITIQUE

Concepts
Giving and receiving feedback
Developing your design skills

Skills
Understand image fundamentals in regards to
web design
Develop strategies for delivering and receiving
critique
Critiquing ones own work
Develop a familiarity with online design
communities

Objectives
Students will understand fundamental technical and
aesthetic issues concerning images as it pertains
to web design, further develop their sense of layout
and describe their creative process, and defend their
design choices

Web Design Circuit

SYLLABUS
UNIT 8: DESIGNING ACROSS PLATFORMS

UNIT 10: TABLES + EMAILS

Concepts

Concepts

Grid-based design: Responsive layout

Executions change; Design fundamentals do not
Design and Usability

Skills
Understand why responsive design matters
Develop a familiarity with common responsive
design considerations
Understand the importance of hierarchy in
stackable content
Determine the relevance of content: Mobile vs.
Desktop

Objectives
Students will be able to demonstrate visual
continuity between the desktop and mobile design.

UNIT 9: RESPONSIVE DESIGN

Concepts

Responsive web
Fluid Layout
Media Queries
Ems

Skills
Apply understanding of mobile first design from
previous unit to the web development skills used
when building a responsive site
Develop a basic responsive webpage using fluid
layout, media queries, and ems
Evaluate content that is appropriate for a fixed
layout vs. responsive site

Objectives
Students will be able to build a basic, functioning,
responsive web page

Email delivery (vs. browser rendering

of HTML pages)
Best practices for HTML emails
Applying previous HTML/CSS knowledge
to email creation
Email rendering: Differences between mobile,
desktop, browsers, and native applications

Skills
Understand best practices for email creation
Code plaintext and HTML emails
Design emails from a development and design
(usability) perspective
Weigh the limitations of email code vs. its
advantages

Objectives
Students will be able to apply previously acquired
HTML and CSS (inline) knowledge to create
original,visually pleasing HTML emails.

UNIT 11: FINAL PROJECT

Tying it all together!

Web Design Circuit

SYSTEM REQUIREMENTS
Any computer with a strong enough internet connection to play videos online should work great for this course.
All of the tools well be using in this course can be freely downloaded from the web for both Mac and PC and take
up very little space on your computer.
The most commonly used tools youll need in this course are a text editor for writing your code, and a web browser
for viewing the finished result. You can learn about text editors and web browsers in this video from our precourse materials.
The text editor well be using in this course is called Sublime Text 3. You can download Sublime Text 3 here,
and you can get a head start with it from this video.
The web browser well be using is Google Chrome. You can download it here and check out this video to learn
the basics.
Finally, well also be using a design program called Inkscape. This program is great; however, getting started
can be tricky, so make sure to watch this introductory video before you download it here.
If youd prefer to use different tools than the ones we recommend for this course, thats okay. Just talk to your
mentor and course producer, so we can provide you with better help.