The Complete Guide to a Career in Web Development: Basic Concepts and Getting Started

(Please bear with me while I’m breaking this up into multiple separate posts and updating anchors, apologies if some links between sections do not work, they should be updated within the next 24 hours)

Basic Tools and Concepts

What…

(Please bear with me while I’m breaking this up into multiple separate posts and updating anchors, apologies if some links between sections do not work, they should be updated within the next 24 hours)

Basic Tools and Concepts

What does a typical work day look like for a web developer?

Let’s consider an example workday for a front-end developer. We’ll focus on a junior developer position since that is likely what you are going to be working toward.

We’ll use this opportunity to discuss topics and tools that are commonly used in real workplaces, that you should be aware of, but might not necessarily encounter when working alone including meetings, project management tools, design systems, and communication tools.

Communication Tools

Your day will likely start with opening your email, then opening up a communication tool like Slack or Microsoft Teams.

These tools are what you use to chat with your team in real time, particularly if you are working remote, but even within the office most communication is done through a tool like this.

For video discussion you’ll likely be using something like Zoom, Google Meet or Skype. Most people these days are familiar with at least one of these tools, they are pretty interchangeable for the most part.

Companies typically use these for basic communication for work to be done, or asking questions and clarifying assumptions. Bear in mind that when it comes to actually documenting work that needs to be done, tools like these are usually discouraged as they are not designed to manage tasks. We’ll cover that when we get to project management tools.

Once you’ve logged in and checked your emails, it’s often time for the daily standup or similar meeting.

Meetings

You begin your day often with a meeting called a “stand up”. This is where other developers on your team and your team lead discuss the projects they are working on, what they have done, what they are planning to do, and whether there is anything “blocking” their work.

An example of a “blocker” would be for example waiting for a client to send you a description of the new page they want built, which you need before you can begin working on it.

Meetings are very common in the developer’s workplace (often a source of jokes and memes), but humour aside there is a reason they are popular. Often it is beneficial to a project to discuss in real-time work that needs to be done, and the different approaches about how you plan to accomplish it.

The most important thing to do to have successful meetings in the workplace is to document them and produce a list of actionable tasks. Everyone should walk away from a meeting having a better idea of the work that needs to be done.

At this point it’s likely time to review the work that does need to be done that you are responsible for. This is usually done through issue ticketing systems. People within your organization will create tickets that represent issues with your project or work that needs to be done in one of the many project management tools that exist out there.

Project Management

What is Agile?

It’s a good idea to familiarize yourself with at least one of these tools before you start looking for employment. One of the simplest ones to play around with is called Trello.

It has a free plan and it would be a good idea for you to use it to keep track of work that needs to be done even if you are only working on personal projects for yourself, just to get familiar with the workflow of creating issues and marking them complete.

Other more complex professional tools in that space you might use in your real job include JIRA, Github issues and Gitlab. You don’t need to know how they work, just being aware they exist is fine.

In addition to the tools themselves, there are many different ways that you can choose to use them. This is where you may have heard terms like agile, waterfall, kanban,and scrum master.

These are different project management methodologies that sound fancy, but ultimately are just different approaches to tracking work and making sure expected projects are delivered on time. Feel free to Google the above terms to learn more if you desire.

As a developer you honestly really don’t need to worry too much about these, you simply follow whatever methodology your company uses (oftentimes will be no specific methodology at all).

So at this point you have found a ticket assigned to you. We’re ready to do actual development work.

The ticket looks something like this:

Ticket Example

This is an extremely simple example I whipped together on Trello, but it includes most of the fundamentals. You’ll have a basic title that describes the issue, and a description that explains the work that needs to be done.

Oftentimes you’ll see additional things like a due date, priority list, tags for organizing and grouping related tickets etc. As a developer, particularly a junior developer, your only real concern will be the description of the ticket itself and marking it as “complete” when the work is finished.

You’ll notice here the description says to use the design in Figma to complete the task. What is Figma?

Before we can answer that question, first let’s talk briefly about Design Systems because the two are very closely connected.

Design Systems

As someone who does not pretend to be a designer nor a design expert, I have nevertheless come to appreciate the importance of good design and a good design system.

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

