The Ultimate Guide to Becoming a Front End Developer

WHAT EXACTLY EXACTLY IS A FRONT FRONT END DEVELOPER? Do you love looking at beautiful websites? Do you want to have the power to do cool things like make websites interactive, work with gorgeous typography, and turn ideas into actual websites that are a joy to use? You’re in the right place! Front end development skil ls will give you the tools you need to make it happen. Front end developers build the “presentation layer” of a website. In other words, all the parts that the user sees—the layouts, buttons, forms, and more—are powered by code written by a front end developer. By contrast, back end developers take care of all the behind-the-scenes stuff: the servers, databases, and apps (including content management systems and ecommerce platforms, among other things) that make a website run. Front end developers work with HTML, CSS, and JavaScript code to build the presentation layer. They need to be familiar with things like responsive design, user experience design, and modern web standards. They also need to understand the constraints of what can be done with back end code. Granted, you can build some websites without using backend skills (other than being able to upload your site files to a web server). There are even content management systems (especially flat file CMSs—those that don’t use a database to store information, but rather store everything in separate files) and ecommerce platforms that don’t require you to have skills beyond HTML, CSS, and JS.

FRONT END TECHNOLOGIES YOU SHOULD KNOW ABOUT (AKA, THE SKILLS YOU NEED) HTML & HTML5 HTML is short for “hypertext markup language” and it’s the coding language used to build websites. Every single website in the world is built with HTML and it’s the only thing you need in order to make a website (although it will be pretty basic—think: 1995).

HTML5 is the latest version of HTML (although they are working on HTML6!), and it made it possible to do a bunch of advanced things with HTML, such as find someone’s geolocation, create local databases for offline viewing, and more. CSS & CSS3 CSS is a styling language that allows you to make HTML look pretty. CSS is used on almost every website in the world and you are DEFINITELY going to want to use it on your website.

CSS3 is the latest version of CSS, and it made a bunch of cool new features available, including animations, color gradients, text effects, new ways to select what HTML element you are describing, and something called flexbox which makes it possible to design seamless websites that work across every device you can image. ALL THINGS RESPONSIVE Responsive Web Development is just a way to use the latest features of HTML and CSS to make sure that your websites work on every browser and mobile device. Think about it less like a specific, isolated skill, and more like the new way to do everything. All design and development needs to be responsive these days, since we access the Internet in so many places besides our desktop computers. VANILLA JAVASCRIPT JavaScript is a programming language that works in your browser. JavaScript can do ALL kinds of things, but in particular, you will use it to make heavily interactive web user experiences.

The Ultimate Guide to Becoming a Front End Developer

2

JavaScript is like the LATIN of front end technologi es. Everything that’s cutting edge in front end technologies is built on top of JavaScript. So you gotta know it! Check out vanilla-js.com for more! jQUERY jQuery is the most popular and commonly used JavaScript framework. It’s also been around the longest!

You can use jQuery (as a kind of JavaScript shorthand) to create interactive elements on your website from scratch. Or, you can take advantage of work other developers have done for you and use one of the thousands of jQuery plugins that are available for free on the Web in jQuery libraries. OTHER JAVASCRIPT FRAMEWORKS jQuery is just the tip of the iceberg. JavaScript frameworks are one of the “hottest” trends in front end development right now, and there are plenty to choose from. The purpose of these frameworks is to make it possible (and easy) to do all kinds of cool things with JavaScript that were previously only possible with backend frameworks. Some popular JavaScript frameworks:

Angular.js React.js Ember.js Backbone.js All of these front end technologies together are used to build the parts of websites you (and billions of other internet users) see every day!


3

THINGS A FRONT END DEVELOPER BUILDS As already mentioned, front end developers (or those with front end dev skills) have a hand in building every website and web app out there that has any kind of presentation layer (which is almost all of them now). Check out some of the awesome websites created (at least in part) with front end developer skills on the next few pages. (Click on each image to go to the site itself to see animations, interactions, and more in action.)

Legwork Studio


4

Void

The Boat


5

Wrap Genius

The Wes Anderson Collection


6

Airbnb

OpenGov


7

Pixate

As you can see from those examples, you can build pretty much anything with front end developer skills.


8

