Searching for your first job in tech can sometimes feel like you’re running a literal race. Especially for potential software engineers. You’re in the middle of a pack, sharp elbows on both sides, sweat dripping. Surrounded by runners on all sides, all you can do is keep moving your feet and look for small openings to leap into to break away.
Are you a future software engineer looking to find your breakout moment and land your first job in the tech industry? Look no further— this article is the ultimate guide to personal branding for developers in the job market. Whether you’re a new General Assembly student or already in the job market, you’ll take away practical steps to stand out in the competitive world of software engineering.
So, you’re interested in learning more about a career in frontend web development?
You’ve come to the right place.
As the web development industry expands, so does the demand for web developers worldwide. According to the Bureau of Labor Statistics, employment for web developers is expected to grow 23% between now and 2031 in the U.S. alone. In Europe, more than half of companies that recruited or tried to recruit IT professionals had difficulties filling vacancies— meaning there are more jobs than people.
Undoubtedly, it’s an excellent time to enter a web development role. The real question remains: Is it the right fit for you? If so, how do you actually become a frontend web developer? Read on to learn more.
Think about your personal experiences using ride-sharing mobile apps like Lyft. You’re able to request a car to your exact geographic coordinates, right down to the street corner. This functionality is possible thanks to application programming interfaces, or APIs.
An API is a platform that allows different pieces of software, or applications, to communicate with one another. The term is used broadly in the context of programming languages, the web, operating systems, etc. For example, Apple publicly shares a number of APIs powered by iOS, its operating system for iPhones and iPads, for an app developer to use. These APIs allow applications like Facebook, Instagram and Snapchat to access a user device’s camera, microphone, and much more.
What Is an API?
APIs can fall into a number of subcategories. Many web and mobile applications, as well as devices (e.g., Amazon Echo), rely heavily on what are known as web APIs, which we’ll focus on in this guide. A web API uses the same underlying technologies as web browsers to allow different applications to communicate with one another. Web APIs allow applications to retrieve data or perform actions beyond their built-in capabilities. Typically, an application, using the internet, requests some data or action from an API. The API provides a response, and the application then adapts and displays it. The API’s code is hosted on a web server, which is essentially a computer connected to the internet. Depending on the functionality the API is providing, there may be an additional layer of security involved, such as sending a unique key.
Let’s consider a mobile weather application like Dark Sky. When you use it to check the weather for a certain zip code, the application makes a request to the API tool asking for the weather in that zip code. The API has access to the weather data and returns it as its response. Then, the application goes through the weather data and selectively displays it as, for example, the temperature in degrees Fahrenheit. The same process occurs if you check the weather in another city or at your current location.
How to Use an API
Developers can use almost any modern programming language (like JavaScript, Ruby, Python, or Java) for their own API coding. Most programming languages already come with the necessary software to interact with web APIs, but developers typically install additional packages, or code, for convenience and flexibility.
For any given programming language, there’s usually at least one popular framework — a collection of programs — that can be used to create APIs. Ruby developers, for example, use the Rails framework. Developers can also use packages to add features to their APIs, such as additional layers of security. Any additional necessary programs or packages are usually installed with that language’s package manager, e.g., Ruby’s bundler.
How Does an Internal API Work?
An internal API is one that’s used within a company or organization, although the company can choose to make portions of it accessible to the public. Users within that organization can leverage an internal API to share data and business logic (for example, the company’s rules regarding communication between a user interface and a database) across platforms — i.e., web, iOS, or an Android app. Any company with both web and smartphone apps likely has an internal API.
For example, the food-ordering service, Seamless, has web, iOS, and the Android app. All three platforms use an internal API to request that an action be performed, like placing an order for a client, as well as to request data, like the details of a user’s most recent order. This internal API allows Seamless to internally share data (restaurant information) and business logic (a customer ordering a dish) across different devices.
How Does an External API Work?
Many organizations provide external — albeit sometimes limited — APIs and documentation that allow individuals and companies outside of that organization to develop applications using its services. Depending on the external API, there may be registration, payment, or other limitations involved. For example, The New York Times provides an extensive external API that is free but requires that developers register and follow certain guidelines.
Google Maps also provides APIs that allow developers to embed maps in their websites and applications, as well as access directions and estimated travel times. Lyft, for example, uses Google Maps’ API. Other popular external APIs include Yelp’s Business APIs, which enables the user to find businesses, the OpenWeatherMap API, which retrieves weather data, and the Microsoft Azure Emotion API, which determines emotions in images.
Using external APIs allows developers to create their own mashup applications, like one that uses the Yelp Business API to find top-rated coffee shops in a neighborhood and display them on user interfaces as a map with custom icons via the Google Maps API.
APIs at General Assembly
The ability to work with web APIs is a fundamental skill in web development, whether you want to find a job as a front-end or full-stack software engineer or simply create your own applications. In GA’s career-changing Software Engineering Immersive — offered on campus and online — as well as our part-time JavaScript Development course, students learn the theory behind using web APIs and get hands-on practice incorporating them into their own projects. They also explore adjacent technologies such as AJAX and JSON. Many students choose to use a web API as part of their final projects and create their own applications. Our part-time Front-End Web Development course covers API coding essentials as well.
Saimon Sharif is a software engineer who teaches JavaScript Development courses and workshops at General Assembly’s New York City campus. He works at the clothing-rental company Rent the Runway, focusing on its front-end stack. In his spare time, Saimon listens to podcasts, searches for the perfect cup of coffee, and reads a few too many articles.
“Given that more than half the world’s population has internet access, with more to come, now is a great time to learn web development to create applications and reach that audience.”
Saimon Sharif, JavaScript Development Instructor, General Assembly NYC
You can think of HTML development as providing the bones of a webpage, while CSS provides the skin, and JavaScript provides the brains. A webpage can contain headings, paragraphs, images, videos, and many other types of data. Front-end developersuse the HTML element to specify what kind of information each item on a webpage contains — for instance, the “p” HTML element indicates a paragraph. Developers also write HTML language code to specify how different items relate to one another in the page’s overall structure or document structure.
Every website you open in your web browser, from social networks to music services, uses HTML. A look under the hood of any website would reveal a basic HTML code page, written with an HTML structure editor, providing structure for all the page’s components, including its header element, footer element, main content, and other inline elements.
A look at the HTML code that structures General Assembly’s website.
How HTML Works in a Webpage
The HTML file plays a couple of significant roles in a webpage. First, we use the structure created by our HTML code to reference, enhance, and manipulate elements on a web page using CSS and JavaScript. For instance, you could use HTML to mark all of the headings on a web browser page, then pick the size and color you want to apply to those headings to reflect your organization’s branding, or simply a visual design developed for the site.
Second, HTML text lets us indicate the roles of different structural elements to search engines and other services that index the content and summarize it for other users. For instance, marking the caption of an image with the “figcaption” element and enclosing the image and its caption in the “figure” meta element helps a search engine understand that these two pieces of content are related and that the caption describes the associated image.
Learning HTML at General Assembly
Whether you want to land a job as a front-end or full-stack web developer or just want to dip your toe into programming, HTML is a natural place to start. Learning HTML, along with CSS and basic JavaScript, provides you with the fundamental skills necessary to create your interactive single-page website.
In GA’s part-time courses in Front-End Web Development and HTML, CSS & Web Design, and our career-changing, full-time Web Development Immersive program, you’ll get hands-on practice coding your projects, from static personal and business websites to single-page applications like games and interactive photo galleries.
These projects give you practice using basic HTML tags and structuring pages with different components, including headers, footers, sidebars, and navigation. You’ll also code CSS and JavaScript and learn how to put all three together to build websites that implement modern standards and use best practices for front-end development.
“I love meeting students from a wide variety of industries, with a whole spectrum of goals, from all over the world. I’m continually inspired by the thoughtful, creative projects they build in the course that showcase their new skills and unique vision.”
– Sasha Vodnik, Front-End Web Development Instructor, General Assembly San Francisco
Looking to create a button to change a web page’s background color, build a form that will allow users to add a comment directly to your page, or remove content when a user clicks an “X” button? You’ll need to know how to manipulate the Document Object Model, or DOM, to do all of these things.
The DOM is the structure a web browser generates from an HTML file. The browser reads the HTML file and generates a version of the elements that is formatted for your JavaScript code to communicate with. We need this “translated” version of the HTML so that we can use JavaScript to talk to the elements on the page. If JavaScript could not talk to the DOM, we wouldn’t be able to use JavaScript to change the appearance of the page.
You can picture the DOM as a kind of hanging mobile sculpture, where each node of the mobile is a different HTML element. You could also imagine it as a family tree, where the “root” is the parent of all the other elements in the tree. That means that the largest containing element, <html>, contains all the other elements in the tree. Here’s an example:
Here’s what the above HTML looks like as a DOM tree:
We frequently use family terminology in referencing parts of the DOM. In the above example, the <html> tag is the parent of the <head> and the <body> and the ancestor of all of the other elements. The <li> elements are the children of the <ul> element. Similarly, the <li>s are sibling elements.
The HTML file itself provides a good way to visualize the Document Object Model, because it’s the file that helps the browser create it. When you indent each subsequent “layer” of HTML, you give yourself a good visual of the nesting of the DOM. Remember, the DOM is created by the browser when it reads your HTML. Your HTML document is the template which creates the DOM.
When building a website, you might want to build functionality for the DOM to change in response to a user action. Every web framework — from Angular, to React, to jQuery — provides some way to adjust the DOM. The best ways to first encounter DOM manipulation are to use plain JavaScript or, even better, use jQuery.
In each, you must first tell the JavaScript how to find the element on the page (we call this selecting the element) and then manipulate it.
How No-Frills JavaScript Interacts With the DOM
In JavaScript, there are separate methods for selecting elements by element type, class, and id. Below are the plain JavaScript methods for selecting elements.
Once you’ve selected the element, you can use a number of methods to change or add to it. For example, if you’d like to add some content to the page, you can append HTML using the .appendChild(element) method, like this:
You can append a new child HTML element to any part of your page by first selecting the element you want to be a new parent:
If you want to append an HTML element with content inside it, you’ll create a text node using the .createTextNode() function like this:
You can see that something as simple as adding a div with some text is already getting quite complex. This is where jQuery comes in to simplify our DOM manipulation.
Simplifying DOM Manipulation With jQuery
jQuery is a JavaScript library that provides tools to make life simpler for web developers. Behind the scenes, the jQuery source code is written in JavaScript. That means that anything we do in jQuery could be accomplished in JavaScript with more code. jQuery is designed to simplify DOM manipulation, and its syntax is easier to grasp. It uses CSS-style selectors to pick DOM elements (elements from the HTML). That is, you can select an element by using its tag, class, or id. For example:
$(‘span’) will select all of the span elements,
$(‘.container’) will select all of the elements with a class of container, and
$(‘#hero-image’) will select the element with the id of “hero-image”.
Because CSS selectors can get complex, you can select very specific elements on your page.
Once you have selected a DOM element, you can change it at will using a large array of jQuery manipulation methods.
Here is an example of using jQuery to manipulate some HTML.
The HTML:
DOM’s JavaScript component:
The above code will change all of the paragraph elements on the page to have a value of “Boo!”. Go to a webpage with jQuery loaded on it, like css-tricks.com, open the console with `command` + `option` + `j`, and paste that code into the prompt. When you execute that code, you’ll notice all of the paragraphs will have changed to say “Boo!”
As you’re working with jQuery to manipulate DOM elements, you are almost always either getting or setting a value. If you want to find out the current value of some attribute, you are getting. If you want to change the value, you should be setting. This is the pattern:
Getting a value: $(“CSS Selector”).someJqueryMethodName()
Settings a value: $(“CSS Selector”).someJqueryMethodName(valueToSet)
Notice that getting a value doesn’t require an argument to the jQuery method, but setting a value does.
Following that pattern, we could get the value of the text of an element on the page:
Get the text of the readme (it lives inside of an article tag): $(‘p’).text()
Set the text of the readme to: “Boo!”: $(‘p’).text(“Boo!”)
Some jQuery methods require an argument in either case. For example, the .css() jQuery method works as follows:
Get the background color: $(‘p’).css(“background-color”)
Set the background color to blue: $(‘p’).css(“background-color”, “orange”)
Some of the most common jQuery DOM manipulations are:
You can use these manipulation methods, along with event listeners, to change your page in response to user actions.
Append HTML content as a child of the current selected element: $(‘.selected-element’).append(htmlContent)
Replace all of the current HTML content within the selected element with the inputted htmlContent: $(‘.selected-element’).html(htmlContent)
Replace the current text content of the selected element with new text: $(‘.selected-element’).text(newTextString)
Change the value within an input element: $(‘.selected-input-element’).val(newValue)
Remove the selected element from the page: $(‘.selected-element’).remove()
You can use these manipulation methods, along with event listeners, to change your page in response to user actions.
DOM at General Assembly
In General Assembly’s full-time Web Development Immersive and part-time Front-End Web Development courses, students learn DOM by visiting jQuery-enabled websites like CSS-Tricks and using the console to alter the pages in front of them. Changing all of the titles to some goofy text gives students a sample of the power of this tool.
Students also dive into and read the jQuery documentation to find out about the most useful DOM manipulation methods. We make sure to emphasize .append, .addClass, .html, .text, and .val. Then, we introduce DOM events so that students’ sites can detect clicks, form submissions, scrolling, and keypresses. Much of the time, our response to these events is to manipulate the DOM accordingly. When a user presses a button, it can change the appearance of the web page. We do this by listening for the button press and then manipulating the DOM to impact the page.
Cory Fauver is a Web Development Immersive instructor and former Front-End Web Development instructor at General Assembly’s San Francisco campus. He left his early career in math education to teach himself web development while building a company with two close college friends. While their product didn’t work out, they left that experience with skills that they’re all using today. Cory enjoys sharing the methods and resources he used to learn HTML, CSS, and JavaScript. When he’s not at a computer, he loves playing ultimate frisbee, backpacking, and being outdoors.
“Now is a great time to learn web development because there are so many quality resources available to find and use. Once you gain that skill, there’s an entire world of learning to do!”
Cory Fauver, Web Development Immersive Instructor, GA San Francisco
In JavaScript and other programming languages, we represent real-world entities as objects, or collections of key-value pairs. For example, in JavaScript, if we wanted to represent a student who has a name and a favorite color, we can use an object with two keys — name and favoriteColor — and two values associated with each key:
When we want to send these objects as data between two systems, such as a website and the server that runs it, we need a way to format these objects so that they can be read by the receiving server.
JavaScript Object Notation, or JSON, is a style of text notation that’s used to format and interchange structured data. JSON describes how to represent and arrange data sets so they can easily be written, transferred, and parsed by the receiver. JSON is easy for humans to read and write. It’s also easy for machines to programmatically dissect and generate.
Imagine that you signed up for a website with your email address and created a profile with your name and age. Your user profile would appear as a JSON object to the site’s back-end application, which is running on the server and receiving your form submission. This JSON format would allow the application to easily work with your data.
By looking at a document that’s structured using JSON, we can visually interpret data, noting the various relationships within the set, such as what is the parent or child of a certain node (object). In the following example, we can see what owns the “profile” and “account” data by looking at how the JSON document is structured:
Try writing your own JSON object and test its validity using a validator like this one!
Usability has made JSON one of the most popular means of serializing data. With it, data can easily be translated from objects into formats that can be stored (for example, in a file) or transmitted (for example, across a network). JSON can represent four primitive data types — string, number, Boolean, and null — as well as two structured types, object and array.
JSON is an open standard file format that can be used by anyone. However, whomever is reading and writing JSON must adhere to the standards laid out by the ECMAScript specification (JavaScript is based on ECMAScript as well). This standardization makes JSON a great choice when sending and receiving data between two systems, such as an API and a client, or a web server and a client.
A Brief History of JSON and Its Rise in Popularity
JSON is language independent, meaning that many programming languages besides JavaScript have the ability to create and parse JSON. In fact, its conventions and data structure format maps effortlessly to popular object-oriented languages such as JavaScript, Ruby, Java, and Python.
As a a result, JSON can be written in one programming environment and parsed, or read, in another. For example, we can look at the popular Twitter API and see that a tweet is represented using JSON. But, if we want to parse that JSON data — say we want to get a feed of the most recent tweets from a certain user — we can choose whatever programming language we want that can read the JSON format. Twitter itself provides many libraries for consuming its API, but you can also do so by writing your own program.
JSON was originally created in the early 2000s by computer programmer and entrepreneur Douglas Crockford and his team at State Software as a lightweight serialization alternative to XML (Extensible Markup Language). JSON.org launched in 2002 to describe the format, and Crockford specified the format officially in the RFC-4627 documentation in 2006.
Today, JSON usage and developer interest is on the rise while XML usage is declining. According to the online API news site and directory The Programmable Web, of the top 10 most popular web APIs, only one — the Amazon Product Advertising API — supports XML and not JSON. Many of the most popular web APIs support both, and several support only JSON: the Facebook Graph API, Google Maps API, Twitter API, AccuWeather API, Pinterest API, Reddit API, and Foursquare API.
How JSON is Used
JSON is built on two data structures:
A collection of key-value pairs. In JavaScript, this is called an object. In Ruby, this is commonly called a Hash. Other names that refer to this same idea are dictionary, keyed list, and associative array. An example of a key-value pair is a dictionary: To use it, we look up the word (key) and read the definition (value).
A list of values. In most languages, this is realized as an array, vector, list, or sequence. An example of a list of values is the different colors of crayons in a box.
When JSON is combined with the AJAX (Asynchronous JavaScript and XML) web development technique, a web browser is able to send and receive data without needing to refresh the web page. Think about submitting a form to update user information on a website: After the user hits the “submit” button, their details are packaged into the JSON format and sent from the client (web browser) to the server. The server can respond with another piece of JSON data, which the web browser can then parse to show feedback to the user. This popular combination of technologies allows for a seamless user experience.
JSON at General Assembly
At General Assembly, students learn various skills that rely on the JSON format. Within the full-time Web Development Immersive course, aspiring developers create web APIs that use JSON to communicate back and forth between a client and a server. In our part-time JavaScript Development course and self-paced online JavaScript offering, students learn how to work with JSON within the object-oriented programming language. Additionally, in our full-time Data Science Immersive and part-time Data Science course, students write application code in Python, which has the ability to parse and generate data using the JSON format.
Meet Our Expert
Danny Kirschner is a lead instructor for General Assembly’s Web Development Immersive course in Providence, where he teaches students how to be job-ready full-stack developers. Danny has been writing web apps using Ruby on Rails and JavaScript for more than eight years. When he’s not coding, he enjoys cooking vegetarian food and biking around Rhode Island.
“Writing code is a craft as well as a creative outlet, and it’s not limited by industry. The discipline of creating software is useful to anyone, as it’s a way to think about problems and know how to technically solve them.”
Danny Kirschner, Web Development Immersive Instructor, General Assembly Providence
JavaScript is essential to nearly every action you take online, whether it’s entering credit card information, streaming videos and music, or interacting on social networks, just for starters. It’s the programming language used to make webpages interactive — and it’s perhaps the most widely used language because of it.
Developers use JavaScript to create a wide range of features, from simple user interface (UI) functionality to complex visual effects, including:
Interfaces like image carousels.
News feeds that continue to load new information as you scroll through them.
The ability to submit information entered into a Google Doc, survey form, or online payment system.
Features like these are part of a website’s front-end code, which is responsible for what users see and interact with. Front-end JavaScript code runs in a user’s browser, where it’s integrated with the HTML code that makes up a page’s structure and the CSS code that specifies how each of the page’s elements should be displayed.
But not all JavaScript is written for the front end. Developers can also use it for a website’s back end, which is executed on servers, or specialized computers that run websites behind the scenes.
JavaScript allows developers to perform many basic tasks common to a wide variety of programming languages. For instance, conditional logic allows a developer to specify that a section of code should be executed only if a certain condition is met. Imagine you were creating a webpage that accessed weather information for the user’s current location, and then displayed an icon representing the current temperature. You might use a conditional statement to specify that if the temperature is below freezing, the screen should display an image of an icicle.
JavaScript developers can organize their code a couple different ways. One approach, known as functional programming, organizes code into functions, which are sets of JavaScript statements that take values as input and return results. Another technique, known as object-oriented programming, groups values and code together into collections known as objects.
A basic familiarity with JavaScript gives you a strong foundation for building applications with popular frameworks such as React, Angular, and Vue, and libraries like jQuery. Frameworks and libraries are pre-written collections of JavaScript code that make it easier for you to build your own applications. While using a framework or a library can allow you to program without needing to write the code for some tasks yourself, a foundation in JavaScript coding without frameworks or libraries — known as vanilla JavaScript — can be a great asset in customizing your apps and debugging them when things aren’t working exactly as you expect.
GA instructors help students build JavaScript skills step by step, sharing knowledge and best practices they’ve accumulated as developers in the field. In addition to in-class exercises and homework, students also apply their new knowledge by building projects that make use of all the tools they’ve learned. Students leave with portfolio-worthy projects that demonstrate their new skills, as well as next steps for building apps with JavaScript and learning more about the language.
“I aim to help students recognize what they already know and connect it to what they’re trying to do. At GA, we teach how to troubleshoot and find answers so you can grow as a developer long after you leave the classroom.”
– Sasha Vodnik, JavaScript Development Instructor, General Assembly San Francisco
When you start learning how to code, it can make a difference which editor you use. Your editor will help shape your path as a developer, so trying out different methods is vital. Front-end developer and writer for Smashing Magazine, Anselm Hannemann, gives you his tips for selecting and getting started with your first editor.
When you graduate from college, you have a degree in some specific subject(s). But it is becoming increasingly important that you have practical skills when you enter the workplace, in addition to the specific knowledge you gained during your college career.
When you enter the workforce, no matter who you work for, there will be some learning curve as you learn how they do business, what tools they use, and their processes and procedures. But wouldn’t it be great if on day one when you arrived at that sweet new job, you were teaching them new tricks?
If you learn these three digital age skills, there’s a good chance that you will blow their doors off when you start work on Monday.
