DEV Community: Alexa Goins

15 Skills You Need to Become a Front-End Developer in 2020

Alexa Goins — Tue, 24 Nov 2020 20:19:35 +0000

You can think of front-end development as an art form. Through code, developers can create platforms that communicate meaning and function. Like with any art, developers need a unique set of skills in order to be successful. But, what Front-End Developer skills do you need to be successful in the tech industry?

Let’s look at the specific development and soft skills Front-End Developers practice so you can figure out if this is the right career for you.

Here’s what we’ll explore today:
What Front-End Developer skills do I need to be successful?
What is front-end development?
What do Front-End Developers do?
Is front-end development a good career?
How can I become a Front-End Developer?

What is front-end development?
Front-end development is a type of computer programming that focuses on the side of a website the user can see and interact with. In other words, Front-End Developers work on what’s known as the client-side of a website.

What do front-end developers do?
A Front-End Developer works to build the visual aspects of a website, the side of a website a user would actually see and interact with. A Front-End Developer takes the visual designs a User Interface or User Experience (UI/UX) Designer created and brings them to life, making them functional through the use of coding. They typically work in HTML, CSS, and JavaScript.

Unlike Back-End Developers, Front-End Developers are more focused on the user interface and making sure the customer-facing part of a website is functional. They don’t work on the server-side of a site, the side that users can’t see. Learn more about the difference between front and back end by checking out this blog on the topic.

Front-End Developers use code to build web elements like:

Buttons
Layouts
Navigation
Images
Graphics
Animations
Content organization

What Front-End Developer skills do I need to be successful?
Front-End Developers need a mix of web development skills and soft skills. These are the Front-End Developer skills you need to cultivate if you’re considering entering the field.

Soft Skills

Creativity

While you may not be doing the design heavy lifting as a web developer, you still play a huge role in the creation and deployment of a website. Thus, it’s essential to be able to think creatively in order to implement the vision given to you by UI/UX or Web Designers. This is where development becomes an art form as there are usually multiple correct ways to create a functional and beautiful front end.

Communication Skills

As a Front-End Developer, you’ll likely be working on a team. So, you’ll need to be able to communicate well in order to properly build and deploy a site. You’ll likely work with UX/UI Designers, a Back End Developer, and a Project Manager. Additionally, your work on the front end needs to communicate important information with users—another reason development can be thought of as an art form.

Teamwork

Like we mentioned above, web development is a team effort. Contrary to popular belief, your job won’t just consist of sitting in a dark room staring at code all day. You’ll work with others to make sure each web development project goes smoothly. Ensuring optimum web design and web performance is a team effort.

Growth Mindset

Growth mindsets are essential in most roles these days. A growth mindset is believing you can develop and grow your skills through dedication and hard work. It’s what keeps people from getting discouraged and giving up when something goes wrong in an academic, professional, or personal project or situation. Having a growth mindset is especially important for Front-End Web Developers because they need to know how to learn and grow from their mistakes to produce better user interfaces and level up in the field. As with anything, dedicated practice leads to improvement.

Problem-solving

As a web developer, solving technical problems often falls on your shoulders. This means you should be a solutions-driven person who isn’t afraid of a little pressure on the job. A good way to gauge your solution-finding abilities is to think of a time where something went wrong at work. Did you spring into action mode and come up with ideas on how to fix it? Did you panic? Thankfully, most soft skills can be developed with a little practice and self-awareness. If you feel like you might be lacking in any of these areas, know that it’s not too late to gain these skills.

Technical Skills

CSS & HTML

CSS (Cascading Style Sheets) and HTML (HyperText Markup Language) are the foundations of web development. With these tools alone you can build a website. CSS is what’s used to style the visual layout while HTML provides structure to the webpage. These languages and all the other technical skills listed here are a developer’s tools of the trade, allowing you to create from a blank canvas (or remix an existing platform).

JavaScript

While you can build a basic website using CSS and HTML, you need JavaScript to make the website interactive. If you know all 3 of these languages, you’re well on your way to landing developer jobs. A good way to remember what JavaScript does is to think about some of the interactive sites you’ve visited. Things like online gaming, quizzes, and animations need JavaScript to run.

JavaScript (JS) Frameworks and Libraries

There are a few different ways to make your coding game faster. One of them is with JavaScript frameworks and libraries. For example, jQuery is a JavaScript library. Similar to the kind of library you’re probably thinking of, this kind of library is a collection… but instead of books and films, you’ll find plugins and extensions. You can use these to add prefabricated elements to a project.

