Frontend development skills in 2020

Hi, do you want to know what you’ll be doing
as a frontend web developer? What are the technologies you need to master
to become one? Do all the coding tutorials and courses and
articles make you feel overwhelmed? This video will give you an overview of the
frontend development path. What will you do as a frontend developer? You will take website design files and convert
them into HTML, JavaScript, and CSS code. As a frontend developer, you will link together
the world of design and technology. The interface you’ll make will interact with
the back end. You will not do any server-side business logic. That will be the job of a backend developer. Beware, in the description below you will
see a link to an article. That article will go much deeper. It will include all the resources to courses,
certificates, free and paid. I am making reviews for you. The article will be a GOTO place for you to
find the latest overview with resources to learn. Do not forget to click it. Use it as a reference on your journey. Let me take you for a spin. This research is backed up by insights from
Google trends and Stackoverflow insights. So these are not just my personal opinions. When you start with Frontend development,
your goal will be to learn HTML, CSS, and Javascript. You’ll start with the basics of HTML, learn
to do forms and form validation. You’ll need to learn about conventions and
best practices. Optionally you can learn semantic HTML and
learn about Accessibility. These are not required at the beginning. Along the way, you’ll learn CSS, first the
basics. Then you’ll learn how to do layouts. You7ll be working with floats, positioning,
display, box model, CSS grind and Flexbox. You will get familiar with the Mobile-first
approach. And the responsive design with media queries. CSS frameworks like Bootstrap 4 and Materialize
CSS will help you create professional websites. They will make it a much easier task. But to make it looks more professional you’ll
want some javascript components. These can be found in Material UI or Tailwind
CSS. Before you start playing with these, I recommend
getting familiar with Javascript first. Javascript is a scripting language and it
works in the browser. Even if you want to go to backend development,
knowing javascript will give you a head start. Since all the basics are more or less the
same in any programming language, you cannot go wrong by first learning Javascript. And you know what, Javascript also works in
the backend. It is called node.js in the backend and it
is super popular in the last years. When you learn Javascript you will start with
the basic syntax. At this point, there is no need to learn any
kind of framework. First, you need to know about data types,
functions, conditions, loops. Most of the web developers skip this step
and move forward to learning frameworks. But, it is always better to know the data
structure and algorithm basics. That goes for any programming language. Though not in-depth, you must have a basic
idea about the process. You should study basic Data Structures and
Algorithms. Get familiar with Queue, Linked List, Tree,
Graph, Hashing, Sorting & Searching Algorithms. It is best to know the core concepts of programming. In Javascript, you’ll learn about DOM manipulation
and events. Next is Ajax and Fetch API. The Fetch API is a simple interface for fetching
resources. Fetch makes it easier to make web requests
and handle responses. Remember I told you your interface will interact
with the backend. Well, this is how. At this point, you will learn about the RESTful
API. Then you’ll go deeper with Javascript. Since javascript is evolving fast, you ‘ll
need to learn the latest tricks. They are called ES6+. You’ll learn about arrow functions, promises,
async/await syntax, destructuring and template strings. You will learn about hoisting, event bubbling,
scope, prototype, Shadow DOM, strict. Yes I know, being a web developer is like
being Alice in wonderland. You will learn concepts and ideas no ordinary
human has ever heard of. Learning about Browser developer tools will
make your life easier. I cannot imagine my life without being able
to debug javascript in the browser. Developer tools will help you resolve bugs,
latency, bottlenecks. Use it, it is there for you. Once you have created a web page, it’s time
to show it to the world. Now you can learn about basic deployment. Meaning, you need to put your website to a
server that will serve it to the visitor. A simple way is to go with managed hosting,
where you configure most things via the cPanel. You can use a popular provider Bluehost. Or you could host your static website on Github
pages. I said static website. What does that mean? It means your site does not need any backend
code. You are not connecting to a database and you
have not backend code. It is only HTML, CSS and Javascript. Static websites can be hosted for free on
Netlify or GitHub pages. But to host here, you will need basic knowledge
of the terminal and GIT. The sooner you learn it, the better for you. It really is not that hard. Check out my article for good resources. If you like creating websites, one way to
go is also learning search engine optimization, in short SEO. It is no use having a website if no one can
find it. You can become an SEO expert and do websites. In any case, knowing the basics is a plus. Also web security. Find out what is HTTPS and CORS. If not now, soon or later you will be learning
about them. Optionally you can learn about CSS preprocessors
like SASS. I personally never used it. With how modern frameworks push CSS to Javascript
you may not need it. But is still good to get familiarized. What you will need is a package manager like
NPM or Yarn. If you want to focus on front-end development,
then you’ll be using build tools. NPM scripts are, well, scripts. We use scripts to automate repetitive tasks. For example, building your project, minifying
CSS and JavaScript files. Scripts are also used in deleting temporary
files and folders. Module bundlers like WebPack will help you
optimize the page. Webpack is a command-line tool to create bundles
of assets ( that is code and files). It doesn’t run on the server or the browser. It takes all your javascript files and any
other assets and transforms them into one huge file. This big file can then be sent by the server
to a client’s browser. Ok. Now that you have build tools under your belt
it is time to learn Frontend Frameworks. There are a few options. Let’s see what is popular on StackOverflow. By the way. You cannot be a web developer without knowing
StackOverflow. It is a goto page for every developer. Here you can ask questions, find solutions. Each time I have a coding problem, I paste
it to Google, and Google more or less finds a solution for me on Stackoverflow. And this is a graph showing how technologies
have trended over time. The first thing that we used a few years ago
was jQuery. JQuery makes manipulating DOM super easy. It makes using Javascript on a site much easier. I do not recommend learning jQuery before
learning Javascript. It will become your crotch. Since React, Angular and Vue appeared, jQuery
is becoming obsolete. React is not really a full-blown framework
like Angular. A framework is a foundation on which you build
your program. It is a set of libraries you can use. Or better it is a skeleton on which you build
your app. React is actually a library. But it makes the creation of components super
easy. And most of the frontend apps are built with
it nowadays. My recommendation would be to go with React. Optionally Angular and Vue are popular frameworks
to look at. My opinion is this. And it goes for every other thing too. You need to choose a tool that is better for
the job. It is not a matter of whether React is better
than Angular or vice versa. It is more a matter of what you need to do. Look into my article where I will go deeper
into this subject. Anyways. If you learn React, then you need to learn
about Context API and Hooks. Redux is optional. It can be overblown for many applications. So don’t rush into Redux. If you are learning Angular, then learn about
RxJS and observables. When learning Vue yu need to learn about VueX. It is for managing state. For any of these frameworks, learn about CSS
in JavaScript. And learn about Styled components and CSS
modules. After you have developed your frontend app,
you will want to test it. You’ll learn about the difference between
Unit, integration and functional tests. And you’ll learn to write tests. Here are some tools you’ll be using for
testing: Jest, Cypress, Enzyme, Mocha, Chai, Jasmine, react-testing-library. At this point, you are ready to start working
as a junior frontend developer. Before you apply, let me give you some candy. Here are some technologies you can learn,
that will make you stand out. These are the latest and the greatest. If you know this, then you will be choosing
the best job for you. You can see them in the next video! Are you curious? First, let’s review the frontend path we
have created so far, So, to become a frontend developer you need
to master HTML, CSS, and Javascript. No other way to go. As a frontend developer, you need to be skilled
in using Browser DEV tools, GIT and be comfortable in the terminal. Basic knowledge of SEO and web security is
needed. Also, you need to be able to deploy your website
to a server. CSS preprocessors are optional. But build tools like Webpack and package managers
like npm should be under your belt. Learning the Frontend Framework is a must. I would go with React. In any of them, you’ll be adding CSS in
Javascript with Styled components. Finally, you need to be able to test your
application. With all this knowledge you will be able to
get a junior frontend position. To be ahead of your competition you can get
familiar with the new trends for frontend development in 2020. In the next video, I’m going to talk about
the trends that will make you stand out as a frontend developer. You need to be familiar with them, you need
to be using them to be the best. Yes? Are you curious? See them in the following video.

One thought on “Frontend development skills in 2020

Leave a Reply

Your email address will not be published. Required fields are marked *