HTML, CSS & JS are not enough (esp if you plan to be a independent dev)

When I had joined as junior frontend dev 2 years ago, I was very excited to finally start making awesome projects and soon build my own wesbites and present it to the everyone and the users will love and share them further.

But it was a letdown actually, I figured out all I did was close github issues and push code and some senior would review it and merge. This went on for months, I was never getting the full picture of what is happening, how our web apps are working, how our customers are using it, do they like the feature I had recently added or do they hate it, a lot of questions used to be in my head.

So I started making things out on my free time post office hours, I just wanted to build something and make it available for everyone. I knew how to make websites on my computer(I mean locally) with js and frameworks, but what happens after? I never knew. I have wasted a lot of time on this as I was not even aware of where to begin, because there were tutorials on how to build things but never explained what to do with those projects and that SUCKS!

Here is a list of things which I think are necessary to learn in order to host a project from scratch to the internet.

1. Domains

Domains are the most common thing but it's important to know how to use them, what are TXT records, CNAME, A records, Nameservers etc.

We all know how to publish to Netlify & Vercel(Zeit) etc, but you also need to know how to connect domains we buy on godaddy & namecheap.

The most common way is to adding Zeit/Netlify nameservers to Godaddy/Namecheap accounts. DNS records are links to the host which you take and go over to you Godaddy account and add them, this gives completed access of your domain to your host.

You can also use CNAME or A records to connect your domain to your host.

Here are the official examples from Netlify & Vercel explaining how to do it on their platforms.

2. SSL Certificates

Now that all browsers have made it mandatory to serve your website data over HTTPS, it is important to know how to do this & use it (unless you want a "Not Secure" badge).

SSL certificates are small files which contain some public keys, it's like binding a company or an entity to a domain name, but you cannot do this yourself, it is supposed to be signed by a third party entity, even though you can self sign a SSL certificate, but browsers will flag this and you will get a insecure badge again.

Agreed, Netlify, Zeit other static sites provide this with zero setup, when you go build bigger projects, knowing how to add this could come in handy.

They used to be a paid thing earlier, but in order to give internet more freedom and make it better, some communities and companies have started giving them for free.

Some popular SSL/Encryption providers are

• Cloudflare
• LetsEncrypt - ZeroSSL(Tool to generate Letsencrypt certificate)

Cloudflare has an excellent article explaining SSL certificates and how to use them.

3. REST APIs, Backend, Databses & Authentication etc

Although this might not be mandatory if you just want to work on the frontend part, but I still feel it is necessary & very important to learn these concepts and up your game.

• Rest APIs

I don't just mean consuming APIs in browser with javascript. It's also necessary how to make Rest APIs. This will help you understand System Design & Software architecture in a better way. Learning how to paginate, query and sort data in APIs will definitely make you a better developer.

Start by making static APIs, just serving some json from any backend languages like Node or Python and try to handle errors, pagination and sorting etc.

• Backend & Databases

During your first freelance project, I am 100% sure there will be a point where you realise that some backend part is to be coded and you will have to consult someone else for this part. It would be awesome if you could just write it yourself, isn't it?

Because just the frontend part is not enough, all projects are a mixture of both. You either have to send emails, connect with third party services, run cron jobs, save data to some database etc.

These days it is even more easier to write server side code because of Node, you will be writing you good 'ol js.

Databases are also a important concept, sometimes you have to save data or fetch dynamic data. The easiest option is Mongo DB, works amazingly well with Node with Mongoose.

Glitch.com + MongoDB atlast is an amazing recipe to learn and make a backend for testing.

• Authentication Strategies

Learn how different forms of client & server authentication works. Some of them are Local Auth/JWT, oAuth 2.0, user sessions etc

4. Linux, SSH

This is one of the most important things beginners miss out on. Most corporates and established startups dont rely on Netlify or Zeit etc. They put their code on their own cloud server hosted on services like AWS, GCP, Digital Ocean & Heroku etc, and you know what these servers run on? Linux. So please stop using WINDOWS as you coding environment. It is not necessary that only senior devs have to handle the server and ops part, learning this will go a long way.

Learn commands to do file operations like compressing files, unzipping them, searching through files with grep , editing code on the terminal since ther will not be any GUI or VScode to help you hence learning VIM, Nano etc will be a life saver, git commands etc.

