Michael J. Larocca

Posted on Dec 18, 2023 • Edited on Dec 26, 2023 • Originally published at htmlallthethings.com

Front-End Development: Setting Up Your Environment and Essential Learning Topics

#codenewbie #javascript #career #frontend

Introduction

The leap from learning web development on coding sites to creating your own local coding environment is VAST! In this article, tech industry experts Matt Lawrence and Mike Karan provide the road map YOU need in transitioning from a pre-set environment to creating your own local web development setup, and the essential learning topics needed to become a hirable developer!

Topics covered in this article include:

Transitioning from a pre-set environment to creating your own local web development setup
What to learn as a Front-End Developer

Transitioning from a pre-set environment to creating your own local web development setup.

Setting up a local development environment
VS Code Editor
Install Node JS
Node Package Manager (npm)
Build tools and task runners (Webpack, Gulp, Grunt)
CSS preprocessors (Sass)
Version Control
GitHub
Introduction to Continuous Integration and Continuous Deployment (CI/CD)

What to learn as a Front-End Developer:

HTML, CSS, JavaScript
Command Line Interface (CLI) basics
Introduction to RESTful APIs and working with external data
Basic web performance optimization techniques
Testing and debugging (unit testing, integration testing, browser debugging)
Understanding web servers and hosting
Frameworks

Setting up a local development environment

To quote my favorite Star Wars movie, "Here is where the fun begins!" Transitioning from learning web development in a pre-established workspace to setting up your own web development environment can be as challenging as a Jedi Knight entering the battlefields in their starfighter above Coruscant during The Clone Wars!

Have no fear, padawan! Below is your path to the "local development environment" side of the coding Force.

Essential Tools for Setting Up a Front-End Development Environment

Visual Studio Code: A popular FREE code editor for writing and organizing code.
Google Chrome, Mozilla Firefox, or other browser: Web browsers for testing web applications. ( You most likely have this installed 😉)
Node.js and npm: A JavaScript runtime environment and package manager for managing project dependencies.
Git: A version control system for tracking changes and collaborating on projects.
Terminal: A command-line interface for executing commands and interacting with your computer's file system. (Can be accessed in VS Code)
Development server: A tool for serving web applications locally, making it easier to preview and test changes. (Can be accessed in VS Code)

Below are the setup instructions for each tool for setting up a local web development environment.

Visual Studio Code

Visit the official Visual Studio Code website: https://code.visualstudio.com/
Download the installer for your operating system (Windows, macOS, or Linux).
Run the installer and follow the prompts to complete the installation.

Google Chrome, Mozilla Firefox, or other browser

Visit the browser's official website (e.g., https://www.google.com/chrome/ or https://www.mozilla.org/en-US/firefox/new/).
Download the installer for your operating system.
Run the installer and follow the prompts to complete the installation.

Node.js and npm

Visit the official Node.js website: https://nodejs.org/en/download/
Download the installer for your operating system (Windows, macOS, or Linux).
Run the installer and follow the prompts to complete the installation.

Git

Visit the official Git website: https://git-scm.com/downloads
Download the installer for your operating system (Windows, macOS, or Linux).
Run the installer and follow the prompts to complete the installation.

Terminal

For Linux and macOS users, the default terminal application is pre-installed.
For Windows users, you can use the default Command Prompt, PowerShell, or install a terminal emulator like Windows Terminal from the Microsoft Store or Cmder from https://cmder.app/.

Development server

Open Visual Studio Code.
Click on the Extensions icon in the sidebar.
Search for "Live Server" by Ritwick Dey.
Click the Install button to install the extension.
After installation, open an HTML file in your project and click on the "Go Live" button in the status bar to start the development server.

VS Code Editor

The VS Code Editor, or Visual Studio Code, is a FREE user-friendly software created by Microsoft that is used by most developers to write, organize, and edit code for their projects.

You are probably accustomed to coding on websites like freeCodeCamp, Codepen, Scrimba, and others. The code editors and the entire environment on these platforms are pre-configured for you, allowing you to concentrate on coding. However, to work independently, you must install a code editor and establish the entire environment on your own.

