5 Tips to Kick-start Your Programming Career – The Frontend Route

By

So you’re interested in programming. Perhaps you’re considering a career change or just interested in picking up a new skill during the lockdown, but have no idea where to start? Good news, while learning to code may seem daunting at first, we’re here to help!

First things first, if you’re thinking of a career change, you should know that no two programming roles are the same, just take a look at the following list of just a few job titles that involve programming of some kind:

  • Data Scientist
  • Backend Developer
  • Frontend Developer
  • Full Stack Developer (basically a combination of frontend and backend development)
  • DevOps Engineer
  • Security Architect
  • Analysts
  • Professional Services
  • Technicians
  • Systems Engineers
  • Quality Assurance Engineer

Not to mention the generic titles such as ‘Software Developer’, ‘Software Engineer’, ‘Web Developer’, and so on and so forth. It can be confusing and overwhelming, we get it, we’ve been there before.

This article aims to give you a few tips and tools for getting your feet wet in the developer community, focusing on Frontend Software Development. Why Frontend? Because it’s generally considered to be one of the easier areas to start off with for those without coding backgrounds. If this article gets enough support we’ll consider doing more based on other areas.

Use this article as a guide for helping you learn some basics and most importantly finding out what you like and if this is something you want to pursue further. This article isn’t going to give you all the answers, and it’s purely based on our own experiences and opinions, but it’ll give you a starting point.

But first, what is a Frontend Developer?

Well, it depends. There are many different interpretations out there, and there isn’t one single universally agreed upon definition. Sometimes the term comes under the web development (websites) umbrella, others it comes under the desktop application development (software you download). We’re going to focus on the web development route, for now.

And if you absolutely cannot possibly go on living without a definition then here are a couple we like:

“Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.” (Source: Frontend Masters)

“While web design is the way a website looks, front end development is how that design actually gets implemented on the web.” (Source: Skill Crush)

And without further ado, here are our top 5 tips for getting started in frontend web development.

#1 – Learn Some Basic Programming Theory

A loose definition of programming is a written block (code) that is turned into a machine-readable code to be executed by a computer to solve a problem.

The execution of machine-readable code differs on what programming language is used. Each programming language differs slightly but they have the core programming fundamentals the same.

Variables

Variables are used to store information to be referenced and manipulated in a computer program. Variables are referenced to by its given name and it can contain some known or unknown quantity of information referred to as a value.

For instance:

name = “Sarah”

Here we have declared a variable, name, and stored the text “Sarah” within it. We can then do:

name = “Abby”

Variables are subject to change (hence the name) and name now stores the text “Abby”. We can then do many things with name without needing to know whose name it is.

Data types (and arrays)

Data types is a classification of the data which can be stored in variables. This is useful for not only other programmers to know, but important for the computer to understand what constraints this variable has. For example its good to know that a price variable is a decimal number.

price: float = 10.99

Price is the name of the variable, float is the data type and 10.99 is the value.

A list of basic data types are:

Data Type Represents Examples
integer whole numbers -5, 0, 123
floating point (real) fractional numbers -87.5, 0.0, 3.14159
string A sequence of characters “Hello world!”
Boolean true or false true, false

Arrays are a collection of a data type. Arrays allow you to store many values in one variable, each value can be referenced by an index that starts with 0 and goes up by 1. Arrays are a data structure that is most commonly used.

 

Arrays are declared with square brackets [] and entries are referenced with their index

I.e.

employees: string[] = {“Sarah”, “Abby”, “Nicoletta”}employees[1]; //Abby

employees[2]; //Nicoletta

employees[0]; //Sarah

 

Classes and objects

Outside of the data types we also want to be able to define our own data constructs, which is what classes are used for. For instance, an employee type can hold a name, id, job title, start date and so on. We can define an Employee class to hold this data, for example:

 

class Employee {employeeNumber: integer;

name: string;

jobTitle: string;

startDate: Date;

}

An object would then be an instance of the class for employee Frances:

frances: Employee = new Employee();frances = {

employeeNumber: 344542;

name: “Frances”;

jobTitle: “Developer”;

startDate: 01-01-2010;

 

Loops and if statements

With the variables we have we can make some decisions based on them.

If statement

An if statement is to valuate if something is true or false, depending on the outcome a specific segment of code is ran. For example we can assign security training to developer employees only.

if(frances.jobTitle.equals(‘Developer’))employeeTraining.add(‘Security’);

}

Here because Frances is a developer, she will have Security added to her training.

Loops

