This article was originally posted on my personal blog
In this blog post we're gonna dive into, how one who has zero experience in Web Development can become an internship ready Web Developer.
We'll first understand the difference between the backend and frontend of a web application, then we'll start by learning the frontend which will include firstly the basics html, css, and js.
Note: The resources are going to be opinionated in this post to solve the issue of abundance of resources. It is an issue because if we are exposed to too many resources we tend to procrastinate
Even though this post is opinionated, you can still choose your own resources and swap them with the ones I recommend. Because it is possible that you don't understand the ones I have recommended
The answer to this question is fairly straightforward, Web Development has proven itself to be a valuable skill to learn from time and time again.
I can tell this by my experience and from the experience of my fellow developers, that the number of opportunities in Web Development is far greater than they are in say Mobile Development or Machine Learning Development. The pay is pretty nice too, although it highly depends on the level of your skill.
The stipend is anywhere from 10k INR to 60K INR depending on the quality and relevance of the skills you have. (your year of college doesn't matter)
Apart from all this, the barrier to entry for Web Development is comparatively way less. You start to see the result of all that you've been learning quickly which motivates us, we learn more and get more results. This positive feedback loop takes more time to kick in, in other forms of development (say Mobile Development)
All and all, spending time learning web development is going to be extremely rewarding.
The answer to this question is fairly complicated compared to the previous one. So let's divide it into two parts the front-end and the back-end.
The top 3 back-end frameworks:
- PHP – Laravel, CakePHP
- Python – Django, Flask
With all that out of the way let's dive in.
[ Featured: Learning on YouTube ]
[Building Projects] (Will be covered in a different blog post)
- Back-End: (this section will be covered in Part 2)
- OS and General Knowledge
- Basic Terminal Usage and CLI commands (grep, awk, sed, lsof, curl, etc)
- Process, Threads, Concurrency and Memory management
- I/O Management and POSIX (stdin, stdout, stderr, pipes)
- Basic Networking
- Server (node.js, express.js etc)
- Relational (PostgresSQL, MySQL, MariaDB, etc)
- Document (MongoDB, Firebase)
- JSON APIs
Don't get anxious looking at all the topics above, I am sorry if they look intimidating. This index is designed to quick access all the sections and sub-sections of the blog post that corresponds to each of the topics. For some of the topics that are too small to explain I have directly linked resources to learn them. For example, How does the internet work, and what is HTTP? is directly linked to a Stanford web page explaining exactly that.
Note: The first two steps (Basics and Tools) are basically mandatory (in order) to move forward with the later steps, however the last two steps (Additional Frontend and Back-End) can be swapped to the interest, whichever interests you more.
HyperText Markup Language is the foundation of all websites. It’s the main file type that is loaded in your browser when you look at a website. The HTML file contains all the content on the page, and it uses tags to denote different types of content.
For example, you can use tags to create headline titles, paragraphs, bulleted lists, images, and so on. HTML tags by themselves do have some styles attached, but they are pretty basic, like what you would see in a Word document.
HTML for beginners is very easy to pick up and can be learned fairly quickly. My sister is in 6th grade and she was getting the hang of it.
But, unfortunately, many people are stuck in this phase, maybe they're just saying they have started learning and haven't really but in fomo they say they're learning HTML. What I want to say is don't waste a lot of time on learning this, it is extremely easy to understand. It is basically MS Word u>where the structure of the content is determined by html tags instead of the bold or italic button in the MS Word program
To learn html I have two video recommendation
- HTML Tutorial for Beginners: HTML Crash Course [English]
- HTML Tutorial for Beginners | Complete HTML with Notes & Code [Hindi]
Just watch either of the two videos and move ahead, without wasting any more time on this.
Cascading Style Sheets, lets you style that HTML content so it looks nice and fancy. You can add colors, custom fonts, and layout the elements of your website however you want them to look. You can even create animations and shapes with CSS!
With great power comes great responsibility
Having said that, css is easy in the beginning then as soon as it starts making sense, it gets harder and harder. So my personal recommendation would be to learn the fundamentals in depth so you know what you're doing. 80% of the work can be get done with just these fundamentals.
And to get these fundamentals in place I have the perfect resource for you, I bet you have at least heard of freeCodeCamp. They have a interactive code along with tutorial which takes from basic html to responsive web design.
The topics involve:
This is what the layout of the website looks like, on the left, we have the tutorial explaining the topic that we have learned. If the topic is from a previous module then it is linked here.
In the middle, there is the code editor in which we write our code, the output of which is shown at the right of the page.
Wait there is more, when you complete the modules you will be greeted with coding assignments in which you'll have to code out some projects to solidify the CSS skills that you have learned.
There are in total 5 coding assignments:
- Build a Tribute Page
- Build a Survey Form
- Build a Product Landing Page
- Build a Technical Documentation Page
- Build a Personal Portfolio Webpage
Yeah, it even includes a personal portfolio
I can't recommend this interactive course enough!
For example, you can make a Weather widget showing the weather based on the input of the user, you can build a website that tracks the user's expenses and shows the stats in a chart form.
Now comes the resources part:
These are the two free courses that I will recommend, but watching videos while mindlessly copying the code is what everyone tends to do when we learn from videos.
Even though I am asking you to watch these playlists on YouTube, it is not a good platform to learn. There are a lot of distractions, and a whole sidebar dedicated to making you watch unproductive content.
I personally go from learning to watching Tanmay Bhatt's Comedy videos in no time.
This is why I would recommend you to checkout YouTemy the project I built to fix these issues. Even though it is in its MVP stage, you'll still get a lot of use out of it.
Package managers are online collections of software, much of it open source. Each piece of software, called a package, is available for you to install and use in your own projects.
You can think about them like plugins– instead of writing everything from scratch, you can use helpful utilities that other people have written already.
The most popular package manager is called npm, or Node Package Manager, but you can also use another manager called Yarn. Both are good options to know and use, although it’s probably best to start out with npm.
If you’re curious to learn more, you can read this article on the basics of using npm.
Build tools are programs that automate the creation of executable applications from source code. The building incorporates compiling, linking, and packaging the code into a usable or executable form
By far the most widely used build tool is WebPack and I will recommend understanding how WebPack works. This knowledge will be easily transferable to other build tools.
This is something that you just can't skip, it is very important and will make you a decent developer single-handedly.
Version control (also called source control) is a system that keeps track of every code change that you make in your project files. You can even revert to a previous change if you make a mistake. It’s almost like having infinite save points for your project, and let me tell you, it can be a huge lifesaver.
The most popular version control system is an open source system called Git. Using Git, you can store all your files and their change history in collections called repositories.
You may have also heard of GitHub, which is an online hosting company owned by Microsoft where you can store all your Git repositories.
And while you're at it, go ahead and learn GitHub Pages the repo hosting service provided by GitHub which will allow you to host your websites for free. And there is nothing better than being able to show your friends what you have built through a live URL
First off Congratulations, not a lot of people reach here. They quit before getting to the good part, the part where I fell in love with web development. The part where we finally start to see the output of the hard work that we've been doing.
This is the part where you'll get the skills that will get you an internship with good pay or good enough pay (depending on the quality of projects that you have).
[ From MDN Web Docs ]
They are easier to scale, making complex DOM manipulations easier than ever. I mean just go and look the FaceBook's homepage. There is so much going on there, imagine building that with plain JS and HTML, and CSS. No, go there and actually start designing the front-end yourself (on paper obv)
Now that we know why front-end frameworks exist, we can move forward and see what are the available options to learn.
There are a huge number of front-end frameworks and new ones popping basically every month it seems. Maybe even every week, to what to learn and what not to learn? The answer is a bit complicated, let's first narrow down our list to the top 3
Each of the above frameworks is great, Vue is the most loved, React is the most widely used and Angular is the most hated 😆
My recommendation out of the above bunchy is React.js the reason being, that it is very fun to write, the opportunities for React Developers are huge, and the knowledge of React can be then transferred to Cross Platform: React Native which can be used to build mobile apps for both IOS and Android.
I love ❤️ React.js (it is not a framework tho, though it is a library ping me on Twitter if you wanna discuss this)
This is by far the best React course there is, it's only ₹500 or $10,
My friend learned from this and landed an internship in the first year and It is recommended by everyone that has watched it.
There is no alternative to this course, so I would highly recommend that you buy this course and complete it, and follow all the instructions the instructor gives you. I am sure that you'll understand all the concepts very clearly.
And by the end of the course, you will be in a position to build your own full-stack project (using Firebase) or apply to internships directly, that's how good this course is.
Some Good Stuff on YouTube
- ReactJS Tutorial for Beginners - Codevolution
- Practical React - Ben Awad
If you have followed this guide religiously, I recommended the best CSS course that I could find (FreeCodeCamp Interactive CSS Course) and you have completed it (at least I hope) but the problem with plain CSS is that it is not scalable what I mean by that is, as the project grows larger and larger the maintainability of CSS decreases rapidly.
Styles are overriding each other, new styles are making the old styles go nuts, the new guy just used
!important everywhere and, now everyone is holding their re-iterating their life choices. It is a disaster.
Though many great developers have come up with various systems to fix all these issues (symantic class names for example), plain CSS is still a disaster, especially for someone who hasn't worked on large scale projects.
I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.
Adam Wathan (Creator of Tailwind CSS)
And this is where CSS Frameworks come in, to solve all the issues I mentioned above, some do the job really well that I think why does CSS even exist, and some suck so bad that I start loving plain CSS. So, what is my recommendation you may ask, well it is Tailwind CSS duh.
You can try using bootstrap , bulma or skeleton but once you get your hands on experience using Tailwind CSS I don't think you would even think of switching tailwind out for your next project (I certainly don't), that's how good it is.
You don't need to go through an entire course to learn tailwind, since you already know CSS you can just google how to do a certain CSS thing in tailwind as you go along with your project.
Damn, this has been a very long write-up, but we're finally approaching the end so phew 😌.
Server-side rendering (SSR) is an application’s ability to convert HTML files on the server into a fully rendered HTML page for the client. The web browser submits a request for information from the server, which instantly responds by sending a fully rendered page to the client. Search engines can crawl and index content prior to delivery, which is beneficial for Search Engine Optimization purposes.
Advantages of SSR
- A server-side rendered application enables pages to load faster, improving the user experience.
- When rendering server-side, search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO.
- Webpages are correctly indexed because web browsers prioritize web pages with faster load times.
- Rendering server-side helps efficiently load webpages for users with a slow internet connections or outdated devices.
A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers.
Static site generators are an alternative to content management systems (CMS) — another type of tool for managing web content, generating webpages, and implementing templates. (A template is a reusable format for web content; developers use templates to avoid writing the same formatting over and over.) Static site generators are typically part of a JAMstack web development approach.
Next.js is a React Framework. A React Framework? that doesn't make sense, the framework of a framework? Well, React is not a framework, it is the library. What this means is that React doesn't force you to use it in a certain way. You can use React for a single
Next.js however is an opinionated set of tools, which allows the developer to build applications in a certain way. Let me tell you this, It is the best thing that has happened to React to build Production Applications.
Some of the amazing features of Next.js
- Automatic Routing (Frontend as well as API Routing)
- Code Splitting
- Server Side Rendering and Static Site Generation
- Image Optimisation and SEO (The
Resources to learn
Next.js themselves has provided us with amazing documentation and code-along tutorials, so there is no need to wander around the internet to learn Next.js
Congratulation to all those who have read this blog post till here, and best of luck for completing all this and building cool projects, and getting an awesome internship.
Do let me know if you do see improvements, or want to ask for some advice or anything at all. Twitter is the best place to do this.
Do give me a follow while you're at it 😅.
What is next after this guide? I will be following up with Part: 2 of this blog post which will have a detailed guide explaining back-end development. After which or before this, I will post about what is the optimal way to come up with new project ideas and actually finish them till deployment (and avoiding Tutorial Hell 👿)
I am also working on React, and Next.js tutorials, and will also post about how you can actually apply for internships. Stay tuned for that.
Thank you all for staying this far 🙂.