Code for Designers

All web designers should know how to code. So where do you start? Here.
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1 student enrolled
Instructed by tracy apps Design / Web Design
70% off
Take This Course
  • Lectures 10
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2015 English

Course Description

"Design in the browser"

"Responsive web design"

"Mobile first"

These are all the latest rage in web development and design, but what do they mean? This course will cover these concepts, as well as provide a base knowledge of useful web code. There is much more demand for designers to know how to code. By the end of this course, you will be able to do just that. Even if you are starting from scratch!

The first part of this course covers basic HTML and CSS. We break down the concepts of this code as well as provide useful code examples to get you started, and have several resources for further research and practice.

The second portion we will dive into helpful tools to speed up development, how to jumpstart our web code with grids and frameworks, and look into how to make our website mobile friendly--covering both code and concept of responsive design.

Even if you are not a designer, but want to learn front-end web development, or want to improve your web code skills, you will benefit from this course.


Advanced topic videos are in progress and will be published in March of 2015. While you are waiting, you can purchase this course at 50% off, AND you will get the advanced topics FOR FREE! The price has already been adjusted here. Once the advanced topic videos are added, the price will return to the full amount.

What are the requirements?

  • No prior web development knowledge is required. Basic computer and internet skills are helpful though
  • You will need a computer with some sort of text editing software. If you want to get fancy with a color-coordinated code editor, there is a list of software options in the course for you
  • The internet. You'll need that as well :)

What am I going to get from this course?

  • Code their designs in HTML & CSS
  • Speed up the code process with SASS, grids and frameworks
  • Be able to code their designs for mobile devices
  • More easily communicate with developers on your team
  • And more!

Who is the target audience?

  • This course is crucial for designers who want to increase their demand in the workforce by knowing basic front-end development code
  • If you know some code but want to know more, you will also benefit from this course
  • For those who know basic HTML/CSS but are unsure of how to make their code responsive

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

It is an exciting time in design for interactive media. Designing for interactive also presents many more variables and challenges. Learning how to code will help you in your design for the web. It is also something more and more employers are looking for in a designer.

Learning how to code sounds daunting. But it doesn't have to be. We will break things down in simple terms. Ready?


Web code likes to speak in letters. Lets go over some terminology first.

Section 2: Lets dive in to code!

This section we will focus on two languages, HTML and CSS. Both of these work together to create the web, but both have specific tasks. Structure, and design are kept separate, and here is an example why.

We also start diving into the concept of "designing in the browser" using HTML and CSS.


HTML is a language that is fairly close to the english language. Lets first break down the structure of HTML tags to make them seem less intiminating.


Increasing our HTML vocabulary, one tag at a time. Here we cover more tags to create our website's structure.


Here we start covering CSS syntax, and start with a sample website, styling colors, padding, margins, etc.


We're starting to get some of these finishing touches done on our example site. Isn't it wonderful when a page comes together?


Lets get into some more layout specific CSS. After looking at CSS floating, things are staring to take shape.

You can also download the final source code that we use in this sample.


Here's some free resources to learn more and use as reference as you code!

Section 3: Getting more advanced
Media queries, grids, sass and frameworks -- coming soon!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

tracy apps, graphic designer. web developer. photographer. artist. nerd.

tracy apps is a creative professional working with small and large clients all over the world for over 15 years. While her college degree is in art, she started hand-coding websites in 1996 after buying her first HTML book and staying up all night to create her first "homepage."

As a business owner, tracy is in charge of all aspects of the creative process for clients. She is also passionate about teaching others about design, user experience, web development, WordPress, photography/video and communication strategy.

Tracy has spoken at over a half dozen conferences and tech meetups, and guest taught at various colleges and universities in Milwaukee. She also wears bowties a lot.

Ready to start learning?
Take This Course