Getting started with web development

A comprehensive roadmap of getting started with web development.

Something to note: You can’t learn to code by just watching tutorials or reading articles; you have to get your hands dirty by writing code, facing errors and building real world projects. In this article I will recommend projects you can build after completing each step.

First things first: HTML and CSS

Now thats something most of us already know. For those who don’t, HTML decides the structure of websites and CSS is used to control the styling(fonts, colors, animations etc).

Learning Resource

Project recommendation: a well formatted website listing all suits of Tony Stark.

Lets start coding now

Javascript (yeah its a real programming language) should be your next step. Javascript decides how your website will behave, what happens on clicking buttons, what data gets sent to the server etc. If javascript is your first programming language, it can be overwhelming. Loops, conditionals, arrays, objects, DOM manipulation, local storage, asynchronous javascript….wohh!!! This is the point where a lot of people start feeling that they are too dumb and coding isn’t for them. But don’t give up yet, you are smarter than you think.

Resources: This is too long, just skim through it. This one is for asynchronous javascript

Project recommendation: a todo list website which utilizes local storage

Frontend: The wicked world of Javascript frameworks

You can create perfectly functional websites with just HTML, CSS and JS. But as your web app grows, writing and maintaining vanilla js code becomes really tough. This is where javascript frameworks come in, they make a developer’s life easy. The thing with javascript frameworks is: there a TOO MANY OF THEM.

So which one should you choose? Angular is slightly tough to get started with, Svelte and Vue are newer frameworks that are easier to work with and performant than Angular and React but I would say go with React( actually its a library not a framework): its powerful, easy to learn, has a very large community, lots of tutorials plus if you know React you can easily get into the world of android and ios development by learning something called React Native: a framework based on React. The performance trade-off shouldn’t matter to a beginner.

At this point you can also consider using a service like Firebase, it provides you a database which you can connect to your app and other necessary features like user authentication(sign in with gmail, google etc), hosting.

Resources: using react with firebase

Project recommendation: Extend the todo list app you created, add google authentication, store tasks in firestore.

Backend and Database: flex about being a web developer after this

Backend refers to the code which runs on the server. This code handles requests which our users make from the frontend and makes changes to the database. There are a lot of choices in backend frameworks as well: Express, Deno, Django, Flask, Ruby on Rails, Gin, Beego etc.

Choose Django(its really powerful but the project structure is extremely intimidating) or Flask if Python is your love. Gin and Beego are go frameworks. If javascript is something you are comfortable with then go with Express. My personal opinion: go with Express. It has a large community and is a very popular option with the frontend framework I recommended, React.

Databases are primarily of two types: SQL and NO-SQL. For a start going with MongoDB is not a bad idea, its a popular NoSQL choice.

Resources: MERN Tutorial

Project recommendation: Twitter clone

This is the start and not the end

The world of web development is ever evolving. So, your journey doesn’t end but actually starts after following all the above steps. Build tons of projects. There are so many things you can learn after this. Learn typescript, its a statically typed (avoid bugs in production by making your life hell while writing code) replacement of javascript. Try to get deeper into the framework you have worked with, also don’t shy away from exploring other frameworks which suit your project.

Thats all for today, thank you for patiently reading till the end. If you have anything to add or any questions or suggestions, feel free to hit me up on my socials(twitter, insta).

Crafted and posted by Pranil.