Web Development for Beginners: A Step by Step Guide
Recently had a friend of mine ask me how to get started with programming and the softwares 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, 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 own websites.
When you are first learning programming, there is no “easy” language to choose.
Basically you have to start from somewhere, may that be for you PHP, Python, 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 of what you can build.
Before I begin explaining how these work, you need to have a couple of things in your PC/laptop.
First of all you need Node.Js.
It’s the JavaScript runtime environment. Basically 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 to go 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.
In order for you to test your code in relation to a database (where you will store most of web information) you would need a local server on your pc/laptop:
At the begining it might be a bit confusing configuring them, but there are many articles on how to properly use them, or even on their website. Basically you install it, start the server and you will have phpMyAdmin tool installed using MySQL or MariaDb as a database.
In order 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-devIf you are using Windows, you can install GitBash, to run linux commands.
1. HTML (Hypertext Markup Language) 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 frontend 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) 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 it’s 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 class inside 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, Tailwind, wich can help you with the design so you don’t have to code everything from scratch. But I strongly advice to start first from the very basics so you wont 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 ‘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 is a programming language that is used to add interactivity to webpages. 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 backend).
We can add interactivity to the webpage for example by adding a button that changes the text color 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 begining that some files or variables are named “new_file.js”, “new-file.js”, or “newVariable”. 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 programming, 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 anymore courses, or maybe just watch some parts to recap old stuff. The real deal of fixing problems is the DOCUMENTATION (or StackOverflow, nowdays chatGPT, or bothering your seniour dev friend every 5 mins) which no one likes to read at the begining.
I can’t emphasize this enough, but Documentation is really important and most of frameworks, libraries, have a really well documented page with real examples that can lead you to solving your problems.
It’s not always going to be fun and exciting with coding, most of the times it involves a lot of reading and practice. But when you’ve honed your skills and bring 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 center a div using css”.
What I mean by this is that memorizing code is not always be 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, 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, JS, you want to use a data storage system to store information. In this step you need to:
4) Learn a Database Management System
In order 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 on the next one!
Thanks for reading.Happy learning 😄
Do support our publication by following it