THE PERKS OF THE JOB Front end development has a ton of great perks for anyone who loves to use code to solve problems and help create amazing user experiences. Front end developers are in high demand, which means salaries for even entry-level positions are super competitive. Add to that airtight job security and tons of available jobs, and you can see there are a lot of options out there for anyone who wants to get into front end dev. SALARY AND COMPENSATION Salaries for front end developer jobs vary depending on location and what level the position is. But the good news is that almost every front end developer position is well-paid, starting around $70,000 per year.

Entry-level jobs in front end development, in high-demand areas like San Francisco or NYC, can start in the low 6-figures. And salaries only go up from there depending on experience and the particular market. Front end dev jobs at some companies can even reach over $200,000, depending on expertise, and over $150,000 is not uncommon for a senior dev. The point of all this is that from day one as a front end developer, you can make good money, and it only gets better with experience and added skills! TYPES OF COMPANIES HIRING Front end dev jobs are available at virtually any company that has an in-house web development team. Tech companies like Spotify, Apple, Skype, Groupon, Reddit, and eBay all hire front end devs as both employees and contractors (making it a great career path for freelancers, too!).

But in addition to tech companies, you’ll find front end developers at media companies like CNBC, financial companies like Fidelity Investments, and retailers like Barnes & Noble. Front end development can be a great way to work in virtually any industry you’re passionate about because every business under the sun needs a fresh website.


9

EXAMPLE JOB LISTINGS There are tons of front end developer job listings out there. They come with a few different possible job titles, though, so you may want to get creative in your searches.

The two key titles to search for in addition to “front end developer” are JavaScript Developer and Front End Engineer . You might also find some front end dev jobs listed as just Web Developer , too. Note: Be sure to check for the variations “front-end,” “frontend,” and “front end,” as they are all used in the industry. Talk about cutting edge—we haven’t agreed on a title yet! ☆ Junior

Front End Developer, SmartBug Media (Remote) In addition to creating stunning websites and experiences that deliver measurable impacts for our clients, our development team is valued for their contributions, ideas and process improvements. You’ll have a seat at the table as we adopt new technology, build and implement best practices and have a great time doing it. This junior position has room to grow into great opportunities. We’re looking for responsible developers that have experience working remotely and delivering high quality work. We also want you to be a long-standing member of our team that will look back years from now and be thrilled that you have made the right decision. You’ll be challenged everyday and will gain valuable experience working with different CMS platforms and marketing automation and analytics tools such as HubSpot.

☆

Front End Web Developer, The Atlantic (Washington, D.C.) We are looking for a talented and knowledgeable front-end engineer who is passionate about clean code and great journalism to join our growing team for full-time on-site work. We welcome out-of-town applicants willing to relocate to the DC metro area but are currently unable to sponsor non-citizens unauthorized to work in the United States.


10

PRIMARY RESPONSIBILITIES: ● Help improve and implement our new Atlantic style guide and CSS framework ● Write clean, maintainable, and well-organized CSS ● Write well-documented high performance JavaScript code ● Help evaluate tools such as BabelJS, Grunt, and Browserify and how they might fit into our workflow ● Work with designers and developers to craft innovative reading experiences ● Implement and deploy new features to TheAtlantic.com and CityLab.com where they will be viewed by millions of people ☆

Front End Developer, TrendyMinds (Indianapolis, Denver, or Remote) We’re looking for a candidate who is passionate about building scalable, modular and responsive websites—whether that’s using HTML, CSS or JavaScript. We want someone who understands the latest in front-end technology, with a good eye for design. We're searching for a bright, energetic person who can work closely with our creative and development teams to bring complex sites to life. This means we want someone with experience that can make our clients win in their competitive fields. As a Front-End Developer, you’ll work closely with our team to bring interactive concepts to life, meaning you need to be fast at understanding the complex needs of enterprise organizations, but savvy enough to pick the correct path for success.

☆

Senior Frontend Engineer (React), CrowdSpring (Chicago or Remote) As a senior frontend engineer, you’ll have a huge impact on how we design, build and deliver our services to millions of people. We're looking for an extraordinarily talented engineer to join our team. Our site is seen by millions of people around the world and we’re focused on solving real problems. Your contributions will be immediate and far-reaching. This isn't the kind of gig where you're handed a to-do list from a PM - you'll help make the big decisions. We’re looking for engineers who are not afraid to stick their neck out in pursuit of innovation and creative solutions. People who know what


11

they want, who execute against all odds, are meticulous, detail oriented, and take pride in their work. Above all we’re looking for passionate individuals who enjoy what they do and seek to live balanced and happy lives. ☆

