Subscribe to my email list now at http://jauyeung.net/subscribe/
Follow me on Twitter at https://twitter.com/AuMayeung
Many more articles at https://medium.com/@hohanga
Even more articles at http://thewebdev.info/
If you want to become a successful developer, you have to learn the skills that are currently used the most.
In this article, we’ll look at some basic development skills to learn to become a good front end developer in 2020.
HTML and CSS
HTML and CSS are no question the building blocks of front end development. It’s an evergreen skill to learn since it’s used as the language to build web pages and style them.
We should be learning HTML5, which includes things like audio and video elements, dialog elements, and semantic elements for dividing our pages into sections.
Semantic elements include nav, section, aside and more. They’re important to learn to make our code clear by conveying what the sections mean.
With semantic tags, everyone reading the code will be clear as we all look at the code.
For styling, CSS is important. We have to know how to style elements by using selectors to get the elements to style and then style them with various properties like color, padding, margin, etc.
Also, we’ve to learn how to do layouts properly with CSS. We should learn flexbox to place elements properly relative to each other. If we learn to use the float and clear properties, we should unlearn those and use flexbox.
Flexbox saves us lots of frustration with layouts. Most modern browsers, including IE all support flexbox. However, IE has many issues with its flexbox implementation.
This way we can implement layouts without the headaches of using old approaches.
We should also learn to grid to create responsive layouts. This is a must since many apps are responsive since they are targeted to work on mobile.
With all that, we can add items to pages and style them easily.
JavaScript
JavaScript makes everything dynamic. We can use it to dynamically style pages, handling input events, sending HTTP requests, and more.
We need it to do everything on a front end app since people are expecting slick user experiences that are hard to repeat in any other way.
It’s also made to use HTML5 games and animations that play in the browser. All the things that Flash used to do are now done with JavaScript.
When we learn JavaScript from scratch, we should learn the latest constructs from the last 5 years.
Most features before that are bad and have been replaced by the features that are implemented in the last 5 years.
The things we should learning include spread and rest operators, array method, string methods, functions of various kinds, classes, etc.
Some things that have changed since the beginning like arithmetic and assignment operators are still worth learning even though they’ve been available since the first version of JavaScript, but there aren’t many of those features.
JavaScript Frameworks
JavaScript frameworks are must-learn if we’re ever going to make building complex apps easier.
There’s no way to make building apps easy with plain JavaScript if the apps are big. Therefore, we should just learn frameworks like Angular and Vue to make our lives easier.
React isn’t a framework but it’s usually compared with them. All it does is to create views with different syntax than the usual JavaScript syntax.
We got to add a route like React Router at least to create a complete framework. Also, we’ve learned the nitty-gritty details on learning how to handle inputs with React.
CSS Preprocessors
Even though CSS has been getting a lot better, it still has many shortcomings, like the lack of iteration and mixins to make our code reusable.
Also, it’s hard to know what CSS code is used in which file.
Therefore, we have lot of CSS preprocessor that solves those shortcomings like LESS, SASS, and SCSS.
SCSS’s syntax is the closes to CSS. It looks like CSS but with things like variables, loops, mixins, and style sheet imports added to it.
We have to build the code back to regular CSS so that the styles can be displayed on the browser.
Conclusion
The basic building blocks of front end development in 2020 are HTML, CSS, JavaScript, and JavaScript frameworks and CSS preprocessors.
Together. we can build our front end web app of a non-trivial size with ease.
Top comments (1)
Check !