Exploring the World of Web Development - Get Started

Motivation to be a web developer

Web development is the easiest type of software development, for many people it's like the entry level before you deep dive into various advanced types of software development. Building a website is absolutely 10 times easier if you already have experience and expertise in, than developing embedded systems to work with external devices. Because building websites is basically just how to put pictures on the web and how to handle user input and mouse click.

But it is still not gonna be that easy if you are still a newcomer and wanna be a developer. Trying to just implement a single feature is already a frustrating  task. One major factor is the lack of understanding of the flow of a web development, you just do not yet understand what is the right thing to do this or to do that, you may not even know the term of the specific task you are facing, or not even know the tools to solve the problem.

It's just a matter of time, after a while you will be familiar with many web development techniques, you will remember more terms, you will utilize the right tools, and eventually you will be so agile to solve the problem faster. It’s just painful at the beginning, everyone faces similar difficulties when they start a new thing.

I came up with a tutorial step by step on becoming a web developer. It will introduce you to some of the basic requirements and tools in order to get started with website development. If you ever attend a course, whether in university or online, you will be given the basic tools and terms to get started on web development as well. But attending such scheduled courses, you don't have time flexibility, seems like a time wasting and not cost efficient. So why not just learn in this blog for free, and you can continue whenever you have the time.

I am not gonna teach you many web development terms, but rather give you the full example of the whole functioning website, and explain in this blog what each code is doing, you gonna need to reason what is that, why and you will finally learn. That's the way I learned when I was a newbie.

The chapter #1 to learn web development 

For me it is to understand HTML and CSS. At this moment, you're not gonna learn about any interactive features like form submission, saving the data, loading the previous data, etc. You just need to know how to layouting a website, how to put an image, how to create a table, how to style the web page, and how to position an area of a webpage. You just have to be very good at creating layouting and positioning a web page using HTML and CSS. 

When you are just starting, you don't have to learn and understand all of the available HTML tags, because many of HTML tags are actually just doing the same thing. Visually in any website, you will only need : 

  • An area with text (you can use <div>The Text</div>)
  • Images (you can use <img src=”http://domain/your-image”>)
  • Hyperlink (use <a href=”http://domain/your-link”>The link</a>)
  • Buttons (use <button>The text</button>
  • Inputs (use <input>)
  • A table (Table, body, tr, td)
    • <table><tbody><tr><td>A column in a table</td></tr></tbody></table>

So you only need less than 10 HTML tags, the basic HTML tags that you need to know to start creating a web page layout. We use lots and lots of <div> to do anything. Other than the above tags are almost infrequent to use, you will always need a Div tag everywhere.The Div tags when it is combined with CSS, can  make you any web page layout you ever need, the layout that looks like what a normal web page you see everyday on any website.

Full example HTML layout to learn for beginner

If you want to begin the web developer journey, you want to create a website for yourself. Here I give you some very basic layouting from scratch that you can learn every part of it. Use google search to find more references about what you don;t understand, there’s so many things i can not describe in this part, but will continue on the next blog article.

  • Now save that code using Code editor like visual studio code, download Visual studio code from Microsoft here.
  • Learn each part of the code, don’t worry to change the codes, it won’t breaks your computer
  • Save the file for example “index.html”, you can name it “my-first-code.html” or whatever you want, make sure the file is ends with “.html” extension
  • Now open your HTML file and see the changes on the browser

If you want to see the full version of the simple web layout above, you can clone it on Github here, you can also make changes and start learning to layouting and styling a web page.


That's probably the introduction about how your web development career can begin. And you may not understand some of the terms, you just have to keep learning and doing it. The rule of learning website development, or whatever you want to learn is 20% reading 80% doing. You need to spend many times thinking about it, and looking for the solution for a while.


Popular posts from this blog

SQL Substring Not Start From 0

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

How To Connect SSH Using PEM Certificate On Windows

How To Create Spring Boot Project Using Netbeans

Intellij Error: Spring class file has wrong version 61.0, should be 55.0