Nielsen Norman Group:

The further I go in my career the more I realize that proper design of a piece of software before development occurs can make or break the success and scalability of a product.

Pay particular attention to the terms “shared language” and “consistency”. Imagine you are building a massive product with hundreds of other developers. Here’s just a couple examples among countless that might occur without a proper design:

  • If you don’t all agree on the term used for a concept in your app, you may end up with a dozen different names for the same thing like “customer” vs “user” vs “employee” across the app and two developers may think they’re working with totally different data when they’re actually talking about the same thing.

  • The designer may offer a specific hex code for “yellow” that is intended to use across the app, but if the relationship between that “yellow” is not defined between actual behavior, one developer may make it the default colour for “success” in one part of the app while another defines it as “warning” leading to a confusing UX experience when a user of your product can’t easily tell if their action was correct or not.

Examples of famous design systems include Google’s Material Design, Apple’s Human Interface and IBM’s Carbon Design System.

These systems are not necessarily exclusive to those companies, they are made publicly available specifically so they can be used by any designer and developer. Many open source tools like Material UI for example (a React component library) are built on top of these basic principles and available to use by anyone.

Depending on the company you work for, they might build on top of an existing design system while trying to modify it to their company’s needs (for example just change the colours to match their brand colours). This has the benefit of being fast and inexpensive since you are working on top of existing verified designs already established.

Alternatively many larger companies will opt to build their own design systems from scratch. This has the benefit of being more unique, while also being more expensive both from the design side and the development side.

(And then of course you may be unfortunate enough to land at a company that does neither and expects the developer themselves to handle both design and development and just “make it look good”. If you find yourself in that situation…. good luck!)

Once you have established what kind of design system and design language you will be using, the next step is to pick the right design tool to foster the best collaboration between designer and developer you can.

Design Tools

What is Figma?

Figma is a design tool, and pretty much the de-facto current standard in the web development industry. Other similar tools exist like Adobe XD and Zeplin but we’re going to focus on Figma since it’s most likely the one you will encounter.

Again, like many other tools it’s more about the basic concepts. Which specific one you use doesn’t make a big difference as long as you understand the fundamentals.

The general process at most companies (particularly large ones) when creating a new website or web app will be to built the wireframes about how they want it to work and function before development work actually begins.

Remember your job as a web developer isn’t to make decisions about how they work or how they look (that’s the job of the product manager and UI/UX designer respectively).

Your job is to implement those decisions and designs as code.

Here’s a small example of what you might see when you follow the link in the ticket to the Figma design they want you to implement:

Figma Example

Each element built by the designer can be clicked on and you can see all the details about it, often even the CSS code you can use to build your actual implementation off of.

These designs will serve as the example of what the expectations are for how the site should look and function. When your code gets reviewed after it has been completed, the person doing the review will be comparing the work you did and checking to make sure it matches the intended design.

Remember that a website or app includes both design and function. As a front-end developer you are not just responsible for making sure images are laid out properly and that buttons are red, but also that the correct data is being displayed and correct logic is being used to display it. That’s where the more complex programming aspects come into play.

It’s not necessarily easy to tell from this image, but your task might include fetching data from an API which includes a real time list of all the plants the company has in stock, and exactly what their inventory levels are. This data will be changing from minute to minute, which is why you can’t just write those descriptions in by hand.

All that and more is part of your responsibility as a front-end developer to create a working “New Arrivals” page. You will do this work almost entirely in the scope of HTML, CSS and Javascript.

We briefly mentioned reviews, and that is the last topic we will touch on as part of your daily experience in your front-end developer role.

Code Reviews

One last critical part of a developers job is also one of the most difficult to replicate and get experience with when you are learning: code reviews. Because you will be doing most of your work on your own, you won’t get to benefit from having your work reviewed by others (unless you are lucky enough to find friends or peers online willing to do so, in which case I would highly recommend you take advantage of it).

Code reviews are a critical part of the development process for most (unfortunately not all) companies. The reason they exist is to try and ensure only that all code written and implemented as part of the larger codebase meets a certain standard of quality.

