Step by Step Guide to Set Up a Local Web Development Environment


Any invention needs the use of a decent workshop – something that is appropriate for the task at hand. Instead of using a web hosting company's server, a local development environment allows you to operate your website on your own PC. You can modify your surroundings as much or as little as you like, and you can use whichever tools you choose.

A typical website is made up of several unique technologies that perform together without having to worry about it affecting your live site, as well as design and test your site before uploading it. When you remove the element of risk from the development process, it makes the process considerably less stressful.


In this article, you’re going to learn how you can get started with your own web development environment.

Let's take a look at the resources you'll need :
  • Operating System (Windows or MAC)
  • Any text editor (Atom, VSCode, Sublime, Brackets, or Notepad)

👉Install VSCode

I'm just using VSCode as a text editor for web development because it's much lighter, and the difference is immediately noticeable. This is due to the fact that it runs apps in the background and is not dependent on the IDE, ensuring that the IDE does not slow down. VS Code was also named the most popular IDE for Web development in the Stack Overflow Developer Survey 2019 :




No matter what type of project, VSCode easily helps you set up the IDE.

If you don't yet have VS Code installed on your computer, head to code.visualstudio.com to download it. It's a completely free download and it is available on every operating system out there. So, let's take a deep dive into each of them :

👉 Add some extensions

VSCode has tons of extensions. So, in the sidebar>go to extensions and the first one that I would recommend is called :
  1.  Live server: It sets up a local web server so that you can see the changes made in real-time without having to reload.
  2. Bootstrap 4, Font awesome 4, Font awesome 5 free and Pro snippets: This extension will help you to build websites based on bootstrap.
  3. JavaScript (ES6) code snippets: JavaScript is a programming language that spans front-end and back-end development. In web development JavaScript is key. You'll be writing a lot of it so these snippets will be helpful.
  4. Prettier-Code formatted: This extension will help you to keep your code formatted and makes your code pretty.
  5. Auto rename tag: Whenever you change an HTML tag, it automatically renames the corresponding tag.
  6. vscode-icons: This adds some icons to your files and folders to make them easily identifiable.

👉Let's open up a project folder

  • Just make a random folder outside of VSCode
  • Right-click on that folder
  • select "open with VSCode"
on the other hand from inside VSCode we can open File>Open Folder>Select the folder you want to open up on VSCode.So, that's how we can create a project folder.

👉Add a folder structure and some files

Let's go ahead and add some new files called index.html and style.css  and app.js. Now add some codes on those files. To see the progress right click on the screen > select Open with Live Server. This way you can see the changes live as your browser refreshes.

So those are the major things that I find very useful for setting up a local web development environment .



Location: Dhaka, Bangladesh

Comments

Post a Comment

Popular posts from this blog

Top 5 Podcasts About DATA ANALYTICS

Image
Top 5 Podcasts About DATA ANALYTICS What is data analysis? Why is data analysis so important? Finding, gathering, cleaning, evaluating, and modeling data to generate meaningful information and insights and understand the derived information for data-driven decision-making is what data analysis is all about. The amount of data generated by businesses today, from minor firms to multinational corporations, is just amazing, which is why the term "big data" has become such a buzzword. However, without appropriate data analysis, this mountain of data does little more than clog up cloud storage and databases. Learn more about data analytics and how to use it to extract important insights from your systems to uncover a variety of findings. Here is my own top 5 list of data analytics podcasts to listen to. 1. The Banana Data Podcast It's a data science podcast focused on the latest & greatest of the DS ecosystem, sprinkled in with our musings & data science expertise. This...
Read more

How to Rock LinkedIn's Algorithm in 2021

LinkedIn is one of the most essential social platforms for many professionals and digital marketers, according to what we know so far. It's a unique method to meet new people, collaborate on business, show off products and services, and so on.  LinkedIn keeps track of your relationships in a list called My Network. When you create a new connection, you receive access to either that person's profile, but also to their publicly visible connections. Engagement on LinkedIn is important, just like it is on any other social platform. We want our postings to be seen by as many people as possible, and we want as many people to participate with them as possible. Now the question is, how can we rock the LinkedIn algorithms? For that, we have to understand the algorithm first. 1. Try to make useful posts and make your posts informative for your readers Basically, They can categorize your information into three different categories. Spam Low Quality Clear Once the bots have categorized...
Read more

Tips and Tools to Write SEO Optimized Blog Posts

It's no surprise that SEO and articles are closely intertwined. If you've ever attempted to write a blog article, you're aware of how time-consuming it can be. The process might take hours, from choosing a topic and gathering information to drafting the post and pushing "Publish." As a result, if your article does not receive the attention you planned, it might be a significant disappointment. That's why a strong link between SEO and quality content is necessary! Here are 9 suggestions for writing SEO content that can help your content reach further while also improving your SEO efforts. First, write for the targeted users   Choose your audience first. Make a strong argument for yourself as an expert in your field. Create material that appeals to your target market's interests. Not every post needs to be something about your product or service, but they should all be connected to your sector. Keep in mind the motives, difficulties, and interests of you...
Read more