To help you get started with the VS Code Editor, tech industry expert Jesse Hall (codeSTACKr) prepared this beginner-friendly FREE YouTube playlist that includes everything you need to get up to speed!

codeSTACKr: VS Code Tips & Tricks

Install Node JS

Did you know that JavaScript code runs inside web browsers? Node.js is a runtime environment that allows you to run JavaScript code on the server side, enabling you to build and run web applications outside of the browser. Node.js lets you handle tasks like saving data, processing user requests, and managing files using JavaScript for your application's front-end and back-end.

Since Node.js does not come preinstalled on computers, you need to download and install it from the official Node.js website.

Node Package Manager (npm)

As a self-taught web developer, I initially found it challenging to comprehend the concept of Node Package Manager and its functionality. So, what is this essential tool used by developers on a regular basis? Node Package Manager, or npm, is a tool that helps developers easily download, install, and manage reusable code packages, called modules, which can be used to add functionality to their projects without having to write the code from scratch ( not too much help in better clarifying what it is, right? 😅)

No worries! Jessica Chan (Coder Coder) created this amazing and clarifying video on what NPM is and what we use it for. I wish this video came out when I was breaking my head over trying to figure it out!

Coder Coder: What is NPM, and why do we need it? | Tutorial for beginners

Build tools and task runners (Webpack, Gulp, Grunt)

Build tools and task runners, like Webpack, Gulp, and Grunt, are helpful assistants, often used with npm for managing dependencies. They automate repetitive tasks, such as compiling Sass into CSS, allowing you to focus on writing code. For instance, when working with Sass, a task runner like Gulp can monitor changes in your Sass files and automatically convert them into CSS whenever you save. This saves time and ensures your CSS is always up-to-date with your latest changes.

To see this working in action, Jessica Chan (Coder Coder) wrote the following detailed article: Super simple Gulp tutorial for beginners

CSS preprocessors (Sass)

So what exactly is this Sass that we are talking too much about in this article? CSS preprocessors, like Sass, are tools that extend the capabilities of CSS by adding features like variables, nested rules, and mixins. They allow you to write more organized and maintainable CSS code. Preprocessors convert their syntax into standard CSS, which browsers can understand.

I enjoy coding in Sass not just for the variables, but for the nesting ability! In Sass, nesting allows you to write cleaner and more organized CSS code by placing child selectors within their parent selectors. This creates a clear hierarchy and makes it easier to understand the relationship between elements.

Sass Features: Enhancements over CSS

Variables: Store values for reuse and easier maintenance
Nesting: Organize selectors in a hierarchical manner
Mixins: Reusable blocks of code with optional parameters
Functions: Perform calculations and return values
Conditionals: Apply styles based on conditions using if, else-if, and else
Loops: Iterate through lists or maps to generate styles
Import and Partials: Split code into smaller, more manageable files

Version Control

