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 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.
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.
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.
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.
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.
Together. we can build our front end web app of a non-trivial size with ease.