Front-end basically all stands out on the most crucial and important language i.e. JavaScript. JavaScript is the most used language nowadays which is essentially used in every basic cross platform applications. JavaScript mostly plays the part of front-end development of an app but it can also be used at server-side or backend programming by using Node.Js and Express. Without learning JavaScript you can't be called neither Front-end Developer or a Back-end Developer. Learning just some basic HTML and CSS won't call you a Developer!!
Starting from Scratch
I already come from a Computer Science background when I finished learning CS50 (the most greatest Computer Science course ever available on the planet for free, I will share the link below so you can also check it out). CS50 taught me almost everything needed to become a Computer Scientist or a Programmer so I don't fear much about learning any new programming language or a new concept. I am confident enough to jump to any newly learnt language and start making projects on it. That's the most blessed and greatest thing I have ever done (Thanks to God).
I already knew some basic HTML and CSS from early days. Besides CS50 I was also enrolled in a Responsive Web Design certification course so I learnt all the principles for creating a complete Responsive site with plain HTML and CSS only (without any styling framework). So it doesn't take me enough time to learn JavaScript from scratch.
But what about those who are just starting from scratch with zero coding experience right? Well, no worries I will help them out
Diving into Basic
First and far thing most is that you need to know how internet works? What actually happens when we type www.google.com and press enter. What actually goes behind? In short, you need to learn server and client side concepts (not all but very basic and few - they will work, trust me)
Move onto HTTP or HTTPS requests, port, how a URL is generated and parsed? How server responds to client requests etc. What your browser actually gets for every response and other things. It sounds difficult, right? But believe they are super simple and easy to understand.
Towards Front-end
Front-end development mostly includes HTML/CSS and JavaScript as the main pillars. Every Front-end part of a website is made using these languages. No website can standout without these pillars which means that reaching the Front-end milestone is impossible without learning these languages.
Coming to HTML
HTML (Hyper Text Markup Language) - the most important and basic markup language used to develop and design structuring of a website. Without HTML nothing can be connected. It is the root of every website. You need to learn HTML, but wait, every other persons says the same thing
No!, here comes my technique that learning each HTML tag is stupid and foolish. You just need to learn some basic HTML tags and the most important <div> tag and boom you are ready to go!
CSS
CSS or Cascading Style Sheet is used to style your basic HTML website. Long story short, it basically paints your website through different styling and designing techniques like color, background, font, sizing, spacing, alignment, borders etc. You will easily learn this. Learn some advance CSS too like selectors, :root, transitions and animations too.
JavaScript
The most curcial part of front-end development is here and that is JavaScript. Learning JavaScript isn't difficult if you already know programming and have good problem solving skills (like me!) but for those who just started programming will obvsiouly will find themselve stuck around here and there.
But don't worry I can understand the feelings, so that's why I just developed a JavaScript cheatsheet for every kind of programmer where they can easily learn JavaScript. You just need to learn the basics and they will provide you enough tools that you can play around.
Here you can find this (JS Tutorial - Cheatsheet )
Responsive Design
Learning responsive design is super simple nowadays because there are very good styling frameworks available in the market like Bootstrap, TailwindCSS etc which makes your design responsive and well aligned so you don't need to spend much time on CSS flexbox, Grid, Relative units, Media Queries etc.
But mine advice would be, learn some basic CSS flexbox, Grid because they will help you figure some great responsive techniques and tools so that you can understand what's going on underneath the hood. Moreover, even after using frameworks like Bootstrap you still have to sometimes add a little bit extra CSS to keep your site responsive.
Congraulations!
You are now a complete Basic Front-end Developer.
But what about front-end frameworks like React, Angular, Vue, aren't they necessary? Obviously they are necessary to learn and implement but most important of all they need strong knowledge of front-end development which I listed above.
Coming to Front-end Frameworks
You probably heard about React, Angular and Vue. What they do is simply they convert you website into Single Page User Application or SPA. The biggest benefit is that you write a single component and it remains same on each page so the page doesn't need to reload each time when new page is clicked and the navaigation bar remains same on each page. But there's much more to learn about this.
But what I advice is that, you need to figure out on you own that does you website or project seriously needed a framework to standout in the market or not? If not, then you should have to move to other areas and come back later to this topic. Maybe you find a Job that don't require a React developer so you can easily apply. Woah!
Towards Backend
I think that learning Back-end nowadays isn't so difficult because almost everything seems to be going server-less which means hosting you code base to a big company and they manage each and everything for maintaining your server but obviously they are subscription based.
For this fastest roadmap I would choose Node.JS for server side programming because you already learnt JavaScript at Front-end side so why not use that to save time and hardwork?
Node.JS
You can google the definition of how Node.JS works but in short it just basically enables the functionality and features of a JavaScript code outside the browser window. You can host this code at server-side and can make a custom backend server which listens to requests send by client and in response sends you a HTML template file ready.
You just need to learn some node modules, npm, npx, postman, host, apis etc. and you are ready to program your own custom Back-end server.
MongoDB
Now, time to rock some database. Well, first I would like to congratulate you that in just short span of time you finally became a Full Stack Developer almost under 30 Days.
Now, well again I would like to make you realize that till this milestone you can develop your own Full Stack Web application and can use browser Local Storage to store some key-value pairs as data from client-side.
MongoDB is a JSON-like document with optional schemas. It provides you a database facility and you can connect it with Back-end to give database facility to your Web Application.
Extras
Now extras include some knowledge of Git, version-control, API, JSON etc. because they will
allow you to dynamically control your application and updates the version of it.
Comments
Post a Comment