There are three types of loops, for loops, while loops and do while loops. Loops iterate through an array to run some code against each array entry. The most common loop is the for loop. These are good going through each item in the array and listing.

For example, it’s the end of the year and we have a number of employees whose vacation allowance is due to be renewed. We can go through each employee and reset their allowance like so:

for(Employee thisEmployee: employees){thisEmployee.resetVacationAllowance();

}

 

Functions/methods

Functions or methods is logic contained that can be called. For example, above the for loop has function call to reset the vacation allowance. This function or method is responsible for renewing the vacation allowance alone.

 

The function itself could look like:

resetVacationAllowance(employee){employee.vacationAllowance = 25;

}

#2 – Get to Know the Foundations of Frontend using tools in your browser

The foundations of frontend development include programming languages such as HTML, CSS and JavaScript.

 

HTML

HTML (Hyper Text Markup Language) is a language that describes the structure of a webpage. It essentially tells the browser how to display the content of the website, such as where to put the headings, links, images etc. Various HTML ‘elements’ will make up a HTML page, with each element containing a start tag and an end tag, with content in between. E.g.:

<h1>This is a heading</h1>

When various HTML elements are strung together you get a basic webpage, e.g.:

<!DOCTYPE html><html>

<head>

<title>This is the title</title>

</head>

<body>

<p>This is an example of a simple HTML page with one paragraph.</p>

</body>

</html>

For more examples on what HTML can do check these out:

 

CSS

CSS (Cascading Style Sheets) is a language used to add styling to HTML (and other markup languages). For example, if HTML is used to place a heading on a page, CSS is used to define what colour that heading will be, what font size it will have, and even more complicated things like whether it will spin around the page before disappearing. It also is a great time saving tool for a developer as you can define styles that can be applied to multiple elements on your webpage.

Example:

h1 {
color: blue;
height: 20px
}

 

This means that all HTML elements with the <h1> tag will be the colour blue and it will have a height of 20 pixels.

For more examples and tutorials on CSS:

 

JavaScript

JavaScript is a scripting language that originally enables programmers to create dynamic content, control multimedia, animate and so much more on a given webpage. JavaScript has since advanced to becoming a server-side language (outside of the webpage) and is raved on its lightweight affect on performance in comparison to heavier server-side languages like Java.

For more on how these three come to play together, Mozilla is a free documentation

Browser Tools

One of the best ways to get to grips with these languages is to take a look at how they’re used in websites in your browser. Most modern browsers (e.g. Chrome, Firefox) have built-in tools that will let you inspect the elements that make up of whatever website you’re visiting.

Here are some tutorials on how to make the most of your browser’s dev tools:

#3 – Setting up your “dev environment”

You will see the term environment, or dev environment, floating around when learning code. This is essentially setting up the tools you need to write code and run it on your machine (I.e. your computer).

Terminology breakdown:

  • Repository (repo): A code repository is where the code lives. Think of a word document that you and your colleagues work on together. The most up-to-date version is stored in a cloud so everyone can work on it. You download a copy and work on it and update it in the cloud location, and so do your colleagues. The word doc in the cloud is the “master” repository and you and your colleagues have local (personal) repositories. Local because its only available to you, “locally”.
  • Editor or IDE (Integrated Development Environment): An editor is a simplified version of an IDE. They both allow you to write code and run it to a certain extent. An IDE has the bonus of integrating most, if not all, of the other tools you will need to use.
  • Version Control: Version control is where the repo is managed. Here you can track the changes in code, restrict access and version them. (More on this in the next section)

Some popular examples:

GitHub

GitHub.com is a free online version control. Here you can keep track of your code repositories publicly or privately. We recommend creating an account to get started.

 

Stackblitz

Stackblitz.com is a free website that allows you to use Microsoft’s Visual Studio Code (aka VS Code) Editor online. VS Code is a free tool you can download but you can also use Stackblitz to write code and store them on your GitHub.

Stackblitz is an instant way of writing code, as you type on the left-hand side, you can see your code come to life on the right-hand side in the Live View.

#4– Set up a GitHub (or similar) Account to keep track of your work

At some point you’re going to want to move away from going through tutorials and start working on your own projects. When you get to this stage we recommend setting up a GitHub account, or an account with any website that hosts coding projects using ‘git’.

Git is a type of Version Control System that tracks details of how code files are changed, including when changes were made and by whom. It makes it a lot easier to collaborate with other people on coding projects and to go back to previous versions of your code when everything breaks and you’re questioning why you started this stupid project in the first place.

