Web development tools
Web development is tricky. That’s why web developers use lots of tools to help them with their jobs — and they’re always looking for new tools to add to their toolbox.
Thank God for browser developer tools which are included in most modern browsers. Each browser differs in exactly which tools they provide, but they’re more similar than they are different.
Inspecting HTML
One great tool is the ability to right click on any element on a web page and inspect the HTML for that element. You can also do that with the Control+Shift+Alt keys. You can check how to inspect an HTML here on Google Chrome browser:
Inspecting CSS
Another tool is the CSS inspector; with this tool, you can check out which styles gets applied to an element and play with them yourself. Below is a video showing how to use this tool in Chrome:
These basic tools can both help you understand the structure of other websites and help you debug your own websites.
Choosing an Editor
Once you learn HTML/CSS, you will likely want to start developing webpages in a more full-featured editor, but you need to make sure that in any editor you use, you save your file with a filename that ends in “.html” — that’s the file extension that is used for all HTML pages to make sure that both editors and browsers know what they are. There are several options when it comes to editors, we have online editors like Glitch, Codepen and Repl.it.
Another option is to use a desktop editor. An app is downloaded to your computer and saves the files to your hard drive. There are lots of desktop editors for you to pick from, depending on what OS and price you’re looking for. Some popular desktop editors are Visual Studio Code, Atom, Sublime Text, Adobe Brackets, and Notepad++ (for Windows).
A third option is to use a command-line editor. If you’re not already familiar with working on a command line interface (CLI), I won’t advice you to go into this because you’ll need to learn a lot about the command line first.
Above all, I will advise you to start with online editors first because they will give you a real time experience of how your code works, and they are very flexible in operation. But when it comes to choice of offline editors, I recommend Microsoft’s Visual Studio Code or Sublime text, any of those two softwares will help you a lot in your web development journey.
The world of Front End Development have been a very interesting one since I’ve started and I recommend it to anyone that want to have a feel and speak the languages of the Tech world. There are several options for you if you intend to be a developer. There are free online tutorials like Freecode Camp, Dash (General Assembly) and Kahn Academy, but there’s a catch! The online tutorial sites are meant to be an additional learning options to practice what you’ve learnt in offline classes, though there are some people that got everything right with online tutorials. But if we have to consider the internet connectivity problems here in Lagos, Nigeria, and the importance of having a face-to-face contact with your teachers/tutors, I think it’s better to enrol in a programming class and one good example is the Stutern Graduate Accelerator which I’m presently a part of. My experience here is what I termed “PROGRAMMING MADE EASY”, at Stutern, learning is fun, they teach you to match the best talents in the tech world. I will write more about my experience in my next series.
For those who have chosen a career in Development (Front-End, Back-End or any other)and those that are looking forward to it, I wish you all a HAPPY CODING EXPERIENCE✌.
