What do Front-End Web Developers do?

Front-End Web Developers create the user-facing side of websites. They work with web designers to create the sublime, interactive experiences that make the web the addictive environment it is today. When you clicked on this website, the Udacity servers sent information to your computer, which turned into the page you're seeing right now. Who wrote that code? A Front-End Web Developer.

Front-End Web Developers construct static pages, like this one, as well as dynamic web apps like Twitter, Facebook and Google Docs.

  • Responsible for the design and development of user facing code.
  • Optimize web applications to maximize speed and scalability.
  • Create fast, easy-to-use applications, and develop prototypes quickly.
  • Build amazing, immersive user experiences.

Think you're ready to build the next great website?

How to become one with or without formal education

You may be surprised to find out that the first question an interviewer will ask you won't be about your credentials or where you went to school. Instead, you'll be asked to show off what you have built.

The way to distinguish yourself and become a full-time Front-End Web Developer is to prove that you can build fantastic experiences that people love. Build websites that delight your users! Try new technologies! Show off your work to the world!

  1. Keep up to date with current best practices
  2. Get experience by building websites using the latest technologies
  3. Get involved with the open source community, which drives the massively collaborative Front-End world

An awesome portfolio of work will help you stand out from the crowd and get the job you want—regardless of where you went to school.

The portfolio that gets you an interview

Websites are constantly updating their design. The technology that Front-End Web Developers use changes just as rapidly. Building a portfolio of websites gives you the chance to prove that you can create modern experiences with the latest and greatest tools.

Web Developers have hundreds of tools and technologies to choose from while they are building a project. Trying new technologies and working through the same choices and tradeoffs professional Web Developers make every day will empower you with practical knowledge about the entire field of Web Development.

  • Check out the section "What to learn in what order?"
  • Build an online portfolio with websites that you're proud to show off!
  • Try new technologies.
  • Be able to discuss which choices and tradeoffs you've made.

How will you show the world that you love building great products on the web?

Concepts of Front-End Web Development

An approach to problem solving

Learn firsthand from a Front-End engineer how he solves problems.

Understanding Functions in JavaScript

Learn about functions and how you can use them to reuse, encapsulate, and structure your code.

Responsive Web Design

Overview of responsive web design with an example from reddit.

Defining a Web Layout

Learn web layout and how it can be used in responsive design.

What to learn in what order?

Languages

HTML

HTML is the first of the big three languages you need to learn to make websites—HTML, CSS and JavaScript. HTML isn't a programming language per se. It describes how elements on a website should be laid out and provides browsers with a list of all the other files, like CSS and JavaScript, that websites need. You can think of HTML like the blueprint of a house. It tells you how big the rooms are and what should be inside them. But it doesn't tell you how they should look.

CSS

If HTML describes the layout of a house, CSS describes the look of a house. CSS, or Cascading Style Sheets, is responsible for the way websites look. Colors, fonts, and even some animations are all controlled by CSS. Like HTML, CSS isn't a programming language. It's a text document that reads like an interior designer's instructions for making a website look great.

JavaScript

Of the big three web languages, JavaScript is the only one that's considered an actual programming language. JavaScript controls interactions on a website. It's like a handyman that can tear down walls, build new rooms and redecorate your house. For a simple, static website, you won't need to use much JavaScript. But for a dynamic web app you'll need an in-depth understanding of the language.

Web design techniques

Responsive design

Open a website and make your browser smaller. Did the page content change its layout to fit the new screen? That’s responsive design. People expect modern websites to look great on their phones and on their laptops. By diving into responsive design principles, you’ll learn how to make websites that scale and adjust themselves to offer amazing experiences regardless of the device.

Modern design languages

A design language is a set of principles used to organize and unify the design of a product. Google, for example, recently released the specifications for Material Design, a modern design language for responsive websites and mobile apps. Material Design puts a focus on using layers that look and behave as if they were made with colored construction paper. Following a design language will help you create cohesive, intuitive experiences for your users.

Frameworks

Bootstrap is a good example of this. Frameworks make it easy to structure and build websites. They provide custom CSS classes that ensures that your content looks great no matter the device. Frameworks can help you follow industry best practices and modern design principles. Other frameworks, like Foundation, provide the same kind of structure for your websites.

Web apps

JavaScript frameworks/templating

You know how your Facebook page has the exact same layout as all of your friends' pages? That's because of templating engines. Templating engines are key for creating dynamic websites based on data that they pull from back-end servers. Understanding how to use a templating engine is the first step in building a web app.

Examples are:

  • Angular—a framework containing a templating engine
  • Ember—a framework containing a templating engine
  • Handlebars—a templating engine
  • Mustache—a templating engine

Peripheral skills

Source code control

With complex projects, how do you maintain your code? Version control software like Git helps software developers around the world save and maintain their code, even as projects grow to hundreds of developers and dozens of subprojects.

Web performance

Once you’ve made your website, how will you ensure it's fast? By understanding a few simple principles of browser rendering, you'll be able to make sure that you deliver fast, efficient websites to your users.