This is how you become "Internship Ready" as a Web Developer [in 2022] (Part 1: Front-End)

This is how you become "Internship Ready" as a Web Developer [in 2022] (Part 1: Front-End)

A comprehensive guide to taking you from HTML & CSS to a Web Development Intern

Rose Kamal Love's photo
Rose Kamal Love
·

20 min read

Introduction

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.

Once we're done with these we'll have the choice to move further with the frontend or start exploring the backend I'll recommend moving forward with a Frontend JavaScript Framework like react.js, or one can move forward with a Backend JavaScript Framework like express.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

Why Web-Development?

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.

Why JavaScript?

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.

Front-End

If I had to tell someone why they need to learn JavaScript to become a frontend developer in a single line, I would say: Because every browser has a JavaScript Runtime built in by default.

JavaScript Runtime being the platform on which the . js code is executed. But no one would be using . js if it didn't get the job done, because it does. And there is a huge number of javaScript frameworks out there that make the ecosystem very developer friend (at least virtually)

Even if the website is built with a framework like Django (python) the front-end is still written with javaScript

Back-End

javaScript on the back-end is a different story entirely, there is no default recommendation for the back-end technologies, and using javaScript on the backend is nothing more than a personal recommendation

I recommend javaScript for the backend for mainly two reasons, the community is great and the friction is way less. (by friction I mean the context switching one has to do when developing an application using two different languages)

The top 3 back-end frameworks:

  • PHP – Laravel, CakePHP
  • Python – Django, Flask
  • JavaScript – Express.js, Spring

A newbie can learn either of the above-mentioned frameworks for the back-end but my recommendation still lies with javaScript, the blog post being about internship-ready web-developer. This statement doesn't mean that these technologies don't have opportunities, it is simply implying the javaScript has more. With all that out of the way let's dive in.

Index

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.

HTML

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

Just watch either of the two videos and move ahead, without wasting any more time on this.

CSS

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

There is a lot of depth to CSS, and sometimes people tend to gloss over it so they can move on to things like JavaScript. However, I can’t overestimate the importance of understanding how to convert a design into a website layout using CSS. If you want to specialize in front-end, it’s essential to have really solid CSS skills.

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:

freeCodeCampLayout

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:

Yeah, it even includes a personal portfolio

I can't recommend this interactive course enough!

JavaScript

JavaScript is a very interesting language (putting it mildly). It was designed in 10 days to run inside the browser. Using JavaScript we can make our website dynamic, meaning it will respond to different inputs from the user or other sources.

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.

It is crucial to learn if you wanna go ahead to learn JavaScript frameworks like React, you'll have a better time learning those frameworks if you take the time to learn regular Vanilla JavaScript first.

Even if you wanna go for backend development, you still can't gloss over JavaScript. You are also required to understand the fundamentals of this language. This is the only way we can interact with the browser like we do with a computer and it is fun.

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.

To solve this issue I would highly recommend you follow the 30 Days of JavaScript Challenge. In this challenge you will be given a unique challenge each day for 30 days, slowly increasing in difficulty.

This is the perfect way to solidify your learning and make you fall in love with JavaScript.

Note: Once you are done with this, you'll have to learn Asynchronous JavaScript and the best course for that is Namaste JavaScript - Akshay Saini, you don't have to watch the whole playlist at once, you can take your time and keep learning it slowly once you finished with the basics.

Learning on YouTube

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, 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.

You can send feedback for the project to me personally on Twitter, or you can post an issue on GitHub - YouTemy and while you're at it, do give it a ⭐ on GitHub, I would Love ❤️ that

Tools

Let’s get into some other front-end technologies now. As we mentioned, HTML, CSS, and JavaScript are the basic building blocks of front-end web development. In addition to them, there are a few other tools that you’ll want to learn.

Package Manager

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.

{ Source of Above Section }

Build Tools

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.

Version Control

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.

To learn Git and GitHub, GitHub.com has some online guides that explain how to get up and running. Traversy Media also has a YouTube video explaining how Git works.

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

Additional Frontend

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).

In this section, I'll be telling you about CSS frameworks, JavaScript front-end frameworks and then finally SSR (Server Side Rendering). And if you choose to not learn the backend just yet I'll also tell you how you can build a full-stack application without the overhead of learning the backend (spoiler alert: Firebase)

JavaScript Front-End Frameworks

JavaScript Frameworks 😆 this sure is a very interesting topic to write about. But we'll first go over why we need them anyway, what purpose they serve, what are the most popular ones and then finally the none that I'll recommend and then where can you learn them from.

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.

[ From MDN Web Docs ]

So, when we use basic HTML, CSS, and JavaScript to build our application, there is a limit on how complex a website can be, and real-time updates aren't great either. As the application grows larger and larger, it gets harder and harder to understand the whole flow of the project.

In the past there was a threshold of how complex a front-end can be, so most of the work was done using the back-end which served static HTML, CSS, and JavaScript files to the client, but now as the client's machines are getting better, Client Side frameworks have taken over the world.

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

Top 3 front-end JavaScript Frameworks

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)

Resource to learn React.js

Complete React Developer in 2022 (w/ Redux, Hooks, GraphQL)

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

CSS Frameworks

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.

“Best practices” don’t actually work.

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.

Learning Resources

SSR (Server Side Rendering)

Damn, this has been a very long write-up, but we're finally approaching the end so phew 😌.

What is Server Side Rendering?

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.

Popular examples of server-side rendering JavaScript frameworks include Angular server-side rendering, ejs server-side rendering, server-side rendering Express, Gatsby server-side rendering, Google server-side rendering, NestJS server side rendering, Next server-side rendering, Nuxt server side rendering, React server-side rendering and Vue server side rendering.

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 slow internet connections or outdated devices.

What is Static Site Generation?

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.

Why Next.js?

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 div in an application built with plain HTML, CSS and JavaScript.

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 Optimization and SEO (The <Head/> element)

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

We're finally done 🔥

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 🙂.

HTML5CSS3ReactNode.jsTailwind CSS