To begin at the beginning, front-end web development is all about creating the actual experience of being on the web. What you see, what you hear, what you learn, what you do—in short, how you engage with a website—that’s what front-end web developers build. To do this, front-end developers deploy a mix of programming and design strategies, and ideally the goal for a front-end developer is to create beautiful websites, that also function well.
Front-End Development vs. Back-End Development
Learning about front-end web development often begins with understanding the difference between front-end and back-end development. I’ll choose a musical metaphor to try and explain: imagine a website as an electric guitar. The components that actually make it possible for the guitar to emanate sound—wiring and pick-ups, for example—are back-end components. The features that make the guitar feel great to play—the action, the body shape, the neck width, plus “the look” of the instrument—those are front-end components.
The two disciplines of course overlap at many points. For example, a volume knob is like a back-end component insofar as it determines the output level of the instrument. But what it looks like, feels like, which way it turns, what color it is, and where it’s placed on the body of the guitar, those are front-end decisions.
I am indebted to Udacity Senior Course Developer Cameron Pittman for an extension of the above musical analogy. In discussing this post with him, he suggested one might consider the analogy of a live concert. What someone in the audience experiences—the lights, the sounds, the sight of the band on stage—this is essentially the front-end of the concert. Everything behind-the-scenes that makes the concert possible from a logistical standpoint—everything from the tour bus and the roadies to the amps and the electricity—that’s the back-end. It’s an extremely apt analogy, as it makes abundantly clear the critical symbiosis that exists between the two.
HTML, CSS, and JavaScript
Front-end developers are distinguished by the tools they use. The three foundational languages that power each and every website are HTML, CSS and JavaScript, and these are the tools of the front-end developer’s trade. When you study to become a front-end web developer, this is where you’ll begin, learning HTML, CSS, and JavaScript.
And that’s exactly where you’ll begin when you enroll in the Udacity Front-End Web Developer program:
PROJECT
P1: 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.
It’s no coincidence that you start out working with principles of Responsive Web Design. In today’s multi-device world, it’s absolutely critical that sites automatically adapt to different platforms, sizes, and orientations.
PROJECT
P2: Interactive Resume
You will develop an interactive resume application that reads your resume content from a JSON (JavaScript Object Notation) file, and dynamically displays that content within a provided template. You will use objects, functions, conditionals, and control structures to compose the content that will display on the resume.
Frogger!
Which brings us to Frogger. A certifiable video game classic, this arcade legend launched in 1981 (interestingly enough, the same year MTV launched!). It has gone through multiple forms and permutations over the decades, and has never really gone away. The game’s pop culture bona fides include an episode of Seinfeld, and a song by punk legends Bad Religion!
It also plays an important role in the learning life of an aspiring front-end developer at Udacity. Here is Project 3:
PROJECT
P3: Classic Arcade Game Clone
You will be provided with visual assets and a game loop engine; using these tools you must add a number of entities to the game including the player characters and enemies to recreate the classic arcade game Frogger.
A fun way to learn, the say the least! If you’d like to see (and play!) an example of a completed project in action, check out Udacity graduate Dawoon Choi’s version (note: Dawoon is now a full-time Software Engineer at Classting Inc.!)
http://dw-frogger.appspot.com/
And if you’d like to see a particularly imaginative take on this project, check out the version version, in which a very clever student actually made game characters out of their instructors!
http://sentry71.github.io/arcade/
The Front-End Web Developer Nanodegree Program
That takes us through 3 of the 6 projects that form the core of the Front-End Web Developer Nanodegree program. After Frogger, you go on to: optimize an existing website (P4), create an interactive neighborhood map (P5), and test application functionalities (P6).
As but one example of how important these projects can be to a developer’s career, here is a recent comment that a student posted on our website:
“I showcased my Neighborhood Map project at an interview, and being able to explain my code and add a new feature was critical in my getting my first engineering job there.”
If you’d like to read a remarkable story of life and career transformation made possible by the Front-End Web Developer program, I encourage you to read James Peterson’s story:
https://www.udacity.com/blog/2016/07/transformation-james-peterson-story.html
Welcome to Your New Career as a Front-End Web Developer!
Probably the easiest way to determine whether a Front-End Web Development career makes sense for you, is to answer this question:
Have you ever gone to a website, gotten frustrated by something to do with the your interactions with that website, and then wished aloud for a feature the site doesn’t have?
Did you answer “Yes?” Then welcome to your new career in Front-End Web Development!
