My journey into web development started with a simple free blog that didn’t need any knowledge in coding or how the website works. It was more of an app.
Basics of Web development
Later on after trying to get a science blog up and running, working with a slow developer made me want to know what is takingbso long by learning. He finally used WordPress software to build it so I learnt it. Later on, I realised I need more than just shortcuts and softwares that make it easy. I needed to understand the too of it all. This is how I started looking for courses online that teach web development. Soon after I learnt that I need to learn three languages, HTML, CSS and JavaScript in that order to survive.
So far so good, I am enjoying the experience but it would be selfish to keep it all to myself. If you are interested, I will guide you through just like something gave me tips on how to start web development.
First things first.
What you need to start learning Web developement
All you need is a computer that can run modern web browsers, an internet connection and willingness to learn. Basic Computer literacy like how to open a computer and click on it etc. are also needed. I am guessing from wherever you are reading this from, this is not a problem.
Installing basic software
There are tools that you need to start web development. Here I will show you how to do this properly. Before listing the basics of what you need now, let’s see what professionals use.
Tools used by professional web developers
A computer. Maybe that sounds obvious to some people, but some of you are reading this blog on your phone or a library computer. For serious web development, it’s better to invest in a desktop or laptop computer running Windows, macOS or Linux.
A text editor, to write code in. This could be a text editor (e.g. Visual Studio Code, Notepad++, Sublime Text, Atom, GNU Emacs, or VIM), or a hybrid editor (e.g. Dreamweaver or WebStorm). Office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers.
Web browsers, to test code in. Currently, the most-used browsers are Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge. You should also test how your site performs on mobile devices and on any old browsers your target audience may still be using (such as IE 8–10.) Lynx, a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users.
A graphics editor, like GIMP, Figma, Paint.NET, Photoshop, or XD, to make images or graphics for your web pages.
A version control system, to manage files on servers, collaborate on a project with a team, share code and assets and avoid editing conflicts. Right now, Git is the most popular version control system along with the GitHub or GitLab hosting service.
An FTP program, used on older web hosting accounts to manage files on servers (Git is increasingly replacing FTP for this purpose). There are loads of (S)FTP programs available including Cyberduck, Fetch and FileZilla.
An automation system, like Webpack, Grunt, or Gulp to automatically perform repetitive tasks, such as minifying code and running tests.
Libraries, frameworks, etc., to speed up writing common functionality. A library tends to be an existing JavaScript or CSS file that provides ready-rolled functionality for you to make use of in your code. A framework tend to take this idea further, offering a complete system with some custom syntaxes for you to write a web app on top of.
There are more tools but what do you need now?
What you need as a first-time Web developer
That looks like a scary list, but fortunately, you can get started in web development without knowing anything about most of these. In this blog, we’ll just set you up with a bare minimum — a text editor and some modern web browsers.
Installing a text editor
You probably already have a basic text editor on your computer. By default Windows includes Notepad and macOS comes with TextEdit. Linux distros vary; Ubuntu comes with gedit by default.
For web development, you can probably do better than Notepad or TextEdit. We recommend starting with Visual Studio Code, which is a free editor, that offers live previews and code hints.
Installing modern web browsers
For now, we’ll install a couple of desktop web browsers to test our code in. Choose your operating system below and click the relevant links to download installers for your favorite browsers:
Linux: Firefox, Chrome, Opera, Brave.
Windows: Firefox, Chrome, Opera, Internet Explorer, Microsoft Edge, Brave (Windows 10 comes with Edge by default; if you have Windows 7 or above, you can install Internet Explorer 11; otherwise, you should install an alternative browser).
macOS: Firefox, Chrome, Opera, Safari, Brave (MacOS and iOS come with Safari by default).
Before going on, you should install at least two of these browsers and have them ready for testing.
Internet Explorer is not compatible with some modern web features and it may not be able to run your project. You usually don’t need to worry about making your web projects compatible with it, as very few people still use it — certainly don’t worry too much about it while you are learning. You might sometimes run into a project that requires support for it.
Note
A scientist who writes about her daily experiences. Most are drafts but some are publicly shared, like this one you just read.