SSH is another important thing to learn. In order to connect these servers the most popular way is SSH, Secure Shell.

There are different ways to connect to them like

1. Username/Password combo.
2. SSH Keys
3. PEM files (used by AWS mostly)

5. Servers, Nginx, Port Proxying

Like I mentioned above, most corporates and startups host their digital cloud providers, even for frontend projects. My company uses AWS for hosting our website.

I understand that companies will not just gives access to thier servers to people who are still learning, but you know what? Servers are cheap these days, heroku even provides you one for free.

The best way to learn this would be by buying a Digital Ocean Droplet. It's extremely cheap, $5/month for a linux machine. You could make a backend, add mongodb, have storage space etc.

Here is my Digital Ocean Referral Link, sign up and get $100 worth of credits.

7. Wordpress

This might be a very unpopular opinion, but you can't deny the fact that wordpress is used by over 25% of the internet, yes it's that popular. A lot of the freelance projects I get are made with wordpress. It might feel outdated but it is battle tested and one of the most easiest & established CMS out there.

There are a lot of advantages of using Wordpress over these newer modern Headless CMS'.

1. Easier for Non tech people.
2. Content writers know wordpress, I have even seen my content writer friend add Wordpress under skills section in her resume.
3. Great for SEO, plugins like Yoast & AIO seo the easiest way to implement most SEO features out of the box.
4. Plugin ecosystem, wordpress has an amazing collection of plugins. In fact Yoast has over 200 million downloads till date 🤯🤯, it is now a company with over 100 employes, generating 12M revenue.

I am not saying learn wordpress by the core and make advanced themes and plugins, just have a overview of how it works, I am sure it will help you a lot.

8. SEO, Digital Marketing, Google Analytics, Copywriting

I have seen developers making amazing project but not being able to promote them properly or sell it to the right people.

Hence it is very important to know atleast the basics of how Google works, their quarterly algorith updates, how to rank pages, keyword analysis, search console etc.

• SEO

A lot of people think SEO is just adding meta data in your head tag, but there is so much more to it. Things like Focused Keywords, Structured Data, Rich Cards, Microdata, Backlinking, Page Ranking strategies etc. come into picture.

Most people miss the fact that SEO is cheap and great for organic traffic but instead jump to paid ads directly.

One thing to keep in mind is, SEO is a long term game & about quality instead of quantity, it is slow and will not give your immidiate results, but trust me it is going to be worth it.

• Digital Marketing

Just learn how it works, sit down with a friend who does this or just watch a good youtube video. It will give you insights you might not were aware of like Did you know Google allows competitors ads to be shown even when users search for your product, with your brand name?

Not telling you to learn the complete marketing thing. Just learn the basics of Google/Facebook tracking pixels, remarketing & why tracking pixels are added, how to add them etc.

• Google Analytics

This tools worth so much more and people never fully utilise it to its potential. I have seen so many developers just add the ga script in thier site and leave. Wake up people, there's so much more to it. You can

1. Track clicks, video play events, scroll events etc, even assign values to these events to segregate them for reports.
2. Define user goals, add monetary value to them. You can reverse engineer goals to see how a sale happened and take descisions accordingly
3. Create custom audience segments
4. Create user flow funnels
5. Create Custom Dashboards
6. Get emails of your reports. Admin > Custom Alerts > Make a alert.

• Get better at Writing Copy

You project might be good and you have worked on it week/months developing, you finally launch it on producthunt and thinking to get some awesome response, but you had a wrong hero title, difficult to understand which will definitely confuse the user, making him/her leave your site without exploring the site (this is termed drop-off in marketing).

Some things might have been clear in our head, but you need to think from a avg users perspective.

Keep the ego aside and look at what great brands are doing & try copying them. Write copy which everyone will understand. Write copy which will make a good impression, whick will keep the user hooked.

Wow, this post has become quite long, right! I had some more things to be added to this like Implementing Gsuite/Outlook, CDNs, Handling Clients, Design Tools, Providing project estimates & how much to charge for projects.

Let me know if you are interested about them as well.

PS, follow me on twitter for more updates.

Icons & Illustrations
Cover Imge - https://stories.freepik.com/
Iconsby flaticon.com