Senior UI/JavaScript Frontend Engineer, Close.io (Remote) We're looking for experienced full-time developers to join our core team who have a strong understanding of web technologies and want to help design, implement, and launch major user-facing features. YOU SHOULD... ● have 3+ years experience building modern front-end applications in JavaScript, HTML5, and CSS ● have great product sense and be able to think through user experience issues before diving into the code ● write maintainable, testable, and performant JavaScript ● have a love for great UI ● enjoy debugging all aspects of the front-end app including memory leaks and quirky CSS across browsers ● have experience implementing real-time (e.g. websockets, polling, etc.) web apps ● have significant experience with REST APIs and thoroughly understand HTTP requests BONUS POINTS IF YOU... ● have an eye for design and experience with Photoshop, Sketch, or similar ● have contributed open source code (core or plugins) for a popular frontend framework such as Backbone, Angular, or React


12

PERFECT FOR A REMOTE CAREER! One of the best parts of being a front end developer is that you can literally do your job from anywhere with a decent internet connection. Of course, you might have already noticed that from the job listings above (most of them are remote, or at least remote-friendly).

Want to live in the small town where you grew up? Go for it. Want to move to the city with the best school districts for your kids but avoid a commute? You got it. Want to spend six months (or longer) traveling the world without coming home broke? You can do that, too. Imagine what your days could be like: wake up and have coffee at your favorite coffee shop while doing a little work, hop on a plane to Europe before lunch and work on the plane so that when you arrive at your destination, you can take the evening to explore the city, all without worrying about vacation days or making up for lost income!


13

WHAT A FRONT END DEVELOPER CAREER LOOKS LIKE A career in front end development doesn’t necessarily mean you sit at a computer coding all day. There are a ton of different career paths that use front end dev skills. You might start out as a junior front end developer. Junior developers usually work on a team, under the direction of a senior developer. It’s a great way to learn more on the job, by actually working on projects, and gain experience at the same time. Junior front end devs usually need minimal experience. Instead, you’ll need a portfolio that shows you know the basics of the job and can complete projects. From there, you can move up the ranks, taking on bigger projects and more responsibility. Eventually, you can become a senior front end developer, leading your own team and supervising new junior developers. Senior front end developers sometimes take on non-development responsibilities, too, like consulting or working with clients. You don’t have to spend your days as a front end developer working for a company or agency, though. There are plenty of front end development options for those who want to freelance, or even those who want to start their own business. Take Adda, Skillcrush’s CEO, for example. Front end development skills (along with other tech skills), are what set her down the path to eventually starting Skillcrush. The skills she learned and experience she got designing and developing sites for companies like WNYC, Pro Publica, The Huffington Post, and The New York Times, and also working as a technical producer at MTV and VH1, set her up to build and launch Skillcrush from the ground up. Learning front end developer skills is an important building block for all kinds of technical careers, whether you end up as a front end developer or doing something else entirely (like starting a business)!


14

FRONT END DEV SKILLS MAKE YOU BETTER AT LOTS OF THINGS

When you think about learning a set of skills, like those a front end dev has, you usually think about it in terms of getting a specific job. You might be thinking, “I don’t know if I want to be a front end developer. So why bother learning these skills?” The awesome thing about front end dev skills is that you can use them for a ton of different career paths. Like starting your own company, being a better designer, or as a jumping off point for learning even more. START YOUR OWN COMPANY You’ve seen how front end dev skills helped Adda start Skillcrush. But tech companies aren’t the only kinds of companies that can benefit from a founder who has developer skills.

Almost every business out there has a website now. That means every business that isn’t designing their website in-house is working with a web designer and developer. Knowing how to communicate with those pros is a key way for founders and CEOs to make sure they get what they want (with a design/dev team that respects them for knowing the lingo and doesn’t get frustrated with vague, non-specific instructions). Learning front end dev skills means you won’t have unscrupulous developers taking advantage of you by using a whole bunch of jargon that you don’t understand. Instead, you can come to the table informed, making the entire project run more smoothly. Even if you are creating your company’s website in-house, being able to lead your team and speak their language makes you a much more effective leader. Plus, being able to jump into the trenches and help out with code as needed is a great way to keep your team motivated. If you’re starting a company and want to minimize startup costs, you can even create an MVP (Minimum Viable Product) version of your site to get started, as well as mockups for presentations and other materials for attracting investors and customers.


