There are two main divisions of modern web development. We have the front and the back ends. In this article, I will be talking about the front-end concerning how one can shorten his/her time to learn and become a pro.
There are three main languages in front-end development. They are HTML, CSS, and JavaScript. HTML which stands for HyperText Markup Language is used for declaring markups on a web page, Cascading StyleSheet(CSS) helps style HTML whilst JavaScript is a scripting language that gives you more power to modify the page, respond to user events, communicate with the server and many more. I will not be talking about the incredible features of these languages.
One may ask. What do I need to know when learning front-end development? The answer is simple and very straightforward. All you need to do is to checkout on the similarities among five or ten websites. What I mean by this is that you have to open five or ten different websites in different tabs in your browser and find more about what is common among all.
As a starter, you don't need to worry yourself about learning everything right from the onset. To start creating something in the early stages of your front-end development career, the following are some of the basics you need to consider:
HTML
- 1 - Basic structure of a web page
- 2 - HTML file extensions (.html and .htm)
- 3 - Elements (tags) & attributes, inline & block elements
- 4 - What goes into the head tag
- 5 - What goes into the body tag
- 6 - What is an empty element and a non-empty element
- 7 - What are relative & absolute URL, directories, and files
- 8 - How to include media on a page (images, videos, audios)
- 9 - Nesting in HTML & Semantics (header, nav, footer, aside, article, section, main), forms, tables
- 10 - Linking webpages
CSS
- 1 - Basic CSS syntax
- 2 - How to include CSS on a webpage (internal, external and inline)
- 3 - Selectors, properties and values
- 4 - Common properties (width, height, text-align, color, font, background, position... etc.)
- 5 - Units and when to use them (vh, vw, px, %, em ... etc.)
- 6 - Layout properties
- 7 - Basic flex properties(flex, align-items, justify-content, flex-grow)
- 8 - Ways of implementing colors
- 9 - Responsive web design (@media rule)
- 10 - Display techniques such as showing a list of users, using a float property, clearfix, and a few others
JAVASCRIPT
- 1 - Basic syntax
- 2 - How to include JavaScript on a webpage
- 3 - Variables (numbers, strings, arrays, objects) & scope
- 4 - Operators & Comparisons
- 5 - Conditional statements & switch
- 6 - Control structures (loops)
- 7 - Functions
- 8 - Callbacks, Async and Promises
- 9 - Communication with the server (AJAX and fetch), events, date, JSON
- 10 - How JavaScript works, Document Object Model, Window Model
The above depicts some of the basic things you need to master in your early stages of front-end development. One thing you also have to take great notice of is how to use the code. There are so many developers who do not know how to use code and when to use them. Bringing what you have learned together to form a great piece of code is another thing that does not take a longer time to master.
ADD A COMMENT
0 comment made below