Photo by: Greg Rakozy on Unsplash .
In the first steps as a programmer , people really lose their way trying to find their passion and they keep asking themself a lot of questions like : what should I learn? maybe front-end web development, or maybe Cloud computing, Machine learning engineering is better for me ,nah back-end web development is the one chosen for me .
However when it comes to the most fascinating field “front-end web development” people really get glamorized by how everyone is talking about this field , how they say : you don’t need any mathematics ,there’s no complexity you just need some Html CSS & Javascript and you are ready for that up coming job “, plus the fact that it seems easy to learn and understand in the first glance.
As a new person in the front-end development with some basics in Html,CSS, Javascript the first thing you hear in Facebook groups or Twitter “you are new !! Hop ! you better go learn some React ,Vue, or Angular ”, and because there’s a lot of hype around it, plus it’s popularity too ,and how it stands among most stared projects and Repositories in Github with other front-end/UI tools or toolkit and technologies like Bootstrap and Flutter, So you fail in that trap the trap of starting React or Vue, Angular without any prior or advanced knowledge in Javascript.
When you fail in the trap of starting a path in framework or library without prior or advanced knowledge in the language used to build that framework /libray .
As example React.js ,first of all, you look up for a book ,course in Udemy , Pluralsight or maybe a free tutorial in Youtube about React, in the case of the book , assuming you are in hurry like most beginner one of the things that you may do is skipping the prerequisites or the books introductions , so you just start with the first chapter Let’s say how to write the “Hello world” program ! and suddenly you get shocked by something like this(without any comment for highlighting ):
'use strict';
var Hello = React.createClass({
render: function() {
return React.createElement("h1", null, "Hello World!");
},
});
var div = document.getElementById("hi");
ReactDOM.render(React.createElement(Hello), div);
Notice:
I’m talking here about people who have no familiarity with writing code in other words who just started their journey in Javascript .
In case you are like thousand of worries beginner out there who don’t quite facing a lot of odds or challenge trying to learn new things even learning about complex Algorithmes, or The State Management in Flutter may not stop you from going all the way.
You may get into learning a framework/library as a beginner without any prior knowledge in the language used to built that library you might even land a job but I promise you will struggle with easiest things while trying to build something.
I’m not here to scare you I’ve mentioned some words that may seem weird to you I’ll provide you with the resource in the end of the article so you could get a small idea about what you’ve seen.
To escape that trap that new front-end developer could fail into accidentally , I’m going to give you some advice before starting your journey with fron-tend frameworks, and furthermore, I’ll give some tips that should help you as a beginner or even if you are someone that want to fill that gap in the frontend:
Drink,eat and breath Javascript Html & CSS
As a front-end developer before trying to learn any front-end famework, first of all, you should have at least a strong background in:
1.Html(HyperText Markup Language):
So you could create a structure for your Html page ,learn as you can about semantic html ,even veteran web developers still learn different stuff everyday in html check W3C (World Wide Web Consortium) Html5 to see what I’m talking about.
2.CSS (Cascading Style Sheets):
To style your page it switches to an extremely hard , and complex tool when it comes to creating a useful animation and doing some huge CSS tricks so please try to learn advanced CSS there’s hundreds of tutorial out there waiting for you, try to master CSS Grid , Flex box and Transition ,I mean it you don’t know the power behind these tool you may not believe but I’ve heard in a podcast that you can even create a Search engine with CSS ,and other things i’ve seen like: Illustration,3D Animation, and more awesome stuff.
3.Javascript
Finally Javascript, a programming language to add a sense of life to your web site or single web application it’s basic may seem easy to learn in the beginning, but once you get in into the core of language it’ll give that feeling of ”it’s impossible to learn this” , so don’t quite and try to learn how to apply deep selectors and method to traverse the DOM, try to learn module, Asynchronous Javascipt and sharpen your brain with advanced knowledge about classes and function in OOP it’s your only way to become a great React developer .
Tips might help you in Your frontend road:
Git and Git :
tracking the changes in your project is useful ,plus sharing your code with the world out there, is literally important for any programmer(even non-programmers are using it these days ).
Typescript:
Brought by microsoft,adding a sense of type to your javascript code and the power of classes and interface in typescript will help you .
Data Structures ,Algorithm , design pattern,problem solving :
Understanding Data structures, design pattern and developing the ability to solve problems will make you stand with great developers.
UI/UX design
I know it’s the designer job but getting and acquiring knowledge about UI/UX design will improve your client-side development and will give you a better communication with the designer.
+Babeljs
When it comes to transforming your javascript code so it could be compatible with old browsers, Babeljs is literally your guide to do that
Command line + Package Managers :
Learning about the command line in your operation system is really helpful especially when you are about to install a software or maybe interacting deeply with your system ,without missing Package Managers like Yarn and Npm.
Brower Developer tools
This one will help you editing your web page end enhancing it , plus these tools will be your friend in the road of debugging, all most developer (including me) spent their journey debugging not even coding.
Resource:
The State Management.
Finally
As you have seen drinking ,eating and breathing are the essentials things for a human being to survive(no more philosophy please) so you have to eat, drink, and breath these three technologies to survive as a front-end developer, however the browser relies on these technologies so he could talk and interact with you .ignoring them will just make your career measerable.
Thank you for reading .
..You can check the same article on: Meduim
Oldest comments (11)
So you're suggesting newbies to learn everything on your list before getting started on that <10 lines of code? To be honest, even with some of the knowledge in HTML, CSS and JS, modern web development still makes me feel sick. It is not as easy to understand as jQuery. My point is you eventually still need to overcome it. And you can keep googling anything you don't understand until you have a brief idea of what you are coding and what objectives you are trying to achieve when following tutorials. I think people may really lose passion in learning if they have to have "strong background" in the areas you highlight.
I agree that people still need to have full understanding in those areas but the order of learning doesn't really matter. The traditional way and the modern way of web development are so different. If you are interested in web development because of the new modern frameworks then learn them first. However, I won't say you shouldn't learn the basics, including something like jQuery first. Explore yourselves.
I have started learning Vue with a basic knowledge of JS. Speaking with the lead developer at my place of work, he said exactly the same as you, learn Vue and then Google to find the missing bits of information where you want to know more in depth knowledge of the how's, what's and whys.
I have preferred this method of learning so much more. But each to their own
Everyone will struggle with imposter syndrome and will lose confidence in when they should start learning it.
Lot of newbies don't know how POST and get work in the traditional non Ajax way. Understanding the concepts is important. Then as black1234 said, you can pick up jQuery to understand the DOM AMand then venture into any framework. Knowing very basic CSS and HTML is good enough.
Yeah I totally forgot to mention JQuery, but already got an entire article for this Library ,i still remember how JQuery pushed me to understand Ajax very well plus getting into working with pluging .
I agree with you
I agree with you. The only thing that I would add to the list is learn some basic of back end ( GET vs POST, authentication and authorization) and maybe remove Typescript. Don't get me wrong I know typescript is really important for the front end and for the back end, but for a beginner learning typescript could cause more harm than good. But again is just my personal opinion. Other than that I really enjoyed your post
Oh Thank you ,yeah I know even if you are doing just the front-end part , learning some back-end tips ,at least performing "GET&POST" requests is literally required .
This is a great article and I agree with most of the thoughts mentioned here. When it comes to building the base, do not just allow yourself scratching the surfaces.
However, it is not practical(I would rather say, not a great use of our valuable time) for someone to learn everything basics(HTML, JavaScript, Transpiler, packaging tool, etc) before jumping into using a framework or library(angular, react, vue, etc).
I would suggest getting into the details of something when you require it to(without missing it though). For example, if we are learning reactjs without the understanding of DOM tree, event handling, propagation, I am sure, we won't like our work after a few days.
Similarly, for the business logic(this is irrespective of the framework), we need a good understanding of handing data structures in JavaScript to write code that is less buggy.
We may use a heavy library for solving a problem that HTML5 solves by default. We will not know that, without knowing about HTML5 and do analysis before going for a library.
To Summarize,
It is important to know the basics of HTML, JavaScript for working efficiently with any of the web frameworks, and libraries.
But it is overkill to try learning everything before attempting new. Build the base as you go and important to document your learning so that, you can revisit.
I think it would be more fun to just start hacking in the browser JS console. It's available almost everywhere and requires no text editor, no installations, no dabbling with transpilation or git UI:s.
Usually I recommend JS Allongé as a primer, leanpub.com/javascriptallongesix/read . It's a little quirky but goes through the basics pretty thoroughly. Having worked through that I think the Mostly Adequate guide is a good next step, mostly-adequate.gitbooks.io/mostly... .
Nice one , I would like to recommond "Head First Javascript " too but unfortunately it doesn't cover the ES5,ES6 and beyond.
I have been a web developer for ~ 20 years. Been there, done that. A tip for beginners as front-end developers: although you have to master HTML, CSS and JavaScript to be a proficient front-end developer, this does not mean that you SHOULD master those "skills" to start your journey. You'll pick it up along the way, have the passion to learn, don't be afraid to.