15

BE A BETTER DESIGNER Designers who have front end developer skills have some serious advantages over those who don’t. Even if you do little or no actual coding, knowing how to code the front end of a website is a great skill to add to your repertoire.

First, designers with dev skills understand what a developer needs from them to actually make their design come to life. That means you’ll be less frustrated by the implemented designs, and the developers you work with will be less frustrated with your graphics. That makes for a happier team all around! Adding front end dev skills also makes you a more valuable employee if you’re working as a designer for an agency or company. Being able to jump in and help out the dev team even when your primary role is design is super helpful and valuable. Plus, that part about having happier teams all around is two-fold when you’re all employees working together. If you’re freelancing as a designer, adding front end development skills can mean you don’t have to outsource or refer your clients to another freelancer—you can add that extra menu (or what have you) for them. Being able to take a client’s site from design right through to completion on your own, without having to hire other developers, is a great way to grow your business.


16

THE PERFECT STARTING POINT FOR ANY DEV CAREER Front end dev skills are a fantastic starting point for any kind of web development career. Learning how the front end of a website works is super helpful when you’re learning how the back end of a website works.

Plus, while each programming language out there has its own specifics, the general concepts of how coding works stay pretty consistent from one language to the next, whether you’re working with JavaScript, PHP, Ruby, Python, or some other language. Learning to work with frameworks and within web standards is also a good building block to any kind of dev career, and front end developers have to be great at both!


17

YOUR FRONT END DEV PORTFOLIO A super awesome portfolio is a must-have for any kind of front end developer job. Your portfolio is what proves your value to people who might hire you, whether as an employee or as a freelancer. Without that proof of the work you can do, getting hired can be almost impossible. But what if you’re totally new to dev? What if you don’t have anything to put in a portfolio outside of a few personal projects you’ve done while you learn? Good news: those little concepts and small projects are just as valid in a portfolio as a job you might do for a high-profile client down the road. You can use anything that shows your skills, whether it’s your personal website, a web app or game you created for fun, or an open source project you’ve contributed to. On the Skillcrush blog, Deepina Kapila profiled 5 awesome “pretend” projects you can add to your portfolio regardless of where you are in your career. Here are the ones you could use for a front end dev portfolio. From Dee: The DREAM client website – A dream client website allows you to showcase how you think in terms of scale. I once interviewed a self-taught developer who learned to code over the summer and had redesigned the New York Times website on his portfolio. It was amazing. He thought through every detail – how it looked on tablets and mobile phones, what the app experience was like, how comments and threading worked in his solution and lots more. It was the only project in his portfolio – but of course it was so thorough and thoughtfully presented, it was all he needed to get the job. The non profit or mom ‘n’ pop website – A great project to include in your portfolio is a design or redesign of a small local non profit or your favorite neighborhood take-out restaurant. One of my favorite to-go haunts is a delicious Mediterranean place named Sarah’s. I’d love to redesign their website, giving it a completely modern feel (no flashing pointing hands for the


18

special of the day) while staying true to the family’s wonderful sense of community and humor. I’d also love to design an html menu page because right now the only way to view their offerings is by downloading a PDF (a pain on my iPad and iPhone bc I have to take 3 steps to download & view it). It also looks like they started working on a “Meet the Chefs” page—I’d love to see this through. It would be great if newcomers visiting the site could meet the chefs—they’d be so taken by their personalities and warmth, they’d never be able to resist a visit (The chefs are a married couple. Whenever I walk in they look at me and gasp and jokingly ask, “Deepina you are hungry AGAIN?” It’s hilarious and their joie de vivre really comes across in the spices in their food). Improved mobile product UX – Focus on mobile UX to show how you would improve the experience for an existing client or brand in the mobile landscape. This is a project that allows you to be creative within some very specific constraints. Do some research here. Perhaps you love a website but think the mobile experience needs an overhaul. Work towards its reinvention and create UX deliverables every step of the way. Redesigned newsletter template – This may sound like a snooze fest, but I did this for my first portfolio while applying for one of my first jobs in tech. One of the administrative duties of that job was to redesign and send out newsletters about events, interviews, breaking news, and other timely items. So before I applied, I spent half a day redesigning the org’s newsletter, creating 3 samples and including it all in my portfolio. Needless to say, they were impressed. I got the interview (and two follow ups) AND the job. And if you’re looking for even more, check out Cameron Chapman’s Skillcrush article on more advanced projects you can add to your portfolio. From Cameron: A stock theme for a popular CMS WordPress is the most popular content management system currently available, so it makes sense to develop a stock theme


