loading...
Cover image for HTML, CSS & JS are not enough (esp if you plan to be a independent dev)

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

fayazara profile image Fayaz Ahmed Updated on ・8 min read

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.

Alt Text

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 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?

Alt Text

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

Posted on Jun 1 by:

fayazara profile

Fayaz Ahmed

@fayazara

Vue, Nuxt, Node, Javascript, Mongo, Pizza.

Discussion

markdown guide
 

I'm sharing your views, I'm also Junior and it's only after 6months that I realised the importance of all this. As you mention it, building my own server through Digital Ocean definitely helped me a lot understanding all those concepts. Their tutorials are super detailed and well done!

 

Thanks, and that is exactly why I am wrote this, but some people are just plainly ranting that these should not be done or suggested to beginners, I dunno why, I just stopped replying to them.

 

This is an excellent post...everywhere on the web spouts how you can make a great career as a freelancer just knowing HTML/CSS or HTML/CSS/JS, and that's partially true - if you don't mind outsourcing work that could be putting money in your pocket to some other dev. Here's the thing, if you are going to try to be a one-stop shop for your customers, you have to at least have a working knowledge of a TON of things, and this article really shines a light on that.

Thank you for this one!

 

Great post. I see I've been introduced to most if not all through either uni projects or projects in my free time but I only know them at an introductory level at best. I definitely need to learn these things to confidently go from an idea to actually putting out there like you mentioned. A question for you if thats okay. When you look back after you first learned HTML, CSS and Javascript. Did you proceed to learn one of React/Vue/Angular or Node + MongoDB?

 

Interesting question. Actually during my first job, I was writing jquery making landing pages, building internal tools etc.

Later was assigned to build a appointment booking tool for our customers, it was easy at first and I made it with jquery. After a few months, due to constant updates and critherias in that tool, the code became a mess, completely unmaintainable, even I was not sure why I had did it that way. There were around ~3500 lines in just one file, which is huge, I guess I did not refactor it properly.

So we finally decided to move to React or Vue, I chose vue for some reason and it was one of the best descisions.

So you can say choosing/learning a framework came out of necessity and to solve a problem.

 

I think if you have some HTML,CSS,JS then perhaps some backend + database would be a good next move. You don’t have to master them but you could do a small full stack project. When you are done you can then refactor the frontend to use React or Vue.

 

That's a great idea. Thanks for the tip, i'm looking into having such a project on my portfolio.

 

This post is absolute gem. Only recently did I overwhelm myself with this revelation and cursed myself for not putting in extra efforts to get to know internet deeper. It’s crazy how corporate experience restricts you to a very very tiny part of this wide web. Good post man!

 

So true, companies need to teach and be more transparent on how and why their systems are built the way they are.

 

Good post. I’ve been doing this stuff a long time and I forget how I evolved over time I guess.... I really think being a developer is one of the very best jobs in life today. There is so much to learn and with the help of others we can get by, we can ask for help and there are limitless resources and all it takes is a thirst to continue when all the chips seem stacked against us. We often bash our heads against what feels like a brick wall. Self doubt is common among us but willingness to learn and determination means we can get it done! Often we just need to sleep on it and try again the next day, slowly we become better.

 

Dude, great article! I am now just putting together a list of what I think I am missing and #3 was always a little black-box-y for me at production level for larger work projects. Thanks for this list. Def gonna re-read and ensure I can work on some of these things at work!

 

Great post. I developed a similar view after learning to code when I started taking an IT support course. I'm blown away how a course designed towards a different career path can help fill in some of the gaps I have as a developer. You were spot on with Linux, SSL's and Domains.

 

This a good post.
you are right "there were tutorials on how to build things but never explained what to do with those projects and that SUCKS!"

 

Great overview 👍. I know how I felt as a beginning web dev some 20 years ago. Back then there were hardly any tutorials, so we had to learn from scratch. It was hard but had the advantage of really learning things from a holistic perspective: creating simple pages locally, generating dynamic pages, configuring the web server, running multiple servers, etc.