Websites like GitHub are great for implementing git, as well as storing your projects in the cloud (so you can still recover your work even after you’ve thrown your laptop against the wall when your stupid project is too stupid to work like its supposed to). It’s also likely to be the first thing that employers will look at when you apply for those software development jobs (so maybe don’t make your really stupid projects public).

Git Tutorials and Resources

NOTE: Once you’ve gotten to the stage where you want to start building your own projects, it’d also be a good idea to set up a development environment on your own computer. There are tons of different tools and applications out there for this and we could write a whole separate article on this topic. But we don’t have time for that right now, we’ve got jobs and stuff to do. So just take a look at these resources if this is something you want to look into:

 

#5 – Pick a Frontend Framework

Knowing your way around HTML, CSS and Javascript is great foundation to web development, however frameworks make it so much easier to develop webpages. A frontend framework is basically a package of Javascript code that other developers have written that you can use as a basis for building your own project. It makes it easier to do implement frontend features, but they usually a fair amount of extra learning. Below we’ve listed some of the most popular frameworks out there today:

React

React is probably (at the time of writing this article) the most popular JavaScript library for building user interfaces. It’s maintained by Facebook and a community of individual developers and companies. It also has a sister framework called React Native for mobile app development.

How do I get started?

Dive straight in and start building your own React application with create-react-app: https://github.com/facebook/create-react-app

Or for full documentation see: https://reactjs.org/

 

Vue

Vue is a lighter JavaScript opensource web framework/library.

How do I get started?

For Vues installation and step by step tutorials on their features, visit: https://vuejs.org/v2/guide/

Angular

Angular or sometimes known as Angular 2 unlike many of these is an end-to-end Web Framework. Its backed by Google and everything you need is built into Angular. It uses TypeScript and it is compiled before runtime. You may come across AngularJS when looking it up, this is not that.

How do I get started?

Start your tour of heroes app here with a complete guide from installation to writing code to running it here: https://angular.io/tutorial

Bootstrap (CSS)

Bootstrap is a populate CSS framework that styles your webpage responsively according to window sizes and devices.

How do I get started?

See bootstraps get started documentation here: https://getbootstrap.com/docs/4.4/getting-started/introduction/

 

Conclusion

So there you have it, five tips and tons of resources to help you get started on your frontend development journey! While this isn’t a definitive list of everything you need to know, it’s a great place to start learning. It’s important to remember that yes programming can be intimidating at first, but if you start to feel demotivated or overwhelmed just know that every developer has felt that way at least once in their career but has managed to work through it. The best tip we can give you is to try embrace the uncertainty and persevere!

Some final resources:

https://dev.to/gregfletcher/top-front-end-development-youtube-channels-4ihg

https://stackblitz.com/

https://www.freecodecamp.org/news/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6/

 

About the Authors

This blog is written by Abby Mitchell and Sarah Ksiyer, who are part of the Women in Technology group in the CIO team of IBM UK. The group provides opportunities to collaborate with experts to continuously learn, share knowledge and diverse experiences, build meaningful networks and ultimately, support women in having fulfilling careers within technology. The CIO team owns IBM UK’s IT strategy and provides the tools and infrastructure that IBMers use to do their jobs every day. Their mission is to deliver best-in-class systems, help business partners win in the marketplace, and create a productive environment for IBMers.

Abby Mitchell

Abby is an Application Developer for the CIO based in London, IBM UK. She shares her recollection of starting university five years ago when “I’d barely heard of programming, couldn’t write a single line of code, and didn’t even really know what a software developer was, let alone imagine I’d ever be one. Today, 6 months into my graduate role, I am still constantly challenged to learn new things and escape my intellectual comfort zone. Every day I find some new area of software that ignites the same curiosity that prompted me to first look into ‘that coding stuff’ a few years back.

I still struggle to explain what a software developer is. We come in all shapes, sizes and skill sets, and every day is different. But I can say that I’m definitely able to write at least one line of code!”

Sarah Ksiyer

Sarah is a Full-stack Developer for the CIO based in London, IBM UK. She has always been fascinated by tech since first getting her hands on Windows 95 (an ancient artifact nowadays). Many years into her career and she is still fascinated. Aside from tech, Sarah loves traveling, specifically discovering new cultures, learning history, and having a “food crawl” – yum! I’m an animal lover and a cruelty-free advocate, my latest hobby is boxing which I really enjoy and cue in the developer cliché – gaming.

On being a female in tech, Sarah recalls, “When I was a Computer Science student the attitudes towards the lack of women in tech and our course was that it was just the norm. Now more than 10 years later, we’re breaking the status quo and it’s awesome as we empower others and encourage diversity.”

 

4 Print