JavaScript frameworks serve the same purpose, except they provide your JavaScript code with pre-made structures. Some of the most popular JavaScript frameworks include AngularJS, Backbone, Ember, and ReactJS. Frameworks and libraries help kick off your coding process by minimizing the amount of work you’ll need to do in the beginning.

CSS Frameworks

Much like JavaScript frameworks, CSS frameworks help take away some of your workload. The only difference is that they work within CSS instead of JavaScript. They’ll minimize the amount of work you’ll need to do upfront and make your coding process faster. Bootstrap and Foundation are 2 common CSS frameworks you’ll hear about.

CSS Preprocessors

Knowing how to work with CSS preprocessors will make your development job easier. Sass and LESS are among these preprocessors and you’ll find them on most job listings. A CSS preprocessor processes code before it’s published to a website. It ensures your code is well-formatted and cross-browser friendly.

Responsive/Mobile Design

With so many people browsing the web via our mobile devices these days, responsive design skills are a necessity for developers. Responsive design refers to how a website’s functionality and content can change based on the device it’s being viewed on. A Front-End Developer job will often require the ability to create adaptive mobile designs, so you’ll need to have responsive design skills in order to be successful.

Content Management Systems (CMS)

Content management systems, or CMS for short, are where you build your website. The most popular CMS is WordPress; it currently hosts a whopping 60% of websites. There are plenty of content management systems to choose from but learning about WordPress (as it is clearly the most popular of them all) will help you a lot.

Testing & Debugging

Testing and debugging processes help ensure your website performs well and without your users encountering any issues while they’re exploring all of the awesome content on it. There are several types of testing methods, such as UI testing and unit testing, that help spot errors (or bugs).

Debugging is figuring out where any errors originated and fixing them. You’ll want to be familiar with these processes as they’ll be a reoccurring web dev task (and the butt of many developer jokes).

Cross-Browser Development

One aspect of web performance you may not think of is how a website performs across different browsers. While most browsers today are able to keep consistency when displaying a site’s content, there are still times you may see small differences. That’s why cross-browser development is still considered one of the many important front end skills to know. Along with the idea of responsive design, you can think of this concept as an artist being able to work across different canvases.

Git/Version Control

Version control helps you stay on top of all the changes you’ve made when working on a site. If you mess something up, version control lets you go back to an older version of your code. One of the most common version control systems is Git. You’ll definitely need to learn how to use it if you want to land a web dev job. It can be a life-saver.

Is front-end development a good career?
In short, yes. With the web industry booming, thanks to so much of our lives being lived online now, front-end development is here to stay and can easily make for a fulfilling career choice.

Front-End Developers also have high earning potential, so you could make bank if you decide to pursue a front-end development role. As of publishing, the average salary for a front-end developer in the United States is just under $77,000. Of course, this figure changes quite drastically depending on your experience level and location (like with any job). Glassdoor lists $48,000 to $131,000 as the current salary range for Front End Developers in the U.S.

In addition to being an in-demand field with high salaries, another reason to consider front-end development careers is for the flexibility and opportunity for creative growth they provide.

Many tech companies offered remote working benefits even before the COVID-19 pandemic. As a tech worker, chances are you’ll have some freedom and flexibility in where and how you work even after the pandemic ends.

As a web developer, you’ll get to flex your creative problem-solving muscles, which can be especially rewarding for those who like to feel challenged in their work. Like we said earlier: usually, there’s no single right answer to a web development problem. You can use your tools, best practices, and a metaphorical canvas to create and communicate.

Considering all of these factors, it’s easy to say web development is a good career option for anyone who wants to be a lifelong learner, enjoys flexibility, and wants to grow in an in-demand career.

How can I become a Front-End Developer?
Thankfully, our world is quickly changing and employers are becoming more open to alternative forms of education. The technology sector has been incredibly helpful in innovating in this way, opening up job opportunities to people from all walks of life and educational backgrounds.

As tech work like front-end development is more skills-focused, you can take a few different routes to become a developer. Currently, there’s the traditional bachelor’s degree route, the self-learning route, and the bootcamp route.

There are definitely pros and cons to all 3 of these options. But here at Kenzie Academy, we believe the most cost and time-effective option is taking on a bootcamp or upskilling program. Here’s why.

Bootcamps offer a structured environment and you’re often learning from industry practitioners as opposed to academics. While higher education professors have a lot to offer students in terms of learning skills and knowledge, they may not be as on top of industry trends as a practitioner. Bootcamps and upskilling programs go beyond theory as you learn practical workplace skills needed to have a successful career in tech.