Ok, this topic is a little steep, so hold on to your seats! Version control is a system that helps you as a developer keep track of changes made to your code over time, allowing you to easily revert to a previous version if needed ( It's like having a detailed history log of your code, with snapshots taken each time you save your changes ). This is particularly useful when working with a team, as it helps prevent conflicts and ensures that everyone is working on the most up-to-date version of the code. The most popular version control system is Git, which is often used in conjunction with online platforms like GitHub or GitLab for collaboration and remote storage.

A great place to get started with practicing ( without breaking anything 😅 ) is heading over to https://learngitbranching.js.org/ . Learn Git branching is an interactive web app that visually teaches Git and branch management fundamentals. It simulates a Git repository in your browser, offers levels to practice Git concepts, and provides feedback on your actions. The levels increase in difficulty, and the tool displays performance stats after each level. It's a FREE resource for learning Git basics in a visual and hands-on manner!

Some key points include:

It simulates a Git repository in your browser using JavaScript. No installation is required.
You can step through levels that teach you Git concepts like commits, branches, merging, rebasing, and more.
As you progress through the levels, it provides feedback on your actions and "commits" to show you the state of the repository.
It's a fun and interactive way to learn the fundamentals of how Git manages branches and commits.
The levels gradually increase in difficulty to challenge your understanding.
After completing a level, it will show you stats on your performance and areas to improve.

GitHub

As a developer, you will be spending plenty of time on GitHub. GitHub is a web-based platform that allows you to store, share, and collaborate on your code using Git version control ( previously discussed ). It also provides a central place for teams to manage their projects, track changes, and work together on the same codebase. With features like issue tracking, pull requests, and code review, GitHub simplifies the development process and makes it easier for developers to collaborate on projects, no matter their location.

Now, getting started with GitHub ( for me, at least ) was not intuitive at all! So please don't feel bad if you don't quite understand what everything is and how it works. Getting good and comfortable with GitHub takes time and practice.

So then, how can you get started? skills.github.com is a website offering FREE interactive courses to learn and enhance your GitHub skills! The project-based courses use GitHub Actions for step-by-step instructions and feedback. They cover topics for beginners to experts and include exercises, quizzes, and real projects. The self-paced learning experience is suitable for anyone looking to improve their understanding of GitHub and its features.

Some key points covered include:

The courses are project-based, which means you work on real GitHub projects while learning. This helps make the learning more practical and hands-on.
The courses use GitHub Actions to provide step-by-step instructions and feedback as you progress through the course.
As you complete each step, GitHub Actions will automatically update the project to move you to the next step. This provides a guided learning experience.
The courses cover a range of topics for beginners to experts, from the basics of using GitHub to advanced tools like GitHub Actions, Codespaces, and Copilot.
The courses are self-paced and include exercises, quizzes, and real projects to test your knowledge.
GitHub also provides a Quickstart Guide to help you build your own GitHub Actions-powered courses if you want to teach a skill that is not already covered.

Introduction to Continuous Integration and Continuous Deployment (CI/CD)

Continuous Integration and Continuous Deployment (CI/CD) are important to learn because they help developers ensure code quality and streamline the release process. CI/CD automates tasks like building, testing, and deploying code, reducing the chance of human errors and speeding up the development cycle.

For example, when a developer pushes code changes, CI can automatically test the code to catch any issues before they reach production, while CD can deploy the updated application to the live environment, making the new features available to users faster.

To learn more, check out this detailed Digital Ocean article: An Introduction to Continuous Integration, Delivery, and Deployment

Image generated by Microsoft Image Creator powered by DALL·E 3

What to learn as a Front-End Developer

Now that you have set up your local front-end web development environment, to become a hirable developer, you will have to master these essential learning topics:

HTML, CSS, JavaScript
Command Line Interface (CLI) basics
RESTful APIs and working with external data
Understanding web servers and hosting
Frameworks

HTML, CSS, JavaScript

HTML, CSS, and JavaScript are accurately referred to by Matt and Mike as the "pillars of web development." HTML, CSS, and JavaScript are the fundamental building blocks of web development. HTML (HyperText Markup Language) structures the content on web pages, like text, images, and links. CSS (Cascading Style Sheets) styles the content, controlling the appearance, such as colors, fonts, and layout. JavaScript adds interactivity and dynamic behavior to web pages, enabling user interactions, animations, and data manipulation.

You will frequently encounter the term "vanilla" when discussing JavaScript and CSS. This simply implies that you are coding without using frameworks that require compilation. Both vanilla JavaScript and CSS can be directly interpreted by a web browser. 🍦

A fantastic resource for learning HTML, CSS, and JavaScript for free, as well as earning certifications, is freeCodeCamp!

Command Line Interface (CLI) basics

You will spend much time in the command line terminal as a developer. Although you may initially find it intimidating, once you're comfortable using it, you'll feel like a superhero! You can then be a show off to your non-developer family and friends, demonstrating how amazing you are with computers!

Below is a list of commonly used CLI commands, followed by a FREE YouTube course by tech professional Zach Gollwitzer to help you get off to a great start in becoming a CLI expert!

Essential CLI Commands for Beginners

cd: Change directory; navigate between folders in the file system.
ls: List files and directories; display the content of the current directory.
mkdir: Make a directory; create a new folder.
rmdir: Remove the directory; delete an empty folder.
rm: Remove files; delete a file or multiple files.
cp: Copy files or directories; create a duplicate of a file or folder.
mv: Move files or directories; relocate files or folders.
pwd: Print the working directory; display the current directory path.
touch: Create a new empty file.
cat: Concatenate and display files; print the content of a file to the screen.
grep: Search for text within files; find specific text or patterns in files.
nano, vi, or vim: Text editors; open and edit files within the terminal.
clear: Clear the terminal screen; remove previous commands and output from the display.
exit: Close the terminal window or end the current session.

YouTube course for learning the CLI

Zach Gollwitzer - Course: Beginners Guide to the Terminal (Bash)

Introduction to RESTful APIs and working with external data

As a front-end developer, you'll often need to fetch data from external sources and display it on your website. RESTful APIs (Application Programming Interfaces) are a popular way to access and interact with data from different web services. These APIs work by sending requests to a server, which responds with the requested data in a structured format, usually JSON (JavaScript Object Notation). To fetch and display this data on your website, you can use JavaScript to make API calls, process the received data, and update the HTML content accordingly. By mastering RESTful APIs, you'll be able to create more dynamic and data-driven web applications that provide a richer user experience.

A great way to get started working with APIs is practicing with the Star Wars API! That's right, there is a Star Wars API that is beginner-friendly (and it does not require an API key, so that greatly simplifies it)!

As you may have already guessed, I wrote a detailed article on the topic! I also wrote an article about the Chuck Norris API:

Basic web performance optimization techniques

Another essential skill is performance optimization, which ensures that websites load rapidly and efficiently, a critical aspect of the user experience! Below are some useful tools and websites to assist you in your learning journey:

Optimize Images: Compress and resize images to reduce their file size without compromising quality. Smaller image files load faster, improving page load times. Tools: TinyPNG, Compressor.io, ImageOptim
Minify Code: Minify your HTML, CSS, and JavaScript files by removing unnecessary spaces, comments, and characters. This process reduces file sizes, leading to faster loading times. Tools: HTMLMinifier, CSS Minifier, JavaScript Minifier
Use Browser Caching: Enable browser caching to store static files, like images and stylesheets, in the user's browser. This reduces the number of requests made to the server, speeding up page loads on subsequent visits. Tools: Google PageSpeed Insights, GTmetrix, WebPageTest
Reduce HTTP Requests: Limit the number of files your website needs to load by combining CSS and JavaScript files, using CSS sprites for images, and reducing the use of external resources. Tools: Google Chrome DevTools, Firefox Developer Tools, Safari Web Inspector
Leverage Content Delivery Networks (CDNs): Use a CDN to distribute your website's files across multiple servers around the world. This allows users to load files from a server closer to their location, resulting in faster loading times. CDNs: Cloudflare, Amazon CloudFront, Akamai

Testing and Debugging (Unit Testing, Integration Testing, Browser Debugging)

As a developer, ensuring your web applications are bug-free and function correctly is vital for a smooth user experience. Employing testing and debugging techniques will help you identify and fix issues in your code. Here are some methods and tools for testing and debugging:

Unit Testing: Validate individual components or functions in your code by testing them in isolation. This helps identify issues at a granular level and ensures that each component works as expected. Tools and resources: Jest, Mocha, FreeCodeCamp's Unit Testing Posts
Integration Testing: Test the interaction between multiple components or functions to ensure they work together as expected. Integration testing helps identify issues that may arise when components are combined. Tools and resources: Cypress, Puppeteer, TestCafe
Browser Debugging: Identify and fix issues that occur in the browser by using built-in browser debugging tools. These tools allow you to inspect elements, view console logs, and debug JavaScript code. Tools: Google Chrome DevTools, Firefox Developer Tools, Safari Web Inspector

Understanding web servers and hosting

Embarking on the journey of web development, you'll soon encounter two crucial concepts: Web servers and hosting. Picture web servers as tireless librarians, always ready to deliver your website to anyone, anywhere. Hosting, on the other hand, is like renting a prime spot in a bustling mall for your website, making it accessible to the entire internet. Understanding these concepts is your ticket to making your website go live and stepping into the exciting realms of server-side programming and website security. Let's dive into some resources to make this journey smoother!

Here are some resources to study the topic of web servers and hosting, along with hosting services:

Mozilla Developer Network (MDN): MDN offers a comprehensive guide on how the web works, including an introduction to web servers. MDN Web Docs
Udemy: Udemy has a multitude of courses that cover web servers and hosting, such as "Understanding Web Hosting" and "Web Servers: how they work and how to build one."
LinkedIn Learning: Offers courses like "Learning Web Hosting" and "Setting Up a Web Server" that provide comprehensive knowledge on the subject.

For practicing and hosting your websites, you can use the following free services:

GitHub Pages: A free hosting service directly from your GitHub repository. It's especially useful for static websites. GitHub Pages
Netlify: A platform offering hosting and serverless backend services for web applications and static websites. Netlify
Vercel: A cloud platform for static sites and Serverless Functions, perfect for React.js and JavaScript projects. Vercel

My personal blog, Self-Taught The X Generation is actually a Gatsby starter blog! I forked it to my GitHub, customized it, and then set it to deploy with Netlifly! So you also can fork or even create your own websites, create a GitHub repository, and then use Netlifly to deploy it!

Netlify is a commonly used platform for deploying static websites and has straightforward integration with GitHub.

Frameworks

So, what are Frameworks? In web development, frameworks are pre-written code libraries that you can use to perform common tasks more efficiently. You can think of them as a blueprint or a toolkit that helps you build your projects faster and more efficiently, as you don't have to start from scratch every time.

Frameworks are available for both JavaScript and CSS. In deciding what frameworks to learn, Matt and Mike wisely advise checking your local job listings (or companies you wish to work with) to see what frameworks they use. If you're unsure, React is a solid JavaScript choice, as many companies require it, and numerous online coding schools like freeCodeCamp, Scrimba, and others include it in their course curriculum, where you can earn Front-End Web Development certifications. Similarly, Tailwind is an excellent choice for a CSS framework, as it is gaining popularity.

Before you jump into learning frameworks, you should make sure to spend plenty of time learning and becoming comfortable coding in vanilla, as diving into frameworks too quickly may have a negative impact on your learning progress. So, how will you know when you are ready to learn a framework? We have you covered in the two following articles!

Be sure to listen to the episode!

Episode 275 Are We Expecting Too Much From Our Web Developers?

Be sure to check out HTML All The Things on socials!

Scrimba Discount!

Learn to code using Scrimba with their interactive follow-along code editor.
Join their exclusive discord communities and network to find your first job!
Use this URL to get 10% off on all their paid plans: tinyurl.com/ScrimbaHATT

This article contains affiliate links, which means we may receive a commission on any purchases made through these links at no additional cost to you. This helps support our work and allows us to continue providing valuable content. Thank you for your support!

My other HTML All The Things articles

Conclusion

Taking the leap from coding platforms to setting up your own local web development environment is like graduating from a Padawan to a Jedi Knight! On coding platforms, the entire coding environment is pre-configured, allowing you to focus solely on programming. But to become a fully-fledged developer, you must learn to create your own local web development setup.

As a Front-End Developer, you need to master HTML, CSS, and JavaScript, which are the "pillars of web development." You should also understand the basics of the Command Line Interface (CLI), a tool used to control your computer. Another crucial responsibility of a developer is working with RESTful APIs, which allow you to retrieve and display data from other sources on your website. Website optimization skills enable you to ensure your websites load quickly and efficiently. Additionally, testing and resolving issues in your code are essential! Understanding web servers and hosting is essential for making your website accessible on the internet. Finally, learning to use frameworks can accelerate your coding process and improve your code quality.

Now It's time for you to embark on your journey towards becoming a web development master! Begin your coding adventure today, unleash your coding potential, and harness the power of web development!

Let's connect! I'm active on LinkedIn and Twitter.