Your creative journey starts here.
- Unlimited access to every class
- Supportive online creative community
- Learn offline with Ulearna's App
Front-End Development Roadmap For 2022
Front-end development includes the user interface of an application. Everything a user interacts with when a user visits a website such as a login or sign-up page, homepage, contact page falls under the front-end development term.
This article will cover all you need to get started with front-end development in 2022.
It is important to understand how the web works before you start learning any technologies. You should learn about things like:
HTML stands for Hypertext Markup Language. It is the markup language for building web pages, it is also the building block of the web. HTML is easy to learn and comprehend. With just HTML, you can build a basic website.
You need to learn the basics of HTML, such as:
· HTML Headings- these are what you use to display titles or subtitles on your web pages. It consists of
<h1> which is the most important heading and which is the least important.
· HTML Forms - HTML forms are used to collect data inputs such as username, email, contact details.
· HTML Elements - HTML elements define how web browsers will format and display content. Content in the
<i> tag will be displayed as italics, content in the
<strong> tag will be displayed as bold.
· HTML Attributes - HTML attributes provide additional information about the HTML elements. For example, the tag is used to embed an image in a web page, the src attribute will be used to define the path where the image is located.
· HTML layout - HTML layout defines the different ways a website displays content. It is advisable to use semantic HTML elements such as
<header><nav><section><article><footer>, because it clearly describes the element to the browser and developer.
Here are some resources to learn HTML:
· HTML tutorial - w3schools
· HTML tutorial - javaTpoint
· HTML Full Course - Freecodecamp
· HTML Crash Course For Absolute Beginners - Traversy Media
CSS stands for Cascading Style Sheets. It is the technology to learn after HTML. It is used for styling our HTML. For example, we can use CSS to space our content, colours, fonts, etc.
The basics of CSS you need to learn are:
· CSS box model - The CSS box model consists of the margin, border, padding, and content. The image below shows us the CSS box model.
· CSS positioning - CSS positioning helps you manipulate an element to different locations such as fixed, relative, absolute, static, sticky, etc. The image below shows us CSS positions.
· CSS grid- CSS grid is a two-dimensional system with rows and columns. CSS grid makes it easier to structure a web page without having to use floats.
· CSS Flexbox - Flexbox is a one-dimensional system that allows us to choose between a row or a column as the main layout or structure of a web page. CSS flexbox also makes it more flexible to structure a web page without having to use floats.
· Responsive design and media queries - Responsive design is the approach that an application should be built or designed with the user in mind irrespective of their environment such as screen size/devices. Responsive design is very important and should be in the mind of every developer when building a web application. Media queries are useful when you want to modify your application to fit a device such as Desktops, tablets, and phones.
· Sass - Sass stands for Syntactically Awesome Stylesheet. According to the documentation, Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
· Less - Less stands for Leaner Style Sheets is a backwards-compatible language extension for CSS.
· Bootstrap - Bootstrap helps us build fast and responsive websites.
· Foundation - Foundation is a responsive front-end framework that makes it easier to design responsive websites, apps on any device.
· Bulma - Bulma is a CSS framework based on flexbox layout.
Here are some resources to learn CSS:
· CSS tutorials - w3schools
· CSS Crash Course For Absolute Beginners - Traversy Media
· HTML5 & CSS Development - Udemy
· CSS Tutorial - Zero to Hero - Freecodecamp
· SASS Tutorial - w3schools
· Flexbox CSS in 20 minutes - Traversy media
· CSS Grid Layout Crash Course - Traversy media
· Tailwind CSS crash course - Traversy media
· Bootstrap 4 - w3school
· Foundation Framework Crash Course - Traversy media
· Bulma CSS Framework Crash Course- Traversy media
· Learn Fetch API - API stands for Application Programming Interface. An API is an intermediary that allows two applications to communicate with each other. As a front-end developer, when building a web application, chances are that you will have to work with external data such as Third-party APIs, fetch API allows browsers to make HTTP requests to a web server.
· Angular - According to the documentation, Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
· Svelte - Svelte provides a different method for building web applications. It helps developers build fast web pages and a great user interface.
· Ember - Ember allows developers to create a scalable single page application. It includes everything you need to build a rich user interface that works on any device.
· PREACT - PREACT is an alternative to React but came with a Fast 3kB and the same modern API.
· React Tutorial - React
· Getting started with Vue - Vue Guide
· Build An Ember.js App - Program with Erik
· Getting started with PREACT - PREACT guide
· Svelte Crash Course - Traversy media
· Angular Crash Course - Traversy media