But, not all bootcamps are created equal so it’s important to do your own research to figure out which one works best for you. We recommend choosing one that offers live instruction and dedicated facilitators (as opposed to pre-recorded lessons) so you can get your questions answered in real-time by someone you actually know.

As a Kenzie Academy Software Engineering student, you’ll gain the skills needed to be a Front-End Developer, Back-End Developer, or Full Stack Developer. The choice is yours after you finish the full-stack engineering curriculum. Our Software Engineering program will teach you HTML, CSS, JavaScript, SQL, React, Python, and Django.

There’s no need to stress about finding a job afterward either because our Placement Team and national network of Employer Partners will guide and work with you to help find the perfect role for you.

Even better, you can get certified for a Front-End Developer position without having to shell out all your savings. Our programs are affordable and designed to make a career transition a breeze.

Front End vs. Back End: What’s the Difference?

Alexa Goins — Tue, 24 Nov 2020 20:17:33 +0000

If you’re new to the world of coding and software engineering, you may be confused by terms like front end, back end, and full-stack development. Your head may swirl at the sight of programming languages like Ruby on Rails and Javascript.

Let’s take a quick poll. Raise your hand if you find yourself asking, “What does it all mean? What’s the difference between front end and back end?” We get it, we were there once too.

At Kenzie Academy, we believe a career in tech is possible for all who are open to learning and put in the work to master the art of coding. Let’s take the confusion out of some of these technical terms. We’ll give you the scoop on front end vs. back end.

Today, we’re demystifying the difference between development styles and tackling these questions:

What is front end development?
What is back end development?
How are front end and back end development different?
What is full-stack development?
What pays more, front end or back end?

First of all, website development is the process of building websites and applications. Unlike UX and UI Design, web development focuses more on coding and making sure a website functions well. It’s essentially the usability aspect of websites and apps. Now, where do terms like front and back end come in? Front end development and back end development are the 2 different types of web development.

Let’s dive in and get acquainted with these web development styles!

What is front end development?
Front end developers build with the user in mind. Front end development is a style of computer programming that focuses on the coding and creation of elements and features of a website that will be seen by the user. It’s about making sure the visual aspects of a website are functional. You can also think of front end as the “client side” of an application. Let’s say you’re a front end developer. This means your job is to code and bring to life the visual elements of a website. You’d be more focused on what the user sees when they visit a website or app. And, you’d want to make sure the site is easy to interact with while also running smoothly.

These developers take the visual designs from UX and UI designers and bring the website to life, making sure it functions well for the user. One of the many ways you could use front end skills is in creating a static website, which is a website with fixed content that’s delivered to a user’s browser exactly as it’s stored. You might run into a static website if you happen upon a simple landing page or a small business website that doesn’t allow users to perform any interactive tasks.

Front end developers build elements like:

Buttons
Layouts
Navigation
Images
Graphics
Animations
Content organization

What is back end development?
Back end development focuses on the side of the website users can’t see. It’s what makes a site interactive. The back end can also be referred to as the “server side” of a website. As an example, let’s say you’re running a social media website. You need an accessible place to store all of your users’ information. This storage center is called a database and a few widely used examples include Oracle, SQL Server, and MySQL. Databases are run from a server, which is essentially a remote computer. A back end developer will help manage this database and the site contents stored on it. This ensures that front end elements on your social media website can continue to function properly as users browse uploaded content and other user profiles.

While users do not directly interact with the back end of a website, they’ll indirectly interact with elements these developers work on through a front-end application. Back end development deals with storing and arranging data while also ensuring the front end is functioning well.

Back end web developers work on tasks like:

Building code
Troubleshooting and debugging web applications
Database management
Framework utilization
Front end vs. back end: what’s the difference?
Still thinking, “Front end vs. back end…what’s the difference?” Now that you’ve gotten an overview of both front and back end, let’s discuss their differences. There are 4 main distinctions that set front and back end development apart.

Front and back end developers work on different sides of a website
Front end development is programming which focuses on the visual elements of a website or app that a user will interact with (the client side). Back end development focuses on the side of a website users can’t see (the server side). They work together to create a dynamic website to allow users to make purchases, use contact forms, and any other interactive activities you might participate in while browsing a site. Some examples of dynamic websites are Netflix, PayPal, Facebook, and the Kenzie Academy site you’re currently on.

Front and back end developers have different strengths
According to RealMensch, different developers have different strengths and it’s essential to keep in mind that one side of the development process isn’t harder or more important than another. They’re equally important in creating a dope website that users will enjoy interacting with.

