Exploring the World of Web Development - Get Started

By -

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.

https://github.com/mudiadamz/jewelry-and-co.git

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.


I am an experiences web developer, have a good problem-solving and deep understanding of software development principles. With comprehensive skill set in Java, PHP, Python, C and JavaScript. Able to do database thing like MySQL and Oracle. Along with expertise in frameworks like Spring, React, and Firebase. Have a solid understanding of software development methodologies, like Agile and Scrum. I applies best practices to ensure the development process is efficient and of the highest quality output.

Popular posts from this blog

Spring Kafka - how to use ReplyingKafkaTemplate send and reply synchronously

By -
Image
Microservice Spring with Apache Kafka Kafka is an asynchronous messaging queuing system, but when you have a case in your project that you need to have the result immediately from another service you can do that quite easily. Kafka from the client side produces a message to the server side, then waiting for the server to return back the message exactly what the client wants. It’s identified in the kafka header request named KafkaHeaders.CORRELATION_ID and a topic where the server should send. If the server side produces the same correlation id to the same topic in the request, then the client side will catch that message as its reply. Although you can work with kafka from a different framework and language other than Java and Spring. Here’s in this example i just specifically giving the example of sending and replying kafka messages using Spring Boot. The Project Overview The client-project will send a string message to the server-project over kafka, then the server-project wil
Read more

How To Connect SSH Using PEM Certificate On Windows

By -
Image
Usually you will need a pair of SSH username and password to connect to a remote server. But there's also another way to connect to the server via SSH but without password, just using a dot pem (example.pem) file. Here's how we usually do on Windows 1. Let’s SSH login using pem to confirm if it’s throwing error or the pem is fine, if error then we need to move to step 2 to fix it: ssh adam@10.0.0.123  -i server-cert.pem And here's the usual error that will throw if your pem file is not ready for SSH login. You need to follow the next step to make your pem certificate ready to login to your server via SSH. 2. Open Windows Explorer, then right-click on the pem file, then select "Properties". Navigate to the "Security" tab, and click "Advanced" 3. Disable inheritance 4. Delete all permissions, so it doesn’t have any permission 5. Now add you as the only only owner. By click button Add and then Select a principal, then Advanced. 6. On the showing p
Read more

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

By -
Image
MySQL and MariaDB password As already mentioned in the title of this blog, this error message sometimes occurred when we are trying to update our root password database, either MySQL or MariaDB, The error says: ERROR 1348 (HY000): Column 'Password' is not updatable This is because if we use this SQL command to update our database root password, and it turn out to be Restricted by MySQL to use update on mysql database. UPDATE mysql.user SET Password=PASSWORD('1234') WHERE User='root'; The solutions for MySQL Error1348 So you can not update a user password using Update commands, to update the password, use ALTER commands instead. like the following. ALTER USER 'root'@'localhost' IDENTIFIED BY '1234'; And then you need to do the flush privileges to commit previous queries (that alter command above) into the system, simply do like this. flush privileges; So now you have your root with password 1234. Although it is recommended to
Read more

How To Create Spring Boot Project Using Netbeans

By -
Image
Spring Boot is program that you can use to develops Spring Framework easier, without the need of using so many hard to handle configuration. This tutorial, we are gonna create Spring Boot Application by using Netbeans IDE. You can of course create Spring Boot Appilcation on Netbeans, but it will be easier if just using plugin for Spring development in Netbeans, 1. Open Netbeans, click tools menu and click plugin. After plugin window opened, click tab Available Plugins and find the "Nb SpringBoot" plugin then install and activate the plugin. 2. After restarting the Netbeans IDE. Now you gonna be able to create a new project with Spring boot application. File > New Project > Under categories, choose Maven > then choose  Spring Boot Basic. Now you can start the development of spring boot application using your Netbeans IDE. Open pom.xml to add spring boot dependencies you want.
Read more

Flutter Button With Left Align Text and Icon

By -
Image
flutter button left text Developing a flutter UI is very difficult for a beginner or I think any other technology it’s very intimidating for a starter. I remember my first time trying to make a button in Flutter that had left aligned text in it. I spent a lot of time on how to make it but never made it. Once you are getting familiar with flutter widget or component blocks, you can apply whatever style you want for your app. In html you can just do something like <button style=”text-align:left”>Text</button> but in flutter it is a bit tricky. So here I provide an example on how you can align text inside a flutter button to the left. Flutter button with left align text import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDe
Read more