Featured Udacity named a 2016 CNBC Disruptor 50 company. Come learn with us!

Close Banner
Udacity
Beginner

Approx. 3 weeks

Assumes 6hrs/wk (work at your own pace)

Join thousands of students

Start Free Course

Start Free Course
Free
You get
Instructor videos
Learn by doing exercises and view project instructions

Course Summary

HTML and CSS are markup languages and the building blocks that make up the web. This course is called "Not your Typical Intro" because it does not follow the usual pattern of other courses and tutorials that you find on the Internet. Usually HTML and CSS are taught with a focus on language syntax. But knowing syntax alone does not enable you to create a webpage from a design. You need to know where to start and how to approach the task, in other words - you need to learn how to think like a front-end developer.

In this course you will learn how to convert digital design mockups into static web pages. We will teach you how to approach page layout, how to break down a design mockup into page elements, and how to implement that in HTML and CSS.

You will also learn about responsive design techniques, which are increasingly important in a world where mobile devices and TV screens are used more and more often to look for information and entertainment.

Why Take This Course?

Front-end Web Developers must have a fundamental understanding of HTML and CSS, which we’ll accomplish in this course by converting digital design mockups into static web pages. To build the web pages you will use HTML, CSS and Bootstrap, the popular Twitter CSS framework.

After completing this course you will be able to build a responsive portfolio site with your own CSS framework. You'll also have the functionality in place to add future projects to your portfolio. Most importantly, you will have an understanding of the DOM and how HTML, CSS, and JavaScript relate to each other.

This course's project is part of our Front-End Web Developer Nanodegree.

Prerequisites and Requirements

You should have ability and skills to download and use a text editor for editing your web pages, we recommend Sublime Text or Atom. You can use another text editor if you want, but it should have the ability to highlight code syntax for your own convenience.

You should be able to download and install Google Chrome, which is the browser we’ll be exploring developer tools with in this course.

See the Technology Requirements for using Udacity.

What Will I Learn?

Projects

Project: Build a Portfolio Site

You will be provided with a design mockup as a PDF-file and must replicate that design in HTML and CSS. You will develop a responsive website that will display images, descriptions and links to each of the portfolio projects you will complete throughout the course of the Front-End Web Developer Nanodegree.

P6: Make Effective Data Visualization

Create a data visualization from a data set that tells a story or highlights trends or patterns in the data. Use either dimple.js or d3.js to create the visualization. Your work should be a reflection of the theory and practice of data visualization, such as visual encodings, design principles, and effective communication.

Syllabus

Lesson 1 - From Design to Code

Diligently employ a code/test/refine strategy as you precisely and deliberately translate initial design documents into static web pages. You'll also investigate the Document Object Model (DOM) and its implications for web development.

Lesson 2 - Your Own Framework

Take pride in creating and personalising your own multi-platform, responsive CSS framework for publishing your professional portfolio projects to the web.

Lesson 3 - Learning and Using Bootstrap

Strategically investigate an existing professional CSS framework as you use it to build a website using responsive design principles while maintaining code readability.

Instructors & Partners

instructor photo

Jessica Uelmen

Instructor

Jessica fell in love with teaching as a wee child when she forced her younger siblings to play "school" and learn all the things she mastered during the past school year. Armed with a BS in Electrical Engineering Technology from the University of Central Florida, she spent her early career teaching teachers how to use microcontrollers and robotics in the classroom. She also has her ME in Engineering Management from the University of Wisconsin-Madison. In her spare time, Jessica enjoys reading, skiing, and traveling the world.

instructor photo

Gundega Dekena

Instructor

Once upon a time Gundega was a Udacity student. In a way she still is, because she is learning new things from instructors she works with and her Udacity coworkers every day.

If you occasionally want to read fun news about robotics, science and games, follow her on G+ - https://plus.google.com/+GundegaDekena.

instructor photo

Cameron Pittman

Instructor

A passionate educator and programmer, Cameron lives and breathes web development as he creates programming courses at Udacity. Before coming here, Cameron was a combination Director of Content and web developer at Seattle startup LearnBIG. He taught four years of high school physics and chemistry in Nashville, TN, during which time he pioneered teaching physics with the video game Portal 2. Cameron graduated with a degree in physics and astronomy from Vanderbilt University and earned his master's in teaching from Belmont University.

track icon

View more courses in
Web Development