Noawadays when I teach beginners or "junior" devs (I don't like the term), one thing I keep telling them is: Do not stop at solving single problems, always see the bigger picture.

But grasping that bigger picture is harder than you might think. There are plenty of tutorials online dealing with certain problems. Getting the whole perspective (as you exemplified in your post) is something that needs a systematic approach. And those can hardly be learned through tutorials.

So, where can you get a systematic overview of your field? You can opt for books, courses or, even better, pet projects in a larger team of seasoned and new developers. As long as these deal with more than single problems, and connect the dots, you are likely to get a fair insight into the global picture.

 

So true indeed. No amount of courses and tutorials will make you 100% ready, you just have to keep doing it.

20 Years! 😲 You must have seen wordpress being invented 😂

 

And imagine a life without YouTube 😅 At least my Amazon account is from 2001. Hope they will send a little something for my anniversary next year 🤣

Gold! Absolute Gold! I can’t imagine where this era of internet will lead us in 20 years to come. But huge respect to you to have seen this internet alert being invented at first place! Sorry I don’t want to make you feel old, just special :P

I was actually late to the party. But it was quite an experience seeing the web grow and mature.

 

I am not even 20 years old. 😑

 

You'll get there 🤪 Imagine all the great experience you can make until then. 💪💪

Perhaps, after 20 years I will write something similar like you did. "I didn't have {something} back then. The only way I could learn was youtube tutorials. " 😅

 

Could not stop myself follow you.

 

This article is nicely written, but one sentence is pretty bad here.

"So please stop using WINDOWS as you coding environment."

This is very misleading, and utterly not correct. Will not get more deeply into discussion, but keep in mind that we have different stacks for different reasons/problems.

 

I understand what you are saying, but I have been seen linux being used everywhere, windows has not even come into picture even once, the companies I have worked for used linux servers, freeelance clients projects, hosted most of the time on digital ocean were using linux.

I am not saying Windows is completely out of the picture, just mentioned what I have experienced and telling what most people use.

 

I am not saying Windows is completely out of the picture, just mentioned what I have experienced and telling what most people use.

I am completely sure that "popular" is not equal to "better" or even to "the best".
For example, the most popular smartphones cost around 200USD. Some models can not provide 30fps even on the home screen. How that can be good/better?

I cannot get: How an operating system on a developing machine is related to an operating system on the "server"... It lives in two different planet/galaxy/worlds.

And what I can not understand more is hate for Windows... If this OS disappears in one day, the world will "crash" after a month. Why? Because 99% of CAD-software exists only for Windows.

PS: Except for Heroku, Zeit, Digital Ocean there is a good choice for a non-backend or non-DevOps person - Jelastic. I do not how it is good "inside", but it is definitely the simplest and the fastest way to run the web-server.

 

Currently, I work in an "all Microsoft shop". We are issued Windows 10 machines. So using the built-in Windows Subsystem for Linux (WSL) is a great way to practice using Linux. Microsoft's Visual Studio Code now available on Linux and macOS. So you could use the same editor on Windows or Linux. But generally speaking, we do most of our work in Windows.

Now that Microsoft has embraced Linux servers we are migrating a lot of our cloud apps to Linux servers. So I agree it's good to be very comfortable with Linux.

 

Your perspective is correct and valid, but what you are saying is quite subjective in regard to the job market and becoming an independent developer (as in your title), it could be misleading for some. Knowing a wide breadth about web development is beneficial, but it is not essential to offer your services to clients, many developers hone in a specific front-end set of skills, and their career can be based on these skills alone. You can focus on being more of a specialist, or more of a generalist. As a freelance developer, you may consult or build a portion of a product, you may never build websites or application alone, so getting domain names and SSL certs are never part of the job description! A good example is Sara Soueidan who focuses on HTML and CSS with strong emphasis on accessibility and following web standards. Continuous learning is a given, but there are different directions and focal points that you can choose as a dev

 

I dont understand what's misleading. Everything int the post is about becoming a specialist in frontend field. I have mentioned things which will make you a better frontend developer. I never said learn everything, the things I have mentioed are related to just 1 thing, web developement, all I am trying to say is, there's more to web development than just coding.

The only thing mentioned anything apart from frontend is "learn how backend and databases" work.

I follow Sara, and I believe she knows these things as well.

 

You did not understood me then! The article title is an emphatic statement. I merely said that your article could be misleading for some people, a beginner could think that learning the points you mentioned in your article are important for work opportunities for a front-end developer. That's what I thought initially when I went through the article. What you were trying to get at more, I guess, is that you didn't learn how to deploy your work, and some extra bits on how to build web applications completely, and that is a goal for you. Frontend is a big field, there are many roles within it, for others that may not important for them, or for their job prospects.

 

Great article. I work as an independent remote developer and sorry, I can't agree with a lot of this.

My view:

There is no need to go anywhere near PHP (WordPress). Run away from such work if you can.
Windows is essential and all that is needed for most .Net developers. And that is a great job market.

Most of the rest of the list is part of a much bigger picture where there are alternatives that could just as easily be being used in your next job. So best to pick up what you need when you need it. You only have so much time - better to learn on the job as then you are being paid to learn, not trying to second guess what you need from a huge menu of possibilities at your own time cost.

Also don't spend your own time learning stuff you aren't interested in. You'll only end up in jobs you don't enjoy. This is exemplified by the "DevOps" trap. DevOps was a trend that seemed to make a developer more valuable and versatile. What it actually leads to is doing less development and more ops. Ask yourself if that is what you really want.

In your spare time for your own projects, start with what you want to achieve. If you want to learn functional programming, go and learn Elm. If you want to do maps, go learn Mapbox. If you really love the command line then go and learn Bash to your heart's content. Just completing your own web project will expose you to server deployment, but don't fret that you didn't use AWS. Yes you will get people who wont hire you without specific AWS experience. But who would want to work for such a wanker.

 

Overall this is a great post, and yes knowing more about the bigger picture when doing front-end dev work can be very nice. It also fills in some of the mystery as far as how things are really working.

Couple of corrections: TXT records are not assigning your domain to a host, they are for outside resources, usually to confirm your domains ownership. Like for SEO, you can confirm your ownership of a domain with Google’s search console using a DNS TXT record—among other verification options. Otherwise, you’ll always be using A-records and CNAME records, and primarily A-records when hosting through a VPS.

SSL is certainly not “forced” unless you’ve got a text input on your site. Static sites for portfolios would be fine without SSL and won’t trigger the warning.

But, hey welcome to the world known as “devops”! It’s a frustratingly poorly documented and overly complex section of the development world that sadly isn’t usually taught as part of the typical path pf web development.

As a 12 year veteran of IT infrastructure, I would always recommend learning this portion after becoming comfortable with whatever regular development language/process you will use for your career. It’s helpful knowledge, but not required knowledge.

So on your infrastructure learning path, have you done anything to learn about load balancers, proxy protocols and how they effect things like the request and session headers? Or have you learned anything about the different methods for creating an app cluster vs a single node? It’s the logical next step, and absolutely excellent knowledge for when you’re freelancing and have a client with a site that’s growing to a respectable demand size.

 

Yes, agreed the TXT record mention was contextual. I will correct

 

Glad I could help.

Do you need any good resources on learning more about infrastructure? I’m happy to help and I’ve been looking for topics to help jr devs get more comfortable with DevOps.

Thank you, I'll be in touch.

 

Excelent post !
You know when it comes to startups, the programming is the easiest part and it's only (20%) of the product, the rest 80% is for the marketing. Acquiring digital marketing skillsets is very important nowadays, and you can't learn it by reading, you only learn it by applying and getting experience.

 

Hey Fayaz, Great Post!

Since I have started following you I'm liking your posts and your thoughts.

Great work man. May God bless you.

P.S: There's a little typo error near end of the post "beands".

 

Thank you!

Fixed the typo!

 

That's a good article.

That being said, I would not recommend beginner to learn all of that at once. Begin slowly, step by step, and try to make your programs work first, before thinking of changing OS, for example.

 

Yes, not recommending to take in everything at once, just something that might come up when making and delivering from scratch.

 

I think we re going in a wrong direction, i mean.. from my point of viee, if you re role is a developer you need to know just points 3 and 4.
Points 1 and 2 and 5 are for sys admins, the people that take care of the servers. I shouldn't know how to do them because thsts why you pay money to your hosting.
Also, point 7.. that you shouldn't care, its just a platform, its as you should say codeigniter, symfony, yii, prestashop, drupal, magento, it doesn't matter, you work on it/woth it.
Point 8. Thats a different department, you , as a developer don't need to know it, you just make the changes that this department asks.
Thats my opinion. We shouldn't go for.. i m good at everything but o didn't master anything. Let the different departments do those jobs.

 

Sure man, if that's convenient for you.

 

You need to first specialize on a technology, then you add new skills

 

What is the best editable CMS for the clients?

 

If something cheap and barebones CMS, I suggest Netlify CMS, something more feature rich then Contentful.

A complete CMS eith media management. SEO, taxonomies then go for Wordpress

 

This post is actually pretty good. I think it is quite complete. I'll keep it as reference.

 
 

You'll be surprised how many people use it.

 
 

Should i learn design too if i want to freelance?

 

Not necessarily, a lot of clients provide design when giving work, but I feel you should know design too, atleast the basics, learn figma.

 
 

Great writing, agree with it. These days, is important and a need to be engaged with more than your primary skills. No need to go expert mode, but a good knowledge will help on your success.

 

I totally agree about this when i just started my own static site and someone needed a database. It opens up myself to more things to consider

 

Exactly, I have wasted countless hours and going through so many articles to figure out some things that I wasn't even sure were to be done in a specific way or even existed.

Courses teach us what to make but don't tell you what to do with them or how to use them in real life scenarios.

 

Your cover images are very good, and it is a very good post.

 
 
 

Salamalaikum
Jazakallah khair

 

How do you feel about the WSL2 implementation in W10? Have you given it a spin?

 
 

Is there a resource that you can recommend with learning about SEO?