What pays more, front end or back end?
With differences in strengths, there are also differences in pay. Mid-career front end developers rake in an average annual salary of $76,929 in the U.S., according to Glassdoor. While U.S.-based, mid-career back end developers bring in an average of $101,619 annually.

Though there are differences in what you can earn, depending on if you specialize as a front or back end developer, it all comes down to your unique talents, passions, and abilities. You may find you prefer one side of development over another. If you’re deciding between the two, it’s best to also think about which one brings you more fulfillment and satisfaction as a developer rather than solely focusing on salary projections.

Front and back end developers work in different languages
When you’re coding, you’ll use a programming language. Much like human languages, these languages allow programmers to communicate with their computers through a series of symbols (referred to as code). In simple terms, it’s like giving your computer instructions. Front end developers work in languages like HTML, CSS, and JavaScript.

HTML stands for Hyper Text Markup Language. It’s the standard markup language for creating webpages.
CSS is short for Cascading Style Sheets. While HTML is used to create structure on a site, CSS is used to bring style and flair. It defines a site’s colors, fonts, and the style of other site content.
JavaScript is a language that can be used to make a site interactive and fun. You can use it to run a game on your site, to name one example.
Front end also works in its own set of frameworks and libraries. Here are just a few of the frameworks and libraries a front end developer would work with:
AngularJS
React.js
jQuery
Sass

Back end developers work in languages like PHP, C++, Java, Ruby, Python, JavaScript, and Node.js. Here’s a bit more on a few of these languages:

PHP is a server-side scripting language.
Java is a highly popular platform and programming language.
Python is a general-purpose coding language. It’s different from some of the others we’ve mentioned here because it can be used for other kinds of software development and isn’t limited solely to web development.
Back end frameworks include:

Express
Django
Rails
Laravel
Spring

Front and back end developers work together to create awesome applications
While there are some similarities between the two sides of web development, it’s easiest to think of them as sides of a cassette tape. They are both necessary parts of the web dev process that are used to create functional, visually appealing websites and applications. If you’re considering a career as a web developer and aren’t sure which side of the development cassette you’re interested in jamming to, you could consider becoming a full stack developer. Full stack developers get the best of both worlds and their work consists of both front and back end elements. It’s like getting to listen to the whole flipping cassette every day.

Front end vs. back end? Why not both?
If you’re interested in a career as a front end or back end developer, you may want to consider attending a coding bootcamp or technical school. At Kenzie Academy, we offer a 12-month, full-time Software Engineering program that teaches students the skills to succeed at both front end and back end development. You’ll learn from industry practitioners to get tech skills, get soft skills, and get hired. Students spend the first 6 months learning the ins and outs of front end development, then spend the second 6 months becoming proficient at back end development. Here are a few things you’ll work on in Kenzie’s Software Engineering program:

Front End Skills:

Break apart interesting problems and design engaging solutions.
Design, create, and modify static web pages that conform to HTML5 specifications.
Analyze the client-side performance of a webpage to better understand the consumer experience.
Imagine, create, and deploy interactive and mobile-friendly applications for the web using the latest web technologies, including HTML5, CSS3, JavaScript (ES6+), and React.
Pair those skills with back-end technologies like databases and Node.js, as well as developer tools like Bash, Git, and automated tests.
Understand how to effectively work and collaborate on a software project, and how to interview confidently.
Back End Skills:

Level up with a second, popular programming language (Python 2 & 3), as well as its own most common web framework, Django. Use language features like lists, sets, and dictionaries appropriately for simple algorithmic tasks.
Become adept at interacting with behind-the-scenes technologies, like databases and servers, and at solving more complex sets of problems.
Identify and fix performance bottlenecks in a web application. Propose a viable fix to a specific bottleneck in a provided sample application.
Learn to make applications faster, more secure, more stable, and more capable.
Our students graduate with a full-stack certification, so they can work as front end developers, back end developers, or full stack engineers, in addition to a number of other roles. In the program, you’ll get acquainted with languages like HTML, CSS, and JavaScript, as well as Python, Django, and SQL. View our syllabus here.

While learning to code and work within these languages, you’ll gain more insight into which tasks you prefer as a developer and can come to a better understanding of if you have a preference for one side of web development over another (or if you want to rock it as a full stack engineer).

What is Rubber Duck Debugging?

Alexa Goins — Tue, 24 Nov 2020 20:02:49 +0000