Code reviews are usually done through your version control system when your changes are committed. We’ll speak more on these topics when we get to git, but the basic idea is that your code can be viewed live in a browser on a website like Github for other team members to see.

They have the ability to leave comments and either “approve” or “deny” and send back with a request to fix errors, or make general improvements.

It’s important to look at code reviews as a positive opportunity for improvement. They are probably going to be one of the most important sources for your growth, and the best developers I know are those who seek out and ask for reviews from others so they can learn.

Those doing the reviews are encouraged to focus on finding and fixing potential errors, as well as issues that may result in code that is difficult to maintain in the long run. They should be done from a perspective of positive encouragement and keeping in mind that it’s not something to take personally. Done properly code reviews are one of the best tools a company has to create long term maintainable systems.

Here’s a great blog post about how to do a code review effectively. Well worth reading if you are going to be joining a team working with other developers.

What skills are critical for a successful junior developer?

That brings us to about the end of the day, you’ve successfully finished your first day as a junior developer!

There are two final closing thoughts I have that I feel are critical to be successful in a developer role that you may not necessarily get to practice much while learning on your own, so I think this is a good place to mention them:

Reading Code

Learn to Read code — not just write it.

For many developers, particularly new ones, you will actually spend more time reading code than writing code in the real world.

The reason for that is that as someone with less experience, you will not be tasked with building new systems, but rather making small improvements to existing ones.

A lot of developers really underestimate how difficult it is to read code. Reading other people’s code is hard. Harder than writing code, because when you write code you know what your intention is, but when you read it you have to try and figure out other people’s intentions through the code they have written.

And unfortunately, the reality is that a lot of those code is going to be a mess. If you have any rose coloured glasses on regarding expectations of clean codebases and well documented requirements you’re going to be in for a bit of a rough ride.

Oftentimes that is the exception rather than the rule, so you need to be ready to dive into something that isn’t necessarily straightforward and figure out what’s going on in order to make the changes that need to be made.

If this is something you would like to practice, once you have learned the basics of writing code, I would suggest looking into contributing to open source projects. It can be very intimidating at first, but also very rewarding.

Asking for Help

My rule of thumb for someone new is to try figuring out something on your own for about 10-15 mins, and if you still haven’t made progress, then ask for help. That time frame will gradually increase as you get more experience.

Any good company that hires a new developer will understand that the goal is to get your trained and up to speed and will properly dedicate assets (other developers) to be available to mentor you and answer questions.

If you ever find yourself in a position where you are new and other developers are “too busy” or “don’t have time to help” then please know that is a failure of the company, not a failure of yours.

Getting Started

How do I get started?

Now that we have established the mindset you want to be in, and what bring a “web developer” really means, let’s talk about getting all the tools you need and setting you up for success.

There are five fundamental things that you should have before you get started

  1. Computer Hardware
  2. A Working Environment
  3. A Way to Test Your Work
  4. A Goal to Work Toward
  5. A Resource to Learn From

Computer Hardware

To have the most user friendly and effective setup, you are going to want to have a standard computer or laptop with either Windows, Mac OS or Linux installed.

It is certainly possible to learn programming on a Chromebook or even a tablet / phone, however you will encounter a lot more challenges in trying to do so than if you can get your hands on a computer with a traditional operating system.

Whether you choose Windows, Mac or Linux makes absolutely no difference as a beginner. Even as a professional all three of them are perfectly good viable options. Don’t ever let anyone tell you that you need a Mac to be a developer. Or that you have to use Linux.

You’ll be perfectly fine to get through your learning experience on whatever you have available to you, and if your job ever requires a specific one, then the company will provide that one for you.

If budget is an issue, I would recommend looking for a used laptop. Something with an least 4GB of RAM (that’s about the minimum for most modern coding environments).

A Working Environment

Although it is possible to learn web development entirely with tools in the browser, it will limit you significantly compared to setting up your own computer to do your development work on.

You can technically do your development in any text editor (even something as simple as Notepad).

The reason we use specialized code editors in the software field is because they can provide tons of added features to both speed up development and check for errors in your code automatically as you type it.

You will see the shorthand IDE which stands for integrated development environment often. The most popular IDE by far is Microsoft’s Visual Studio Code referred to as VS Code for short.

