Archi's Academy

GetStarted

GetStarted
Get in touch

JavaScript

Front end

HTML

This blog is all about the Basics of the Front-end. I hope this blog is beneficial to understanding the basics of the front end. Front-end developer skills are technical and soft skills that help a developer create and manage the front end of an application or website. So let's begin with the topic BASICS OF FRONT END DEVELOPMENT.

Kala Blog 3.PNG

In a nutshell, front-end web development, also called client-side development, refers to writing HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript code for a website or web application so that users can see and interact directly with them.

These are the skills and expertise a front-end developer should possess.

· Proficiency in HTML and CSS.

· JavaScript basics.

· Cross-browser compatibility.

· Responsive design.

· UI frameworks and CSS-transforming tools.

· 2D and 3D graphics.

· User Accessibility.

· Graphic design and Typography.

What is Front-End Development?

The front-end can be seen as customer-side development and refers to the component of the program that customers can view and interact with.

The responsibility of a front-end developer is not restricted to the implementation of visual components alone. It also involves designing and managing interactive functions, such as navigation, buttons, and anything else that impacts the application's functionality.

What Should Front-End Developers Know?

HTML, CSS, and JavaScript are the fundamental toolkit for a front-end developer. In addition, package managers, CSS preprocessors, frameworks, and other front-end development tools can all be added.

HTML: the Key Front-End Technology

HTML (Hypertext Markup Language) is a computer language used to build web pages that anyone can see with an Internet connection.

HTML is made up of tags, which are shortcodes normalized into a text file by the site designer. The text is subsequently saved as an HTML file, which may be viewed using a browser. The browser scans the file and transforms the text into a visually accessible form.

CSS: Styling your Façade

CSS (Cascading Style Sheets) is a language for creating style sheets. It specifies how HTML components appear on a web page in style, layout, and modifications for various devices and screen sizes. CSS is capable of mastering the design of several web pages simultaneously.

CSS interacts with HTML elements, which are the building blocks of a website. CSS utilizes selectors to connect with HTML. A selector is a component of CSS code that specifies which HTML elements will be affected by CSS style.

· A declaration contains properties and values that the selector employs.

· Properties define font size, color, and margins. Values are the settings for these properties.

External style sheets are saved as.css files and may be used to determine the design of an entire website with only one file, rather than adding several instances of CSS code to each HTML element that needs to be changed. To use an external style sheet, .html files must have a header section that links to the external style sheet.

DOM: The Web Page Structure

The structure of a web page is known as the Document Object Model (DOM). Likewise, a programming interface for HTML and XML documents is the Document Object Model (DOM). The document is rendered as nodes and objects, allowing programming languages to connect to the page.

Most Popular Front-End Development Languages

Here are some of the suggested top front-end development languages for you when developing and building the front-end of your website or program.

  • JavaScript - The benefits of this program are due to its capacity to generate dynamic and responsive web pages, making it one of the most popular programming languages. Interactive websites are great for user experience, but they can also help with paid advertising.

Famous websites:

1.eBay

2.Wikipedia

  • CSS - CSS stands for Cascading Style Sheets. It describes how the HTML components on your site are shown and presented on the screen when coded into the site's functioning.

Famous Websites

  1. Angry Birds

2.Your Plan Your Planet

  • HTML - HTML stands for HyperText Markup Language. It is used to create web pages for your website. This language represents the page's structure, and it will be made up of several distinct components that will display the page's planned organization.

Famous Websites:

1.Fizz

2.Four Hundred Years

  • React - For those unfamiliar with React, it is a Javascript library built by Facebook. React is a user interface framework that makes adding UI components to a web page accessible.

Famous Websites:

1.Asana

2.Airbnb

  • AngularJs - AngularJS is a programming language that combines functionality with the ability to build aesthetically appealing web pages. One of the most prominent aspects of Angular is the scalability it provides to web developers.

Famous Websites

1.Upwork

2.Netflix

  • Vue.js - This development language is preferred by web developers seeking inexpensive, budget-friendly pricing. It creates and simplifies the construction of websites. Vue.js is affordable, but it's also ideal for front-end developers who are new to the field.

Famous Websites:

1.GitLab

2.Behance

  • Elm - Elm uses Redux's architecture to allow users to construct client-facing web pages without the inefficiencies of HTML and CSS.

Famous Websites:

1.Elmify

2.UNLI Reverse Flight Search

  • TypeScript - TypeScript is another front-end programming language used alongside JavaScript. Introducing additional types to the JavaScript support tools for use in various browsers.

Famous Websites:

1.Sky

2.Wix

  • JQuery - JQuery is a JavaScript library that helps users design cleaner websites with less code. This front-end development language is simple to learn and suggested for newcomers because of its unique ability to simplify programming.

Famous Websites:

1.Microsoft

2.Zoom

  • SASS - SASS stands for Syntactically Awesome Style Sheets and is a CSS-like programming language. With its distinct characteristics, SASS provides users with variables, nestles rules, mixins, and other capabilities for a more fluid front-end experience.

Famous Websites:

1.Toyota

2.Vox Media

This blog is all about the basics of the front end; I hope this was helpful to you.

See you in the next blog; thank you!

archis-pisces-trainee

Kala Sankar

Monday, Apr 25, 2022