Tools of the Trade
Writing and editing code is easy nowadays. There is plethora of editors and online editing tools to select or download from.
The official term for editors in coding is "Integrated Development Environment" or "IDE" for short. The most basic IDE is Notepad.
Some more advsnced and user friendly editors are: Visual Studio, Brackets, Sublime Text, ATOM, Notepad++, and Xcode (for macOS).
The browser
So, what is a browser? A browser is a software application that allows users to access and view content on the internet. Essentially, a browser is a programme that enables you to interact with websites by displaying web pages, handling user input, and communicating with servers.
Browsers work by requesting web pages and associated files from servers and then rendering them on your computer or mobile device. They interpret the code used to create web pages, such as HTML, CSS, and JavaScript, and use that information to display the content and images that make up a website.
Some of the most popular browsers include Google Chrome, Mozilla Firefox, Microsoft Edge, Apple Safari, and Opera. Browsers have become essential tools for navigating the vast expanse of the internet and for accessing a wide variety of online content and services.
The browsers also come with added functionality that is very useful to all web developers, new and old: the Developer Tools.
You can easily get access to your web page's source code and even write code in its console and render the results on the browser without saving it by selecting and using the Developer Tools.This allows you to preview your code before you build it permanently on the page.
The Developer Tools have multiple uses, but the most common one is to track a snippet of code on a long page.
Below is an example of Chrome Developer Tools and how to use them:
Open Developer Tools: There are several ways to open the developer tools. You can either right-click on a web page element and select "Inspect" from the menu, or use the keyboard shortcut "Ctrl + Shift + I" (Windows) or "Cmd + Option + I" (Mac). You can also open the "More tools" menu (three vertical dots on the top right corner) and select "Developer tools."
Navigate the Developer Tools interface: Once you open the Developer Tools, you'll see a split screen interface. The left-hand side shows the page's HTML code, and the right-hand side shows the corresponding CSS styles and properties.
Use the Elements tab: The "Elements" tab is the default tab that appears when you open the developer tools. This tab allows you to view and manipulate the HTML and CSS of the page, including changing the content and styles.
Use the Console tab: The "Console" tab is where you can enter JavaScript commands and see the output of those commands. You can also use the console to debug your JavaScript code.
Use the Network tab: The "Network" tab shows the requests and responses made by the browser when loading a web page. This tab is helpful for identifying slow loading resources, debugging server errors, and analyzing website performance.
