Recently a friend of mine ask me how to get started with programming and the software to have on his laptop to begin learning web development. As someone who has been in the field for a while, I understand how overwhelming it can be to start from scratch since now there are thousands of courses and articles and it’s a constantly evolving field.
However, with the right guidance and resources, anyone can learn the basics of web development and start building their websites.
When you are first learning to program, there is no “easy” language to choose.
You have to start from somewhere, may that be for you PHP, Python, or for some others C, C++, JavaScript, Go, or whatever, the key point is to learn, not just syntax but problem-solving skills.
In this article, I will walk you through the essential steps and tools needed to begin your journey in web development. From learning the core technologies of HTML, CSS, and JavaScript, to understanding the importance of coding.
Just by focusing on these 3 fundamentals, you will be impressed with what you can build.
Environment Setup
Before I begin explaining how these work, you need to have a couple of things on your PC/laptop.
First of all, you need Node.Js.
It’s the JavaScript runtime environment. You will need it the most when you will start working with frontend/backend JavaScript Frameworks. But either way, it is important to have it in your machine for later use.
Next: You need a text editor.
Get Familiar with a Text Editor like:
- Visual Studio Code,- Sublime,
- Atom.
They are free and just basic software that you’ll use to write the code for your projects. These text editors have features like syntax highlighting, code completion, and debugging tools that make it easier to write and debug code.
I would suggest going with VS Code since it is more popular with a large active community and has an easy-to-use interface. Also comes with integrated Git support and a wide array of extensions for more functionalities.
You need a local server.
For you to test your code about a database (where you will store most of your web information) you would need a local server on your pc/laptop:
In the beginning, it might be a bit confusing configuring them, but there are many articles on how to properly use them, or even on their website. You install it, start the server and you will have phpMyAdmin tool installed using MySQL or MariaDB as a database.
To stay within the scope of this article, I will not delve into all the details of this topic.
Finally: You need Webpack.
Webpack is a module bundler that takes all of your JavaScript and other assets, such as images and CSS, and bundles them into a single file or a few files.
It allows you to use modern JavaScript features and optimizes your code for production.
It’s not something you install on your machine, but you install it inside your project to bundle it.
To install webpack, you need to have Node.js (mentioned above) and npm (Node Package Manager) installed on your computer.
Then, you can use the following command in your text editor’s terminal:
npm install webpack webpack-cli --save-dev
If you are using Windows, you can install GitBash, to run Linux commands.
Getting Started with Languages
1. HTML (Hypertext Markup Language)
HTML is used to create the structure of a web page. I have been in this field for a long time, and sometimes you may get the idea that HTML is not that important, or it’s very easy as you will learn it fast, and that’s true. But it doesn’t mean that you won’t use it much. In web development, especially if you decide to become a front-end developer, you will use it all the time.
The base structure of a website is composed by:
- header -> where the menu/navigation is located
- body -> where all the content of a page in the website is placed
- footer -> mostly here are helping links, contacts and social media icons (sometimes even google maps);
<!DOCTYPE html>
<html>
<head>
<title>This is a basic HTML template Starter</title>
</head>
<body>
<div>
<h1>Welcome to my website</h1>
<p>This is a simple webpage created using HTML.</p>
</div>
</body>
</html>
2. CSS (Cascading Style Sheets)
CSS is used to style the page. There are many ways to style the page. For example, we can style the HTML created above by:
a) providing classes within its paragraphs, headers, div-s, and edit styling based on those classes:
//previous code ...
<div class="container" >
<h1>Welcome to my website</h1>
<p>This is a simple webpage created using HTML.</p>
</div>
and to style it in a CSS file (sample.css):
.container {
/* we set the width and height of the container to 100% */
width: 100%;
height: 100%
}
b) by selecting directly the tag you want to edit:
h1 {
color: blue;
}
p {
font-size: 18px;
}
Or by simply adding a style instead of a class inside the tag component:
<!-- previous code ... -->
<div style="width: 100%; height: 100%;" >
<h1>Welcome to my website</h1>
<p>This is a simple webpage created using HTML.</p>
</div>
There are also many CSS Frameworks, such as Bootstrap, and Tailwind, which can help you with the design so you don’t have to code everything from scratch. But I strongly advise starting first from the very basics so you won't get stuck when things get more complicated.
“I remember once when I first started learning, I spent 2 hours finding out why a container with information inside wasn’t showing on the screen. It was by mistake I found out about the ‘z-index’ property, which is used to specify the stack order of elements. It determines the order in which elements are stacked on top of each other, with elements having a higher z-index value appearing on top of those with a lower z-index value.”
3) JavaScript
JavaScript is a programming language that is used to add interactivity to web pages. It allows you to create dynamic web pages by adding features such as:
- various animations,
- form validation,
- image sliders,
- modal windows, and so much more.
JavaScript can be used also to interact with the server (if you are working on the backend).
We can add interactivity to the webpage for example by adding a button that changes the text colour when clicked:
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
const text = document.getElementsByTagName("p");
text[0].style.color = "red";
}
</script>
When we are coding in pure JavaScript, we need to add the functionalities inside <script></script> tags.
The proper way is to create a new file “newFile.js” with JS code inside and load this file between the script tags above.
You may notice in the beginning that some files or variables are named “new_file.js”, “new-file.js”, or “new variable”. These are called naming conventions. There are a few:
Camel Case: combines words together, with the first letter of each word being capitalized except the first one:
firstName,getUserData,newFile.js.Pascal Case: similar to Camel Case, but the first letter of every word is capitalized:
FirstNameorGetUserData.Snake Case: separates words using underscores, all letters are in lowercase:
first_nameorget_user_data.Kebab Case: Similar to Snake Case, words are separated by hyphens, all letters are in lowercase
first-nameorget-user-data.
In short, JavaScript is a powerful and versatile programming language. It may not be the easiest language to learn, but with a bit of patience and determination, you’ll be creating interactive and dynamic web applications in no time.
When I started learning to program, I remember feeling a bit overwhelmed by all the different languages and concepts. But once I started diving into JavaScript, it all started to make sense. I remember thinking: “This is it! This is the language that’s going to take my career to the next level”.
There are also a lot of books you can start learning:
- You Don’t Know Javascript — Kyle Simpsons,
- A Smarter Way to Learn JavaScript — Mark Myers,
- Secrets of the JavaScript Ninja, etc.
or by following online courses on Udemy or crash courses on YouTube.
On top of this, I have to add that no matter how many courses you watch, never focus only on the syntaxes or memorizing everything.
There will come a time where you won’t watch any more courses, or maybe just watch some parts to recap old stuff. The real deal of fixing problems is the DOCUMENTATION (or StackOverflow, nowadays chatGPT, or bothering your senior dev friend every 5 mins) which no one likes to read at the beginning.
I can’t emphasize this enough, but Documentation is really important and most frameworks, and libraries, have a well-documented page with real examples that can lead you to solve your problems.
It’s not always going to be fun and exciting with coding, most of the time it involves a lot of reading and practice. But when you’ve honed your skills and brought your product to life, the sense of accomplishment and satisfaction is truly indescribable.
Doesn’t matter if you have 1 month, 1 year or 10 years of experience, you will always google: “how to centre a div using CSS**”**.
What I mean by this is that memorizing code is not always necessary. It is crucial to have a solid understanding of the foundations and the ability to think logically and critically about the problem at hand. This includes understanding the overall architecture, as well as having the ability to research and understand new concepts as needed.
By having a clear mind of what you want to do you will also find it easier to google your questions with the right keywords.
The key:
is to focus on understanding the underlying concepts and how they work together, rather than just memorizing syntax.
It’s normal to question whether you’ve chosen the right language, to begin with, but the important thing to remember is that you are learning more than just syntax — you are learning new concepts, and approaches, developing a new way of thinking about problem-solving, and how to tie it all together.
Now we go to the next point, after learning HTML, CSS, and JS, you want to use a data storage system to store information. In this step you need to:
4) Learn a Database Management System
To store and retrieve data, you’ll need to learn a database management system like MySQL, MongoDB, or SQLite. These databases can be used to store and retrieve information about users, products, or any other data that needs to be saved and retrieved.
Relational databases like MySQL and SQLite use tables and rows to store data, while non-relational databases like MongoDB use collections and documents (mostly written in JSON format).
In the end, it’s important to remember that you’re not alone in this field. There are countless resources available online, as well as a vibrant community of fellow web developers who are more than happy to help and support you.
If you enjoyed reading this article and would like to learn more about web development, please consider following me on Medium.
I will continue to write more advanced articles with more “in-depth” information on the different aspects of web development as I cannot write everything in just one article.
While I share my previous experiences and mistakes, I want to help you avoid the same pitfalls that I encountered on my journey.
Thanks for reading and remember to Practice, Practice, Practice…
See you at the next one!
Thanks for reading.Happy learning 😄