Welcome lovely humans! I have had a lot of questions from people asking me about how to start their journey of becoming a web developer. So I managed to pull up a map for ya’ll to follow. Do let me know if you find this useful or also the other way around. Would love to have some critics helping me along the way!

From here on out, I’ll try to present the best way, I believe, that one could start as a web developer. At the end of this article, you will have enough shit to call your self a web-designer and you’ll able to pull off some nice static websites. So put those remaining brain cells together so we can start working here.

Front-end

This is the front face of the app (mobile-app, web-app, or whatever for that matter) that the user interacts with. It all starts with making the design/wireframe/prototype of the app. Now don’t be confused here, the website that you see in the front is a Graphical User Interface(GUI). And this GUI is sitting over a backend architecture. This is just a fancy way of saying that the things you interact with on the app, like buttons and stuff, trigger certain tasks to run behind the screen and present the output right in front of you.

Pardon the cliché image!

Just to be clear, I am not comparing the complexity of front-end with back-end here. This image is just representing that front-end developers curate the part of the app that is visible to users. Hence, designing a beautiful UI (User Interface) and providing the best UX (User Experience) is something to consider.

Using Design software like Figma, Sketch, Adobe XD, etc, wireframes are created. Like the one below. FYI, this is not a real webpage but just a couple of rectangles and text blocks.

Wireframe

Now let’s talk about turning designs into real webpages.

What is What. And What you Need!

HTML creates a barebone structure of the website. Just like a skeleton. And, CSS is used to align that skeleton and also to put skin + makeup on it. CSS is really powerful. Humblebrag: The portfolio website on https://holdmypotion.tech/about/ is just made on HTML and CSS. Not to forget that I designed before I wrote any HTML or CSS. To be honest, without creating a wireframe, writing CSS is like tormenting yourself. Never go down that shithole, if the website is for official/production purposes.

Again, Just rectangles and text blocks.
Designed on Figma

Resources

HTMLhttps://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6Ghttps://www.w3schools.com/html/
CSShttps://www.youtube.com/playlist?list=PL4cUxeGkcC9ivBf_eKCPIAYXWzLlPAm6Ghttps://www.w3schools.com/css/
CSS Layout Modelshttps://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhGhttps://www.youtube.com/watch?v=x7tLPhnA06w&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY
CSS Frameworkshttps://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhwhttps://www.youtube.com/watch?v=QAgrHLtG1Yk&list=PL4cUxeGkcC9jE_cGvLLC60C_PeF_24pvv
Designhttps://www.udemy.com/course/freelance-web-design-from-design-to-development-to-making-money/https://www.youtube.com/playlist?list=PLaqZxUtXIt0wgeFxgBNlFklt5Si-00sm-
Resources

Remember!! You don’t need to muggle up anything! It is all intuitive and comes as you keep working with it. Anyway, whenever you are stuck, Google has almost all the answers. Ta-da!!

Just a little heads-up, the design course on Udemy isn’t free, but by far the best that I have ever gone through. It is a three-part course that teaches you about, Figma, Webflow, and freelancing as a web designer. BTW, I forgot to mention about CSS frameworks. To my mind, they are just already written CSS, that you can use to style your HTML components (tags or whatever). I believe that people mostly use CSS Frameworks to align-items, but you can also use them for designing. It is just like using ready-made schezwan sauce to cook your fried rice rather than creating your own pathetic one. Now, as far as their use case is concerned, I don’t use them, yet, (because I am not primarily a front-end developer) but almost everyone in this industry, according to my observation, does. You can also work without them if you know some designing (like I do). But I still advise you to check them out!

New Updates (July 23): Tailwind CSS is awesome!!!!!!!!!!!!!!!!!!!!!!!!!
You’ve got to check it out, and I highly highly recommend The Net Ninja YT course.
Again, I absolutely love it!!

Route To Take

Here you go!

I know, I know! A lot of web developers aren’t involved in designing, and me advising you to take that after the basics of HTML and CSS might piss certain people off. And I respect that, but also I quite frankly don’t give a shit. I prefer this way because down the road you become a lot more self-sufficient. And if you are someone who is fascinated by the freelance industry, you’ll have a lot more options to monetize your skills.

And anyway, If you learn designing after learning a bit of HTML and CSS. You’ll be able to understand the essence of basic HTML structure and also the nuances of writing good CSS. Trust me on this, I am speaking from personal experience.