It’s totally free and you can use it to help you write code in almost any programming language in existence.

Later in this guide we will go into full detail on how to set up a simple web server on your computer that you can use to test and run your code.

A Way to Test Your Work

Once your code is written, how do you actually run it to see if it works?

If you are learning web development, then you need something that sends your HTML, CSS and Javascript code to your browser to run. That “something” is called a web server.

When you type an address into your browser’s URL bar, that URL gets converted into an IP address which identifies a particular machine somewhere on the web. If that machine is running a web server, then your browser will request data from it (usually HTML, CSS and Javascript) which it then parses and displays it on your screen for you..

Later in this guide we will go into full detail on how to set up a simple web server on your computer that you can use to test and run your code.

A Goal to Work Toward

This one is relatively simple, but it’s important to define it. Most people who begin their web development journey will have the goal of getting employed in a web developer job, which is a great goal!

However some might simply wish to learn more about how websites or made, or have a hobby project in mind that they would like to learn how to build. Those are great goals as well.

Regardless what your goals are it’s critical that you establish a plan for how you will reach that goals.

Early on in the process you will not even be aware of everything you need to learn, so setting specific timelines might not necessarily be realistic at the beginning.

Instead try to focus on routine, decide how much time you can devote each day and each week to your learning and make sure you’ve done everything you need to do to ensure that time is available for you.

Regular practice is far more important than singular long sessions. For example you will learn more from practicing for one hour every day than you will doing 5 hours on Saturdays and Sundays.

The reason being that the long the gap between practice the less likely you are to retain things you have learned. Learning web development (and anything really) is all about repetition and consistent practice.

And don’t forget the importance of proper sleep for solidifying what you have learned at the end of each day.

In terms of timelines, my experience from those I have worked with and talked to in the community, is that someone who dedicates themselves to learning web development full time (like a 9-5 job) will probably require at least 6 months to become proficient enough to begin applying for jobs.

Those who are only learning just a few hours a week in their spare time will require more, likely at least a full year or more.

These are by no means set in stone, everyone is different, everyone learns at different rates, so you should not hold yourself to any unrealistic deadlines that might put you at risk of burning out or giving up.

It’s a marathon, not a sprint.

Once you have that plan in place then it’s finally time to decide how you will go about learning.

A Resource to Learn From

One of the most difficult parts of learning web development people often find is deciding which course they should take, or which tutorial they should follow, or which project they should build.

In this guide I will provide a lot of recommendations, the vast majority of them free to use.

The most important thing to keep in mind is again, that learning to be a developer is a constant never-ending learning journey. Each tutorial you follow and project you build will teach you a little more.

Most people find that the most effective way to learn is through a combination of tutorials and self-directed projects. Start by following an online course that will guide you and hold your hand most of the way.

After completion, try to build your own project using some of the things you learned. Select that project based around something that interests you. That’s a very important step to help stay motivated to see it through.

Keep the scope (size of the project) small. It’s much better to start and finish a small project then to undertake a large project and quit when you realize you’ve taken on too much.

The more projects you build the better you will get at properly estimating the scope of the workload.

Your very first resource will be this guide. We will introduce you to the basics of HTML, CSS, and Javascript. We’ll also touch on version control (git) and web servers.

Finally we’ll talk in brief detail about a number of other concepts you’ll want to be aware of, even if you don’t understand how they work.

Web Development Basics

How does a website get created?

So how does a website get created? We’ll begin by going and taking a look at one of the most poplar websites in the world: Amazon

Amazon Example

Start by loading the home page.

Now try right clicking on any of the section titles. I’ve chosen “Shop by Category” but if yours appears different thats fine.

When you right click choose “Inspect” from the menu that comes up.

Amazon Example HTML

A menu will appear at the bottom of your screen.

This is your browser’s “Developer Console”. The code-looking text you are seeing is called HTML. It is a special kind of text designed to structure content.

It is one of the three primary web languages you will need to need to learn to become a web developer (along with CSS and Javascript).

What you are looking at is the complete HTML structure of the Amazon home page. This code is not designed to be hidden from you, in fact all code that runs in your browser on every site you visit is totally public and visible by using the “inspect” tool.

