Frontend Development Tools and Skills¶

Contents¶

Overview¶

HTML: HTML stands for HyperText Markup Language. HTML displays the content on the page like buttons, links, headings, paragraphs, and lists. One should not use HTML for styling. That is what CSS is for.
CSS: CSS stands for Cascading Style Sheets. CSS is responsible for the style of your web page including colors, layouts, and animations. CSS also deals with responsive design and accessibility.
Responsive design is essential in creating websites that look good on all devices.
Accessibility is the practice of making sure that everyone can easily use your web sites. You do not want to create web sites that cannot be used by those with assistive technologies like screen readers.
JavaScript: JavaScript allows users to interact with the web page. For example, when I click on the Menu button at the top of the page, it will open a dropdown list of options. Every time I click on that button, it will toggle back and forth between opening and closing the Menu.

Frameworks and Tools¶

If you don’t know what a framework is, it’s a pre-built structure that is designed in accordance with programming best practices, and lets you get started on a coding project quickly without having to do all the setup yourself..

Think of building websites and web apps like building a house — when you set out to build a house, you could create all of your own building materials from scratch and start building without any schematics, but that approach would be incredibly time-consuming and doesn’t make a lot of sense.

It’s more likely that you would purchase pre-manufactured building materials (wood, bricks, countertops, etc.) and then assemble them based on a blueprint to fit your specific needs.

Coding is very similar. When you set out to code a website, you could code every aspect of that site from scratch, but there are certain common website features that make more sense to apply from a template — if you need a wheel, for instance, it’s a lot more sensible to buy one than it is to reinvent it. And that’s where frameworks come into play. You’ll never have to start from scratch again!

HTML and CSS¶

HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are the most basic building blocks of web coding.

The 2021 Stack Overflow Survey found that 56 percent of professional developers use HTML and CSS extensively in their work. Without these two skills, you can’t create a website design — all you’d have is unformatted plain text on the screen. In fact, you can’t even add images to a page without HTML!

HTML was actually only invented in the 1980s even though computers have been around for much longer. Tim Berners Lee developed his first hypertext system, “Enquire,” in 1980 for his own use. With a background in text processing, real-time software and communications, Tim started the WorldWideWeb project at CERN in 1989.

CSS Frameworks, Libraries, and Pre-Processors¶

Once you learn the basics of CSS, then you can start to work with different frameworks and libraries. These tools were created as a way to help speed up the development process.

Frameworks like Bootstrap and Tailwind CSS allow you to add the catalog of classes to your webpage. As a result, you end up with professional and mobile-friendly designs.

There are dozens of options on the market and you don’t need to learn them all. It’s often helpful to look at jobs in your area and see what technologies they’re using. Then you can focus on the most common/in-demand skills.

Here is a list of a few options:

CSS preprocessors like Sass and Less, allow you to add logic and functionality to your CSS. These tools make your CSS clean and easy to work with.

CSS Frameworks¶

The most popular front end framework is Bootstrap.

CSS and front end frameworks (the most popular front end framework is Bootstrap) do for CSS what JS Frameworks do for JavaScript: they give you a jumping-off point for faster coding. Since so much CSS starts with exactly the same elements from project to project, a framework that defines all of these for you upfront is super valuable.

CSS Pre-Processors¶

Pre-processors are another element that a front end developer can use to speed up CSS coding. A CSS pre-processor adds extra functionality to CSS to keep our CSS scalable and easier to work with. It processes your code before you publish it to your website, and turns it into well-formatted and cross-browser friendly CSS. Sass and LESS are the two most in-demand pre-processors.

JavaScript¶

JavaScript is the most popular language for professional developers — [69% of professional developers use it regularly in their work(opens in a new tab)](https://insights.stackoverflow.com/survey/2021#most-popular-technologies-language-prof).

JavaScript lets you add a ton more functionality to your websites, and you can create a lot of basic web applications using nothing more than HTML, CSS, and JavaScript (JS for short).

At the most basic level, JS is used to create and control things like maps that update in real time, interactive films, and online games. Sites like YouTube use a lot of JavaScript to make their user interface easy to use (the fact that the page doesn’t reload whenever you Save to Playlist is thanks to JavaScript!).

JavaScript Libraries and Frameworks¶

JavaScript frameworks (including Angular, Backbone, Ember, Vue.js, and React.js) give a ready-made structure to your JavaScript code. So many companies use JavaScript frameworks to build their sites that many front end developer jobs require experience with frameworks.

There are different types of JavaScript frameworks for different needs, though the five mentioned are the most popular in actual job listings (especially React, which is why we’ve included it in our Break Into Tech program).

Here are some popular options:

jQuery¶

jQuery is a JavaScript library: a collection of plugins and extensions that makes developing with JavaScript faster and easier.

It’s also used by 77.3 percent of all websites on the Internet!

Rather than having to code everything from scratch, jQuery is like shorthand for JavaScript, which allows you to use all the cool functions of JavaScript without having to write out all the JavaScript code for yourself).

You can use jQuery for things like countdown timers, search form autocomplete, and even automatically-rearranging and resizing grid layouts..

Restful APIs and Services¶

REST: REpresentational State Transfer.(opens in a new tab)

It’s a simple set of guidelines and practices that sets expectations so you know how to communicate with a web service, which is any type of service you can access through a website.

For example, when you go to weather.com and look at a widget that displays the temperature, it asks the web service (for example, NOAA) what the weather is at a specific location. The web service will reply with the information, communicate it with weather.com through the web, and weather.com displays the result.

When you call a RESTFUL API, you’re sending a request to a specific address to retrieve information. Let’s say you wanted to write an app that shows you all of your social media friends in the order in which you became friends. You could make calls to Facebook’s RESTful API to read your friends list and return that data. Your API call can be as simple as “https://www.facebook.com/friendslist?user=janedoe&timestamp=true” and it will return Jane Doe’s friend list and when you became friends.

As a front end web developer, you could call Twitter’s API as well (Twitter also uses RESTful APIs). The general process is the same for any service that uses RESTful APIs, only the data returned will be different.

RESTful APIs make a web service perform better, scale better, work more reliably, and be easier to modify or move.

Backlinks:

list from [[Frontend Development Tools and Skills]] AND -"Changelog"