Learning how to code can be challenging. One odd trick to help make it easier is a little thing called rubber duck debugging. You might be thinking, “What…? Rubber ducks and coding?” Today, we’ll explain the interesting but unexpected connection between developers and these classic bathtime toys.

Here’s what we’ll discuss:

Why do programmers have rubber ducks?
What does rubber ducking mean?
How can I use the rubber duck debugging method in my work?
Does this mean Ernie from Sesame Street is a coder? (Pure speculation, but it’s a fun thought.)

Why do programmers have rubber ducks?
You might think programmers have rubber duckies just as quirky decorations, but these cute little toys are more than just a statement piece (or a way to reminisce about childhood). Here’s the secret: programmers keep a rubber duck around to help them with their code. In all professions, there are small hacks, tips, and tricks that workers use to make their jobs easier. For a Software Engineer, a rubber duck is another (admittedly unconventional) tool in their toolbox.

What does rubber ducking mean?
Do you ever come across a problem and feel totally stumped by it? You ask a coworker, fellow student, or friend for help, but before you finish explaining the problem, you realize the answer all by yourself. It turns out, you just needed to explain the problem out loud to get your brain into problem-solving mode.

In usability testing, we refer to this phenomenon as the think-aloud protocol. Product Designers will ask participants to think aloud while performing different tasks so they can get a better idea of their thought processes and decision-making to gain greater insight into the product’s usability. Meanwhile, in scientific research circles, we’d refer to this sudden arrival of a solution as an “aha!” or “eureka!” moment. Software Engineers use rubber ducky debugging for the sole purpose of reaching these moments.

In rubber duck debugging, you’re following the same concept.

“The Pragmatic Programmer”
The term “rubber duck debugging” can be traced back to a 1999 book by Andrew Hunt and David Thomas called “The Pragmatic Programmer.” In the book, the authors describe a programmer who carries a rubber duck around and debugs their code by explaining it, line-by-line, to the duck. While the practice of talking to a rubber duck may sound silly, it’s actually proven to be a helpful strategy for finding and solving problems with code.

Since the book’s publishing, the technique has become popularized in software engineering circles. You may also hear the technique referred to as ‘rubber ducking’ for short.

Rubber duck debugging can help you sort out a coding problem because it forces you to talk through all of your choices and actions so far to hopefully show you where you may have made a mistake. We think a lot quicker than we speak so talking through the process can help you slow down and see the bigger picture of your code, making it easier to spot problems.

Additionally, rubber duck debugging allows your mind to shift as you work to explain the code to the duck, an object that has no knowledge of your code. Using a duck allows you to be more precise and thorough because you’re going into your explanation with the assumption that the duck doesn’t know anything about your code.

Explaining your code to a rubber duck will also help you learn and become a more efficient coder. In fact, research has consistently shown how the act of teaching someone actually reinforces your own knowledge and skill.

Do I have to use a duck?
It’s important to note that rubber duck debugging doesn’t require a duck. You can use anything as long as it forces you to slowly and carefully explain your code. While the point of this exercise is to avoid wasting your teammates’ time, we’d bet your dog would be pretty interested in what you have to say (if you’d prefer explaining your code to a living thing).

What’s the psychology behind rubber ducking?
David Hayes blogs about life as a programmer on the website Thoughtful Code. We resonate with something he wrote in a post about the psychology of rubber ducking:

“We use ducks and other stand-ins because of the vast difference between the way most humans think and the way that computers do. When you hit a roadblock when programming, it’s likely that you’re not thinking the way a computer does. Computers are painfully precise. Humans are, generally, forgiving and loose in their understanding. So many of the “bugs” and issues you have when solving a problem in your program originate in not being clear and explicit enough in your instructions.”

How can I implement rubber duck debugging into my coding practices?
The next time you’re struggling with your code: Pause, take a deep breath to let out your frustration, and pick up your rubber duck. Then, start to explain your broken code to the duck. Go line-by-line, starting with your overall vision and goals for the code. If you’re still hitting a wall, try explaining the intermediate states and transitions. Finally, bask in your glorious “aha!” moment.

Again, you can still use this method without a rubber duck. Substitute a duck with another inanimate object or explain your code to a pet. The point is that you should explain your code verbally, line by line. If you still aren’t reaching a solution after using the rubber duck debugging, that’s the moment to reach out to a coworker for help.

So next time you’re stumped on a line of code, pull out your trusty sidekick. Heck, maybe even take an actual bath with your rubber duck – shower thoughts can be powerful.

Now, go forth, write code, and kick ass!