{"id":32,"date":"2020-01-14T14:54:47","date_gmt":"2020-01-14T14:54:47","guid":{"rendered":"https:\/\/gwena.active-test.fr\/?p=32"},"modified":"2020-01-14T15:42:21","modified_gmt":"2020-01-14T15:42:21","slug":"quest-ce-que-le-developpement-front-end","status":"publish","type":"post","link":"https:\/\/gwena.active-test.fr\/index.php\/2020\/01\/14\/quest-ce-que-le-developpement-front-end\/","title":{"rendered":"Qu\u2019est-ce que le d\u00e9veloppement Front-End ?"},"content":{"rendered":"\n

Si vous ne savez pas ce qu\u2019est un client<\/strong>, un serveur<\/strong> ou que vous ne connaissez pas la diff\u00e9rence entre un site Web statique et dynamique<\/strong>, lisez d\u2019abord notre article sur comment fonctionne un site web<\/a>.<\/p>\n\n\n\n

Qu\u2019est-ce que le Front-End ?<\/h2>\n\n\n\n

Le front-end<\/strong> c\u2019est la partie du code qui est re\u00e7ue par le client. Je rappelle que le client c\u2019est notre navigateur Web<\/strong>.\n Il s\u2019agit finalement des \u00e9l\u00e9ments du site web que l\u2019on aper\u00e7oit \u00e0 \nl\u2019\u00e9cran et avec lesquels on pourra interagir. Ces \u00e9l\u00e9ments sont compos\u00e9s\n de 3 langages: HTML, CSS et Javascript <\/strong><\/p>\n\n\n\n

Le Navigateur Web<\/h2>\n\n\n\n

Notre navigateur c\u2019est l\u2019outil qui va nous permettre de voir le Web<\/strong>. Les plus connus sont: Chrome, Firefox, Safari, Internet Explorer, etc.
On peut le voir comme une sorte de traducteur, c\u2019est-\u00e0-dire qu\u2019il va recevoir du code<\/strong> et nous le montrer sous forme visuelle, il va afficher nos pages Web.<\/strong>
\n D\u2019ailleurs, ils n\u2019ont pas tous la m\u00eame fa\u00e7on de traduire ce code et \nlorsque l\u2019on codera, on devra faire attention aux sp\u00e9cificit\u00e9s de \ncertains navigateurs web<\/strong>.
Le code client<\/strong> que notre navigateur peut comprendre est compos\u00e9 de 3 langages<\/strong> diff\u00e9rents : HTML<\/strong>, CSS<\/strong> et Javascript<\/strong> et c\u2019est l\u2019ensemble de ces 3 langages contr\u00f4l\u00e9s par le navigateur web de l\u2019utilisateur qui va composer nos pages Web.<\/strong><\/p>\n\n\n\n

HTML (Hyper Text Markup Langage)<\/h2>\n\n\n\n

HTML \u2013 Hyper Text Markup Langage \u2013<\/strong> est un langage compos\u00e9 de tags, balises en Fran\u00e7ais. Il va nous permettre de repr\u00e9senter la structure, le squelette de nos pages Web.<\/strong><\/p>\n\n\n\n

Par exemple : un titre, un paragraphe, une image ou une liste.<\/p>\n\n\n\n

CSS (Cascading Styles Sheets)<\/h2>\n\n\n\n

Le langage<\/strong> CSS<\/strong> \u2013 Cascading Styles Sheets<\/strong> \u2013 est un langage qui va mettre en forme nos pages Web<\/strong> et les d\u00e9corer. Il va d\u00e9signer nos \u00e9l\u00e9ments HTML<\/strong> \u00e0 l\u2019aide de s\u00e9lecteurs et va leur appliquer un style CSS<\/strong>. C\u2019est ce langage CSS<\/strong> qui est responsable des couleurs, des tailles, de la mise en page, etc.<\/p>\n\n\n\n

Suivez le cours complet sur les langages HTML et CSS<\/strong><\/a>, et commencez \u00e0 construire vos propres sites Web !<\/p>\n\n\n\n

Javascript<\/h2>\n\n\n\n

Un site Web<\/strong> peut \u00eatre compos\u00e9 uniquement d\u2019HTML<\/strong> et de CSS<\/strong>, mais si on veut lui insuffler un peu de vie on aura besoin de Javascript<\/strong>, qui lui, est un vrai langage de programmation<\/strong>, avec des boucles, des conditions\u2026<\/p>\n\n\n\n

II sera responsable de l\u2019interactivit\u00e9 et de la logique qu\u2019il y a derri\u00e8re nos pages web<\/strong>. Par exemple, si on veut ouvrir un menu en cliquant sur un bouton particulier, on le fera avec du Javascript.<\/p>\n\n\n\n

Voil\u00e0 pour les 3 langages qui composent le code de nos pages Web <\/strong>: HTML, CSS et Javascript. Maintenant, il y a aussi des outils bas\u00e9s sur ces 3 langages qui nous permettent de coder plus rapidement et plus simplement.<\/strong><\/p>\n\n\n\n

Alors, envie d\u2019en savoir plus sur le langage JavaScript<\/strong> ou JS<\/strong> pour les intimes ?
D\u00e9couvrez le cours JavaScript pour apprendre \u00e0 coder en JavaScript<\/strong><\/a>, \u00e9tape par \u00e9tape.<\/p>\n\n\n\n

JQUERY<\/h2>\n\n\n\n

jQuery<\/strong> est une librairie Javascript<\/strong> tr\u00e8s populaire. Son slogan c\u2019est \u00ab Ecris moins et fais plus \u00bb. Son r\u00f4le est r\u00e9ellement de nous simplifier la vie !<\/p>\n\n\n\n

C\u2019est-\u00e0-dire que les t\u00e2ches courantes de Javascript, qui n\u00e9cessitent de nombreuses lignes de code, jQuery<\/strong> nous les rend accessible avec une seule ligne de code<\/strong> !<\/p>\n\n\n\n

Il g\u00e8re \u00e9galement pour nous les probl\u00e8mes de compatibilit\u00e9 entre les navigateurs Web<\/strong>.<\/p>\n\n\n\n

Vous aussi, vous souhaitez maitriser ce framework<\/strong> pour acc\u00e9l\u00e9rer vos d\u00e9veloppements web<\/strong> ?
D\u00e9couvrez le cours complet pour Apprendre jQuery et Cr\u00e9er une page Web interactive<\/strong><\/a><\/p>\n\n\n\n

BOOTSTRAP<\/h2>\n\n\n\n

Il y a aussi Bootstrap<\/strong> qui est un framework HTML, CSS et Javascript<\/strong>, c\u2019est-\u00e0-dire une structure qui contient de nombreux composants pr\u00eats \u00e0 l\u2019emploi: boutons, listes d\u00e9roulantes, menus, etc.<\/p>\n\n\n\n

Mais ce qui fait de Bootstrap<\/strong> une v\u00e9ritable star, c\u2019est sa popularit\u00e9 pour d\u00e9velopper <\/strong>\u00ab responsive \u00bb<\/strong>.<\/p>\n\n\n\n

Apprenez Bootstrap<\/strong><\/a> pas \u00e0 pas avec le cours complet en ligne<\/a> Bootstrap<\/p>\n\n\n\n

DEVELOPPEMENT RESPONSIVE<\/h2>\n\n\n\n

C\u2019est quoi \u00ab responsive<\/strong> \u00bb ? Responsive<\/strong>, c\u2019est une fa\u00e7on d\u2019appr\u00e9hender la conception d\u2019un site Web<\/strong>.<\/p>\n\n\n\n

Notre site devient une page web flexible<\/strong>, il s\u2019adapte automatiquement<\/strong>\n \u00e0 la taille de l\u2019\u00e9cran. C\u2019est-\u00e0-dire qu\u2019il s\u2019organisera diff\u00e9remment \ns\u2019il est vu depuis un smartphone, une tablette ou un ordinateur.<\/p>\n\n\n\n

Voil\u00e0 c\u2019est tout pour les bases du d\u00e9veloppement Front-end<\/strong> !<\/p>\n\n\n\n

Maintenant, si on conna\u00eet uniquement le Front-end, on ne peut produire que des sites statiques<\/strong>. Si vous voulez construire des sites dynamiques, vous devrez aussi approfondir le d\u00e9veloppement Back-End<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Si vous ne savez pas ce qu\u2019est un client, un serveur ou que vous ne connaissez pas la diff\u00e9rence entre un site Web statique et dynamique, lisez d\u2019abord notre article sur comment fonctionne un site[…]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[7,8],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-intro-au-web","tag-base-du-web","tag-front-end"],"_links":{"self":[{"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":2,"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":34,"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/posts\/32\/revisions\/34"}],"wp:attachment":[{"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gwena.active-test.fr\/index.php\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}