To learn about web development in 2021, you have to understand what makes up the websites.
In the blog, we cover the fundamental concepts to kickstart your career as a web developer in 2021.
Start from the basics
If you want to learn website development, start from the basics. Before you run, you have to learn how to walk. The basic ingredient of website development is HTML, CSS, and JavaScript.
HTML is the structure layout of the website. For example, heading, paragraph, sidebar, etc.
CSS used to style the HTML content of the website. CSS adds styles to the content like color, margin, padding, typography, etc.
JavaScript is used to add/render dynamic content to the website without refreshing the page. For example, open and close menu-content items, popup modal, etc. We can use JavaScript to load the content based on certain actions e.g. click of the button, load content based on specific routes, etc. If your website is complex, handling dynamic content with just JavaScript is complex work. You need a library that can help dynamic content rendering easy for you. That's where ReactJS helps you to build user interfaces. Some other React alternative is Svelte, VUE.js, Angular, etc.
HTML, CSS, and JavaScript are the front end of the website that browser can understand. We can manipulate and change the property/logic of HTML, CSS, and JavaScript on the browser using the inspect tool. So, if you are making a website that needs bank account validation, it's not a good idea to serve all of your logic on the front-end.
Connecting with the backend/database
Backend languages run on the server, not on the browser. NodeJS, PHP, etc are some programming languages that run on the servers. The server could be accessed by administrators, not the public. We can validate/perform the logical operation on the server.
In the Backend, you can perform the logical operations to CRUD (Create, Read, Update, and Delete) into the database. Different types of databases are SQL and non-SQL databases.
SQL database is table-based while the non-sql database is documentation-based (key-value).
Example of SQL databases are:
- MYSQL
- PostgreSQL
Examples of NON-SQL databases on the internet are:
- MongoDB
- Firebase
We use the database to store, retrieve, and manipulate the data on the server e,g. store login credential.
Contribute to open source projects
Taking an online course helps to learn the fundamental concepts of website development. After that, you can follow up with the open-source projects on the internet. Contributing to the open-source project helps you to learn the technique to solve problems in a more convenient way.
Search open-source projects on GitHub and start to contribute. Manage your project with version control using Git. Git helps you to collaborate with teams, track your history changes version control files.
Learn the Framework
The framework makes it easy for developers to start making websites as it bundles with the initial configuration settings. Configuration setting may include routing, code automation, architecture, etc. You can more focus on programming stuff, rather than automation/configuration stuff.
Examples of some modern React frameworks are NextJs, Gatsby, etc.
Manage documents on CMS
CMS (Content Management System) allows you to manage files/posts on the servers. CMS is mainly for administration purposes. With CMS, you can create, manage, update content on the website, assign different roles to the users, and upload files.
Examples of CMS are strapi, WordPress, etc.
Hosting project on the public server
To share your local project with the public, you need to host it on the hosting provider. There are different hosting providers on the internet. Some of them are listed below:
There are different architectures in which to host your website on the public server. You may choose monolithic or microservices architecture to host your website. There main difference between the two architectures is that whether you want all of your application services in one place(server) or host service in a different place (server). You can host your front-end application service on one server and back-end service on another server.
If you like this post, follow me on Twitter @taimoorsattar7 for more update.
To find out more, visit my blog taimoorsattar.dev.
Top comments (1)
Thank you very much for this wonderful article !
I started learning React recently and I was wondering what to do next.