19

for WP. That said, there are tons of other options available if you do some research. One of the big perks about developing a stock theme is that you can also sell it as a premium theme, generating income while contributing to your portfolio. Or you can give your theme away as a means of promoting yourself (consider offering support or customization for an additional price in this case). Look at other themes that are on the market—and what sets them apart—and then design one of your own! ThemeForest is a great place to check out tons of successful theme designs. Look at the most popular designs on the site, even if you don’t plan to sell your theme. And you don’t have to get too fancy. Check out these simple WordPress themes by Paul Jarvis. Your portfolio itself! If you’ve been using a stock theme, even one that’s customized, to host your portfolio, it’s time to upgrade! Designing an entirely custom portfolio site is a chance for you to really show off who you are, what your design style is, and how you can do more for your clients than your competitors do. Really take time to plan out and create a site that is 100% you. Think about the kinds of projects you’ll be showcasing, then figure out the best way to display those projects. Check out Folio Focus for some great inspiration from other designers’ portfolios. If you want even more awesome advice on what to put in your portfolio, check out these articles: How to Build an Impressive Portfolio When You’re New to Tech 24 Essential Portfolio Tips For New Techies Nothing to Put in Your Portfolio? Read This! 5 Things You MUST Include in Your Tech Portfolio


20

WHAT IF I’M NOT A DESIGNER? Some front end developers also have design skills. But some don’t, at least not to the level they’d like to show off in their portfolio.

What are you supposed to do then? There are TONS of designers out there who have created projects for their own portfolios, personal projects, etc. that don’t have the front end dev skills to bring them to live. Reach out to designers whose work you admire and see if they want to collaborate on something! Check out sites like Behance or Dribbble for designers whose work you love, and see if they’d be interested in having you write the code for some of their designs. It doesn’t hurt to ask!


21

HOW TO GET STARTED The skills a front end developer needs are laid out in the first section of this guide. But just knowing what skills you need to learn and actually figuring out how to learn them—and then what to do after you learn them—is a different story. If you’re 100% new to tech, then start with the Skillcrush 10-day Coding Bootcamp. It’s completely free, and will get you up to speed on the basics, from how HTML works to the difference between the Internet and the Web. After that (or if you already have a little bit of knowledge about how the web and basic coding works), sign up for Skillcrush’s 3-month Front End Developer Career Blueprint. You’ll learn all you need to get started in front end dev: ●

HTML & CSS ● Responsive Web Development ● Git and GitHub ● JavaScript & jQuery You will even start working on real projects while you learn (and earn money along the way). Plus, it’s a solid foundation for the rest of your career as a front end developer. When you finish your Blueprint, you’ll have some projects you can add to your portfolio. Supplement that with a few of Dee’s pretend projects (or more real client projects), and get out there to start looking for your first junior developer job or more freelance work! There are so many opportunities out there for front end developers, and if you show that you’re passionate about development, eager to learn and improve, and have a few projects to show off, you’ll be well on your way to your new dream career.


22

SOME RESOURCES FOR FRONT END DEVS Here are a handful of resources you can check out if you want to do a little more exploring about what front end dev is all about, as well as some tools that will help you along the way. REFERENCES AND NEWS HeyDesigner: Curated articles for designers and front-end developers CSS Wizardry: Front-end architecture and performance engineering How to Keep Up to Date on Front End Technologies: Follow these simple steps to stay up to date WebPlatform.org: The latest information on how to use the technology that runs the web — HTML, CSS, JavaScript and more Frontend Directory: Manually curated collection of resources for frontend web developers Web Field Manual: Curated list of resources focused on documenting only the best knowledge for designing (and developing) experiences and interfaces on the web JavaScript Weekly: A free, once–weekly e-mail round-up of JavaScript news and articles FrontEnd Focus: A once–weekly HTML5 and Web Platform technology roundup. CSS 3, Canvas, WebSockets, WebGL, Native Client, and more TOOLS Can I Use ?: "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers HTML5 Please: Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are JSHint: A tool that helps to detect errors and potential problems in your JavaScript code PlainJS: Vanilla JS utilities for writing powerful web applications without jQuery


23

The Ultimate Guide to Becoming a Front End Developer

Recommend Documents