What is Front-end development?
What is Front-end development?
Concepts of frontend development in a nutshell
“Front-end is everything you see and interact within a web or a mobile application.”
We’ll take a deep dive into front-end development, what it covers, common languages, and frameworks used in this week's post.
Frontend development includes building the application’s layout, applying styles, making it interactive to users, communicating with the back-end code, and making it compatible across all screens (mobile, tablets, laptops, and external monitors).
The three main building blocks of frontend development are:
HTML → Gives a semantic structure for the pages.
CSS → Provides styling like colors and animations.
Javascript → Handles user interactions.
HTML (HyperText Markup Language)
HTML is a language designed to structure a web document with the help of tags, which are scanned by the browser and rendered into the desired web page.
HTML lets us construct the webpage and its components with the help of tags. It includes buttons, paragraphs, anchors, tables, headings, lists, forms, etc. HTML also lets us embed images and videos on your web page.
This is a simple HTML code and how it is rendered by the browser.
The text between <html> and </html> specifies the web page, while the text between <body> and </body> determines the visible content.
CSS (Cascading Style Sheets)
CSS defines the structure, design, layout, and how web pages render in multiple screen sizes. CSS helps control the layout and design of many pages at once.
CSS uses the following to interact with the HTML elements:
Selectors → Determines which HTML element is affected by the CSS styling.
Declaration → The block of styling code containing properties and values.
Properties → This includes styling properties for HTML elements like font size, margins, colors, etc.
Let’s see how the HTML page shown above is affected when this sample CSS code is applied.
CSS Frameworks and Preprocessors
CSS Frameworks are a set of default HTML and CSS codes that lets a frontend developer accelerate the development process. Frameworks come with commonly used user interface layouts, grids, and responsive design patterns.
Some examples of CSS Frameworks are Bootstrap, Semantic UI, Materialize, etc.CSS Preprocessors let the developer automate repetitive tasks and write reusable code later compiled into general CSS. Each Preprocessor has a unique syntax.
The most common examples of CSS Preprocessors are as follows:SASS (Syntactically Awesome Style Sheets)
LESS (Learner Style Sheets)
We’ll see more about this in my subsequent posts.
Javascript (Making your web page interactive)
Javascript is one of the most popular scripting languages used in both frontend and backend for various use cases. From the frontend’s perspective, it brings your web page alive.
Javascript provides additional functionality to your web page that might not be possible with HTML and CSS.
It enables UI animation, site navigation, menu functionalities, and much more.
Javascript is huge and deserves a separate post for itself to discuss its applications.
Javascript frameworks VS libraries
There are a lot of misconceptions between a Javascript framework and a Javascript library.
Javascript Frameworks are templates for creating a web application providing an entire structure on which developers can build.
Javascript Libraries are sets of prewritten code snippets reused to implement core JS features.
Popular JS frameworks
Angular
Vue.js
Ember.js
Popular JS Libraries
React.js
JQuery
Each framework/library has its advantages and features that solve specific use cases. A frontend developer chooses the one which suits their requirement.
I've outlined the basic elements of front-end development. Please note that this is not exhaustive. I haven't mentioned many other concepts involved in front-end development like AJAX, Responsive design, Accessibility, and Progressive Web Apps.
I hope this gives you a bird's-eye view of front-end development. We will dive deeper into each aspect in my future posts.
Until next time!