You will find that the browser’s inspector is one of many important tools you will become familiar with while learning.

How can I build a website or web app?

The absolute easiest way for someone with no experience at all to start building their own website or web app is to use a tool called Codepen.

There are many tools like this (code editors in your browser), I have simply chosen Codepen because it’s one of the simplest and easiest to get started with.

Create an account for yourself (using an account will allow you to save your work) and then click the Pen button on the left menu. You’ll be taken to a screen that looks like this:

Codepen Blank

Remember we were looking at some HTMl code on the Amazon website, so let’s copy it over and see it if works here! I’ve doing to copy and paste this from the developer console:

<h2 class="a-color-base headline truncate-1line">Shop by Category</h2>

Codepen First HTML

Notice that a couple of seconds after your paste it into the HTML block, some text appears in the white section of the bottom of your screen. That is Codepen render the result of your HTML!

It looks just like it did on Amazon, even the font size is similar. The reason for that is that <h2> represents a “header” and all browsers have built-in ways of deciding how they should look. You can customize them of course, but the browser handles the defaults.

You now have an environment where you can learn and play with HTML. We’ll go into more detail on HTML in a later section. For now I’d also like to introduce the other two important languages you will need to learn: CSS and Javascript.

We’ll begin with Cascading Style Sheets. CSS is a special syntax used to change the way HTML looks. So as we mentioned, your browser has its own default options of how an <h2> tag should look, but with CSS we can override those default styles and make it look however we like.

In the second box on your Codepen marked as CSS let’s add the following code:

h2 {
  font-size: 36px;
  color: green;
}

Codepen CSS

Notice how it changed the font size and colour of your text? That’s what CSS does. The label outside the curly brackets says h2 which is called the selector. That specifically says which HTML elements we want to apply these styles to.

We’ll get into CSS in much more detail in a coming section, but let’s at least introduce the 3rd language you’ll be learning: Javascript.

Javascript is by far the most complex of the three, it’s a full fledged programming language, but believe it or not you can actually build fully complete websites with just HTML and CSS alone.

Javascript is only need to make your sites and apps interactive, and although that is an important part of the vast majority of the web these days, there are still many types of sites that need little to no Javascript.

For example a business page for a local restaurant which simply lists the menu, store hours and a contact phone number. Or a blog which is just written content and images and links between pages. Neither of those examples would require Javascript to work.

As soon as you start to want user interactivity, you are going to need it though. Let’s show one of the simplest examples of Javascript at work: a button.

Add the following to your Codepen in the Javascript section:

function buyItem() {
  alert("You bought an item!");
}

What we’ve created there is a “function” which is basically something that performs a set of tasks. In our case the task is to show an alert banner on the screen that says “You bought an item!”

In order to actually trigger our function though, we will have to connect it to HTML. We’ll need a button we can click that will “invoke” this function. Add the following code to your HTML block on codepen after the <h2> that is already there:

... <button onClick="buyItem()">Buy Item</button>

Codepen Javascript

A button that says “Buy Item” will appear in your little app. try clicking on it and you should get a little pop up window that says “You bought an item!”

Honestly, that’s web development in a nutshell right now. Obviously it just grows and gets bigger and more complex from here, but you now have experience using every core tool you need to build applications for the web.

All the fancy tools you hear about like React, Angular, etc ultimately just transform your code into HTML/CSS/JS before it gets sent to your browser, so if you can learn the fundamentals and learn them well then you will be in an extremely strong position to pick up the specialized tools which simply make developing apps easier and more efficient.

Easier said than done of course, but we’re going to walk through everything you need to know step by step.

How can I build websites on my own computer?

There’s absolutely nothing wrong with continuing to use Codepen or similar services like Codesandbox, Replit or Glitch while learning, but at some point you are probably going to want to know how to built websites using tools on your own computer.

There are many benefits to doing it this way, you’ll be able to store and manage your own files, as well as share them with others. You can customize your own tools to behave how you like, and you don’t need to worry about always having access to an internet connected browser to build.

Of course when you work for a real company the expectation is that you will be working on your own machine (or a company machine) so it will be expected that you know the basics of how to set up an editor.