Oh and I almost forgot! Aligning items on the webpage sucks. So to make your lives easy, cozy, comfortable, and warm, CSS has certain layout models. Eg: Flexbox, CSS Grid, and Idk if there are more. TBH, I have never used CSS grid myself because Flexbox works fine for me! Remember! Your life is ruined without these layout models.

Extra Flexbox resources: https://flexboxfroggy.com/ , https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Creating some on your own

Before we start talking about making something on your own, for your own use. Let me introduce to you a nasty little concept. The Mobile-first approach. It is a very common and the most effective way of designing a responsive website. This makes everything so quick and efficient, also reducing the lines of code you have to write in CSS. So you might want to check it out after you are comfortable in designing and building.

“The mobilefirst approach is exactly as it sounds: designing for the smallest screen and working your way up. It is one of the best strategies to create either a responsive or adaptive design. … It is the ideology that mobile design, as the hardest, should be done first

I would suggest that you try to make your own static website (Websites with just HTML, CSS, JavaScript, and Images). One obvious option is to create a portfolio website for all the projects you have completed en route.

Now that you are confident enough (nobody is ever), you can test your skills in the real market and learn/earn along the way. Doesn’t that sound nice?

Attention!!! The Udemy Designing course that I was earlier alluding to, has enough, literally enough, information to get you started with freelancing. That is why I highly, highly recommend going for it.

Further Moves

As of now, you are ready to make Landing pages, Portfolio websites, and basically any website that doesn’t require a CMS(Content Management System) of any sort. Further from here, here are a couple more things that you can do

  • WordPress: It is a way of creating websites with or without coding. Basically WordPress provides an already built CMS and, drag and drop options to create front-end of the websites. Just a couple of tutorials on YouTube and you will be all set to create websites on WordPress. I would recommend this to someone who, 1. wants to earn as soon as possible (good freelance opportunities), 2. don’t want to learn programming just yet.
  • JavaScript: This is probably the most used language throughout websites both on front-end and back-end. It is a programming language and hence it won’t be as easy as HTML and CSS. But on the flip side, it would be 10 times more interesting.

Bombshell: This is not 2005, and hence front-end doesn’t end here. There are big ass JS Frameworks that are primarily used to create the “view” part of the website. You will learn about this as you go deep into JavaScript and back-end development. It is easy and fun as f***.

JavaScript

I don’t want to drag this single article too long. So I will just quickly share a course that I found extremely useful.

Poke → I would recommend that you take up a course that has a well-set curriculum to it because this will lay the foundation of understanding of programming languages in your brain. All the programming languages have almost the same fundamentals and differ only in some ways.

Course:

https://www.udemy.com/share/101WeYBkYfclpWQHQ=/

Conclusion

You are now capable of designing and building websites for yourself and for the world. This article introduced a way for you to start as a web designer and then later tap into developing. I wanted to make this journey fun and productive for you and hence I suggested a way that can get your pockets heavy asap.

Peace✌

6 thoughts on “Web Dev Baby Steps

  1. How can i bridge between the front end and the back end? for ex. the only thing I’m capable of doing right now is making ‘calculators/brick breaker games’ in python but getting the output in cmd is a drag and looks uncool. Also you haven’t referred to python in your blog is it cause python isn’t helpful in web designing?

    Great blog tho.

    1. Hi Ram!
      Thanks for the compliment and a great question.
      It seems to me that you are done with the fundamentals of python and capable of building logical solutions for the problems. Well done!!
      True story: I started the same way. 1.) Learned python and 2.) went ahead with learning Django(Python Web Framework). While learning Django. I had to learn HTML and CSS side by side because these two are the building blocks of the front-end of all the websites.
      Few things about Django:
      1.) It is hard(very hard) to get at first but makes building websites super easy once you know it.
      2.) Django is Python-based so you’ll be writing all the code in python
      3.) For front-end, HTML and CSS are a necessity, and later you can also add in JavaScript.
      4.) You can either create Full Stack applications (writing the front-end in your Django app) or just the backend (creating APIs that are used by front-end developers to create GUI for the backend)
      Python can be used to write server-side applications (Back-end) but not front-end(as far as I know).
      P.S: There is a library called Tkinter that can be used to create GUI for apps like calculator/brick breaker game. TBH, I have never used that myself.

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

The 7 Habits Of Highly Effective People—Notes and Summary

Sun Jul 5 , 2020
These are my personal notes on Stephen R. Covey's book The 7 Habits Of Highly Effective People. This book touched on some major concepts that we ignore and let, govern us in many ways. All the points mentioned in this book had a strong factual base and hence were hard to neglect as just an opinion.