Blog John Codeur

Qu’est-ce que le développement Front-End ?

Si vous ne savez pas ce qu’est un client, un serveur ou que vous ne connaissez pas la différence entre un site Web statique et dynamique, lisez d’abord notre article sur comment fonctionne un site web.

Qu’est-ce que le Front-End ?

Le front-end c’est la partie du code qui est reçue par le client. Je rappelle que le client c’est notre navigateur Web. Il s’agit finalement des éléments du site web que l’on aperçoit à l’écran et avec lesquels on pourra interagir. Ces éléments sont composés de 3 langages: HTML, CSS et Javascript

Le Navigateur Web

Notre navigateur c’est l’outil qui va nous permettre de voir le Web. Les plus connus sont: Chrome, Firefox, Safari, Internet Explorer, etc.
On peut le voir comme une sorte de traducteur, c’est-à-dire qu’il va recevoir du code et nous le montrer sous forme visuelle, il va afficher nos pages Web.
D’ailleurs, ils n’ont pas tous la même façon de traduire ce code et lorsque l’on codera, on devra faire attention aux spécificités de certains navigateurs web.
Le code client que notre navigateur peut comprendre est composé de 3 langages différents : HTML, CSS et Javascript et c’est l’ensemble de ces 3 langages contrôlés par le navigateur web de l’utilisateur qui va composer nos pages Web.

HTML (Hyper Text Markup Langage)

HTML – Hyper Text Markup Langage – est un langage composé de tags, balises en Français. Il va nous permettre de représenter la structure, le squelette de nos pages Web.

Par exemple : un titre, un paragraphe, une image ou une liste.

CSS (Cascading Styles Sheets)

Le langage CSS – Cascading Styles Sheets – est un langage qui va mettre en forme nos pages Web et les décorer. Il va désigner nos éléments HTML à l’aide de sélecteurs et va leur appliquer un style CSS. C’est ce langage CSS qui est responsable des couleurs, des tailles, de la mise en page, etc.

Suivez le cours complet sur les langages HTML et CSS, et commencez à construire vos propres sites Web !

Javascript

Un site Web peut être composé uniquement d’HTML et de CSS, mais si on veut lui insuffler un peu de vie on aura besoin de Javascript, qui lui, est un vrai langage de programmation, avec des boucles, des conditions…

II sera responsable de l’interactivité et de la logique qu’il y a derrière nos pages web. Par exemple, si on veut ouvrir un menu en cliquant sur un bouton particulier, on le fera avec du Javascript.

Voilà pour les 3 langages qui composent le code de nos pages Web : HTML, CSS et Javascript. Maintenant, il y a aussi des outils basés sur ces 3 langages qui nous permettent de coder plus rapidement et plus simplement.

Alors, envie d’en savoir plus sur le langage JavaScript ou JS pour les intimes ?
Découvrez le cours JavaScript pour apprendre à coder en JavaScript, étape par étape.

JQUERY

jQuery est une librairie Javascript très populaire. Son slogan c’est « Ecris moins et fais plus ». Son rôle est réellement de nous simplifier la vie !

C’est-à-dire que les tâches courantes de Javascript, qui nécessitent de nombreuses lignes de code, jQuery nous les rend accessible avec une seule ligne de code !

Il gère également pour nous les problèmes de compatibilité entre les navigateurs Web.

Vous aussi, vous souhaitez maitriser ce framework pour accélérer vos développements web ?
Découvrez le cours complet pour Apprendre jQuery et Créer une page Web interactive

BOOTSTRAP

Il y a aussi Bootstrap qui est un framework HTML, CSS et Javascript, c’est-à-dire une structure qui contient de nombreux composants prêts à l’emploi: boutons, listes déroulantes, menus, etc.

Mais ce qui fait de Bootstrap une véritable star, c’est sa popularité pour développer « responsive ».

Apprenez Bootstrap pas à pas avec le cours complet en ligne Bootstrap

DEVELOPPEMENT RESPONSIVE

C’est quoi « responsive » ? Responsive, c’est une façon d’appréhender la conception d’un site Web.

Notre site devient une page web flexible, il s’adapte automatiquement à la taille de l’écran. C’est-à-dire qu’il s’organisera différemment s’il est vu depuis un smartphone, une tablette ou un ordinateur.

Voilà c’est tout pour les bases du développement Front-end !

Maintenant, si on connaît uniquement le Front-end, on ne peut produire que des sites statiques. Si vous voulez construire des sites dynamiques, vous devrez aussi approfondir le développement Back-End

johncode