Absolutely any text editor can be used to write HTML, CSS and JS. Even basic Notepad. The main reason we choose something like VS Code (which this tutorial will teach you to use) is that we get major benefits designed to help people who write code.

Some of the benefits include:

  • Project organization (see all the files for our project in one place)
  • Syntax highlighting (colouring text differently depending on what it does)
  • Intellisense (autocomplete and tooltips that tell you what your code actually does)
  • Error checking while you write

There are many more benefits of course, but these are just some examples of the most useful ones!

The next section will help you get VS Code installed on your machine and prepare you to setup your first web project.

In the event you don’t have a computer you can install a text editor on, you can continue to use Codepen for the time being. Simply skip over the below section on setting up VS Code. You would also want to skip the section on configuring a web sever, but it’s still worth reading as there are many concepts explained that are important to understand.

How do I set up a development environment on my computer?

Start by installing VS Code. You can download it here from the official site.

The benefits you will get from automatic syntax highlighting, formatting, intellisense and other programming-specific features will not only improve the quality of your code, but also your experience in writing it.

Install VS Code

You will definitely want to download or bookmark the keyboard reference for your relevant OS:

The majority of the keyboard shortcuts in this tutorial work for both Windows and Linux, and Mac users can usually substitute the Ctrl key for the Option key.

Next we are going to create a folder called my-project. You can create this folder anywhere on your computer that you like. Once you have created it return to VS Code and select File -> Open Folder then navigate to the my-project folder you created.

Now open up the Explorer bar on the left side of VS Code. There are a few ways to do this, either press Ctrl + Shift + E or use the little papers icon:

VS Code Explorer

You are now ready to create files and write code.

Before we continue any further, let’s really start to dive deeper into what HTML is and teach you how to set up the shell for a standard website.


Print Share Comment Cite Upload Translate
APA
Alex Eagleson | Sciencx (2024-03-29T05:32:05+00:00) » The Complete Guide to a Career in Web Development: Basic Concepts and Getting Started. Retrieved from https://www.scien.cx/2022/09/22/the-complete-guide-to-a-career-in-web-development-basic-concepts-and-getting-started/.
MLA
" » The Complete Guide to a Career in Web Development: Basic Concepts and Getting Started." Alex Eagleson | Sciencx - Thursday September 22, 2022, https://www.scien.cx/2022/09/22/the-complete-guide-to-a-career-in-web-development-basic-concepts-and-getting-started/
HARVARD
Alex Eagleson | Sciencx Thursday September 22, 2022 » The Complete Guide to a Career in Web Development: Basic Concepts and Getting Started., viewed 2024-03-29T05:32:05+00:00,<https://www.scien.cx/2022/09/22/the-complete-guide-to-a-career-in-web-development-basic-concepts-and-getting-started/>
VANCOUVER
Alex Eagleson | Sciencx - » The Complete Guide to a Career in Web Development: Basic Concepts and Getting Started. [Internet]. [Accessed 2024-03-29T05:32:05+00:00]. Available from: https://www.scien.cx/2022/09/22/the-complete-guide-to-a-career-in-web-development-basic-concepts-and-getting-started/
CHICAGO
" » The Complete Guide to a Career in Web Development: Basic Concepts and Getting Started." Alex Eagleson | Sciencx - Accessed 2024-03-29T05:32:05+00:00. https://www.scien.cx/2022/09/22/the-complete-guide-to-a-career-in-web-development-basic-concepts-and-getting-started/
IEEE
" » The Complete Guide to a Career in Web Development: Basic Concepts and Getting Started." Alex Eagleson | Sciencx [Online]. Available: https://www.scien.cx/2022/09/22/the-complete-guide-to-a-career-in-web-development-basic-concepts-and-getting-started/. [Accessed: 2024-03-29T05:32:05+00:00]
rf:citation
» The Complete Guide to a Career in Web Development: Basic Concepts and Getting Started | Alex Eagleson | Sciencx | https://www.scien.cx/2022/09/22/the-complete-guide-to-a-career-in-web-development-basic-concepts-and-getting-started/ | 2024-03-29T05:32:05+00:00
https://github.com/addpipe/simple-recorderjs-demo