Skip to main content

Development environment setup

Development environment setup

To begin developing with HTML, CSS, and JavaScript, a well-configured development environment is essential. This article will guide you through the necessary steps to download and install the essential tools.

Web Browsers​

Having multiple browsers installed is crucial for testing and ensuring your websites function correctly in different environments. Here are the steps to install the most popular browsers:

Mozilla Firefox:​

  1. Visit thepágina de descarga de Firefox2. Click the "Download Now" button.

  2. Run the downloaded file and follow the instructions to complete the installation.

Google Chrome:​

  1. Go to thepágina de descarga de Google Chrome2. Click the "Download Chrome" button.

  2. Run the downloaded file and follow the installation instructions.

Microsoft Edge:​

  1. Access thepágina de descarga de Microsoft Edge2. Click the "Download" button.

  2. Run the downloaded file and follow the instructions to install the browser.

Testing and Debugging

To ensure your website functions correctly, it's important to perform testing and debugging. Here are some tools and techniques you can use.

Browser Development Tools​

Most modern browsers include developer tools that allow you to inspect your website's HTML, CSS, and JavaScript code, as well as debug errors and perform performance tests.

These tools are essential for web development and will help you identify and fix problems in your code.

How to Access Developer Tools​

  • In Google Chrome, right-click anywhere on the page and select "Inspect" or pressCtrl + Shift + I(Windows) orCmd + Option + I(macOS)

  • In Mozilla Firefox, right-click and select "Inspect Element" or pressCtrl + Shift + I(Windows) orCmd + Option + I(macOS)

  • In Microsoft Edge, right-click and select "Inspect" or pressCtrl + Shift + I(Windows) orCmd + Option + I(macOS)

Code Editor​

A good code editor is essential for writing and managing your code efficiently. Visual Studio Code is a recommended option due to its robustness and extensibility.

Visual Studio Code​

  1. Visit thepágina de descarga de Visual Studio Code2. Select the version appropriate for your operating system (Windows, macOS, or Linux).

  2. Download the file and follow the installation instructions.

Essential VS Code Extensions​

Auto Close Tag​

ID: formulahendry.auto-close-tag

Description: Automatically adds an HTML/XML closing tag.

Editor: Jun Han

VS Marketplace Link:Link de Marketplace

Auto Rename Tag​

ID: formulahendry.auto-rename-tag

Description: Automatically renames the paired HTML/XML tag.

Editor: Jun Han

VS Marketplace Link:Link de Marketplace

Autoprefixer​

ID: mrmlnc.vscode-autoprefixer

Description: Parse CSS and automatically add vendor prefixes.

Editor: mrmlnc

VS Marketplace Link:Link de Marketplace

HTML CSS Support​

Id: ecmel.vscode-html-css

Description: CSS Intellisense for HTML

Editor: ecmel

VS Marketplace Link: Link de Marketplace

HTML Tag Wrapper​

ID: hwencc.html-tag-wrapper

Description: Wrap the selected HTML tag by pressing Ctrl+I. You can also simply rename the containing tag.

Editor: hwencc

VS Marketplace Link:Link de Marketplace

JavaScript (ES6) code snippets​

ID: xabikos.JavaScriptSnippets

Description: JavaScript code snippets in ES6 syntax.

Editor: charalampos karypidis

VS Marketplace Link:Link de Marketplace

Live Server​

ID: ritwickdey.LiveServer

Description: Launch a local development server with live reload functionality for static and dynamic pages.

Editor: Ritwick Dey

VS Marketplace Link:Link de Marketplace

npm Intellisense​

ID: christian-kohler.npm-intellisense

Description: A Visual Studio Code plugin that automatically populates npm modules in import statements.

Editor: Christian Kohler

VS Marketplace Link:Link de Marketplace

Version Control​

Git is a version control tool that allows you to manage your code's history and collaborate with other developers.

To start using Git, you'll need to install it on your system.

Installing Git​

  1. Go to thepágina de descarga de Git2. Select the version corresponding to your operating system and download the installer.

  2. Run the installer and follow the instructions to complete the installation.

  3. Once installed, open a terminal (or the command prompt in Windows) and verify the installation by running:

bash
git --version
  1. You should see the version of Git installed on your system.

Git Configuration​

Once you have installed the tools mentioned, follow these steps to configure your development environment:

  1. Open a terminal (or the command line on Windows).

  2. Then configure your username and email address in Git:

bash
  git config --global user.name "Tu Nombre"
  git config --global user.email "tuemail@ejemplo.com"
  1. To view your username and email settings, run:
bash
  git config --global -l

  1. You should see your username and email address configured correctly.

  2. If you wish to change your Git settings in the future, you can edit the global configuration file located in~/.gitconfig(on Linux and macOS) or%USERPROFILE%\.gitconfig(on Windows).

Code Repositories​

GitHub is a Git repository hosting platform that allows you to store your code online and collaborate with other developers. To start using GitHub, you'll need to create an account.

Create a GitHub Account​

  1. VisitGitHub

  2. Click "Sign up" in the upper right corner.

  3. Complete the registration form with your personal information.

  4. Verify your email address to activate your account.

  5. Once registered, you can create repositories and collaborate on open-source projects.

Cloning a Repository from GitHub​

  1. Open GitHub and create a new repository.

  2. Copy the repository URL.

  3. Open your terminal and run:

bash
git clone https://github.com/tuusuario/tu-repositorio.git

Setting Up Visual Studio Code​

  1. Open Visual Studio Code.

  2. Install useful extensions for web development:

Live Server: To launch a local server and see your changes in real time.

Prettier: To automatically format your code.

ESLint: To identify and fix problems in your JavaScript code.

  1. Open your cloned project from GitHub in Visual Studio Code:

Click on "File" > "Open Folder" and select your project folder.

Design​

Figma is a web-based collaborative design tool that allows you to create and share mockups and prototypes of your website.

Creating a Figma Account​

  1. Go toFigma2. Click "Sign up" in the upper right corner.

  2. Complete the registration form with your personal information.

  3. Verify your email address to activate your account.

  4. Once registered, you can create new designs and collaborate with other users in real time.

Conclusion​

Having a well-configured development environment is crucial for success in web development. By following these steps, you'll be ready to start creating projects with HTML, CSS, and JavaScript efficiently and in an organized manner. You'll also be able to collaborate with other developers and test your projects in different browsers to ensure compatibility and functionality.

Resources