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. is the structure layout of the website. For example, heading, paragraph, sidebar, etc. HTML used to style the HTML content of the website. CSS adds styles to the content like color, margin, padding, typography, etc. CSS 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. can help you to build user interfaces. Some other React alternative is Svelte, VUE.js, Angular, etc. JavaScript ReactJS HTML, CSS, and JavaScript are the front end of the website that your . 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. browser can understand 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. is table-based while the non-SQL database is documentation-based (key-value). SQL database 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 and start to contribute. Manage your project with version control using ; it helps you to collaborate with teams, track your history changes version control files. GitHub Git 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 , , etc. NextJs Gatsby 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 , , etc. strapi WordPress 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: netlify vercel Google Cloud Run There are different architectures in which to host your website on the public server. You may choose 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. monolithic or microservices architecture To find out more, visit . taimoorsattar.dev Follow me on Twitter . @taimoorsattar7 Previously published at https://taimoorsattar.dev/blogs/how-to-become-web-developer
