{"id":181338,"date":"2022-11-23T13:29:00","date_gmt":"2022-11-23T13:29:00","guid":{"rendered":"https:\/\/datascientest.com\/?p=181338"},"modified":"2024-07-24T15:57:38","modified_gmt":"2024-07-24T15:57:38","slug":"outils-et-competences-front-end","status":"publish","type":"post","link":"https:\/\/datascientest.com\/outils-et-competences-front-end","title":{"rendered":"Front end : Quels sont les outils et comp\u00e9tences de ce m\u00e9tier ?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"181338\" class=\"elementor elementor-181338\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d5cd6b0 e-flex e-con-boxed e-con\" data-id=\"d5cd6b0\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e12492f elementor-widget elementor-widget-heading\" data-id=\"e12492f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Le front end est la partie visible d'un site web, avec laquelle les internautes interagissent. Faut-il apprendre le d\u00e9veloppement front end en tant que Data Scientist ? D\u00e9couvrez la r\u00e9ponse.<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf66562 elementor-widget elementor-widget-text-editor\" data-id=\"cf66562\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Dans le domaine du d\u00e9veloppement web, <strong>la notion de d\u00e9veloppement \u00ab front end \u00bb est essentielle<\/strong>. Elle englobe toute la partie d&rsquo;un site web visible par l&rsquo;internaute.<\/p><p><strong>Cette notion s&rsquo;oppose au d\u00e9veloppement \u00ab back end \u00bb<\/strong>, qui concerne toute la partie non visible du site web. Mais quel est le lien avec la Data Science ? Faut-il apprendre le d\u00e9veloppement front end en tant que Data Scientist ?<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b45606 e-flex e-con-boxed e-con\" data-id=\"2b45606\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a08569 elementor-widget elementor-widget-heading\" data-id=\"5a08569\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Qu'est-ce que le d\u00e9veloppement front end ?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52a43b3 elementor-widget elementor-widget-text-editor\" data-id=\"52a43b3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Le d\u00e9veloppement front-end, aussi appel\u00e9 <strong>d\u00e9veloppement client-side<\/strong>, consiste \u00e0 produire du <strong>code HTML<\/strong>, <strong>CSS<\/strong> et <strong>Javascript<\/strong> pour un site web ou une application web. Le but est de permettre \u00e0 l&rsquo;utilisateur de voir le contenu et d&rsquo;interagir avec.<\/p><p>Quand vous visitez un <strong>site web<\/strong>, tout le contenu que vous voyez a \u00e9t\u00e9 cr\u00e9\u00e9 par un d\u00e9veloppeur front end. Ceci inclut le logo, la barre de recherche, les boutons, les liens, les animations, ou m\u00eame la disposition g\u00e9n\u00e9rale et la fa\u00e7on dont l&rsquo;utilisateur interagit avec la page.<\/p><p>Le r\u00f4le du d\u00e9veloppeur front end est d&rsquo;<strong>impl\u00e9menter la vision et le design<\/strong> con\u00e7us par le client par l&rsquo;interm\u00e9diaire du code. Il est en charge de l&rsquo;apparence et du ressenti du site web, et doit s&rsquo;assurer que le site s&rsquo;affiche aussi bien sur mobile que sur PC.<\/p><p>Les t\u00e2ches principales du d\u00e9veloppeur front end sont la <strong>cr\u00e9ation de pages web et la mise \u00e0 jour de pages existantes<\/strong>, la cr\u00e9ation d&rsquo;e-mails HTML pour les campagnes de communication, l&rsquo;am\u00e9lioration des performances de sites web en nettoyant le code, et l&rsquo;ajout de fonctionnalit\u00e9s d&rsquo;accessibilit\u00e9.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6774821 elementor-widget elementor-widget-image\" data-id=\"6774821\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.15.0 - 02-08-2023 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1920\" height=\"1157\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end.jpg\" class=\"attachment-full size-full wp-image-181363\" alt=\"\" srcset=\"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end.jpg 1920w, https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-300x181.jpg 300w, https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-1024x617.jpg 1024w, https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-768x463.jpg 768w, https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-1536x926.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-38cc4d7 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"38cc4d7\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-developpeur-full-stack\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Comprendre le r\u00f4le du d\u00e9veloppeur full stack<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8172c1e e-flex e-con-boxed e-con\" data-id=\"8172c1e\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-55142e1 elementor-widget elementor-widget-heading\" data-id=\"55142e1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Quels sont les outils du d\u00e9veloppeur front end ?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a0fe2b elementor-widget elementor-widget-text-editor\" data-id=\"1a0fe2b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Un d\u00e9veloppeur front end <strong>doit ma\u00eetriser trois langages de programmation : HTML, CSS et JavaScript<\/strong>. Il doit aussi manier diff\u00e9rents frameworks, librairies logicielles et autres outils utiles.<\/p><p>Le HTML ou <strong>HyperText Markup Language<\/strong> permet d&rsquo;afficher le contenu sur le page. Ceci inclut les boutons, les liens, les titres, les paragraphes ou les listes.<\/p><p>En revanche, la <strong>stylisation<\/strong> repose sur le CSS : Cascading Style Sheets. Ce langage est responsable du style de la page web, y compris les couleurs, les dispositions et les animations.<\/p><p>Enfin, <strong>JavaScript<\/strong> permet aux utilisateurs d&rsquo;interagir avec la page web. <strong>Ce langage est utilis\u00e9 pour la plupart des sites web<\/strong>, notamment pour le fonctionnement des boutons de menus. On l&rsquo;utilise aussi pour les jeux en ligne et les applications mobiles.<\/p><p>Le d\u00e9veloppeur front end manie aussi les diff\u00e9rents <a href=\"https:\/\/datascientest.com\/quest-ce-quun-framework\">frameworks<\/a> et <strong>biblioth\u00e8ques CSS<\/strong>. Ces outils sont con\u00e7us pour acc\u00e9l\u00e9rer le processus de d\u00e9veloppement.<\/p><p>Par exemple, les frameworks comme <a href=\"https:\/\/datascientest.com\/bootstrap-creer-votre-page-web\">Bootstrap<\/a> et <strong>Tailwind CSS<\/strong> permettent d&rsquo;ajouter un catalogue de classes \u00e0 une page web pour un design professionnel et compatible avec les appareils mobiles. Parmi les plus utilis\u00e9s, on compte aussi <strong>Bulma<\/strong>, <strong>Materialize<\/strong> et <strong>Semantic UI<\/strong>. En outre, les pr\u00e9processeurs comme <strong>Sass<\/strong> et <strong>Less<\/strong> permettent d&rsquo;ajouter la logique et la fonctionnalit\u00e9 au code CSS.<\/p><p>De m\u00eame, les biblioth\u00e8ques et frameworks JavaScript sont tr\u00e8s utilis\u00e9s pour le d\u00e9veloppement front end. Parmi les plus populaires, on compte <strong>React<\/strong>, <strong>Angular<\/strong> et <strong>Vue<\/strong>. Ces outils permettent de gagner du temps et de r\u00e9duire le code.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-16bcf03 e-flex e-con-boxed e-con\" data-id=\"16bcf03\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75b4830 elementor-widget elementor-widget-heading\" data-id=\"75b4830\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Les comp\u00e9tences du d\u00e9veloppeur front-end<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-372bb9b elementor-widget elementor-widget-text-editor\" data-id=\"372bb9b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Un d\u00e9veloppeur front end doit avoir de <strong>solides comp\u00e9tences en d\u00e9bogage<\/strong>, afin de corriger les erreurs dans le code lors du d\u00e9veloppement d&rsquo;une application. Il doit aussi <strong>ma\u00eetriser le testing<\/strong>, et savoir \u00e9crire des tests pour s&rsquo;assurer que son code fonctionne correctement.<\/p><p>Une autre comp\u00e9tence cl\u00e9 est la gestion de version, permettant de <strong>suivre et de g\u00e9rer les changements du code<\/strong> d&rsquo;un projet. L&rsquo;un des logiciels les plus populaires pour le <strong>tracking de code<\/strong> est Git. Cet outil permet de revenir \u00e0 une pr\u00e9c\u00e9dente version du code en cas d&rsquo;erreur, plut\u00f4t que d&rsquo;avoir \u00e0 le r\u00e9\u00e9crire manuellement.<\/p><p>En outre, Git permet de collaborer avec d&rsquo;autres d\u00e9veloppeurs au sein d&rsquo;une \u00e9quipe et d&rsquo;apporter des changements \u00e0 un m\u00eame code depuis diff\u00e9rents emplacements g\u00e9ographiques.\u00a0Les services comme GitHub permettent d&rsquo;<strong>h\u00e9berger les projets<\/strong>.<\/p><p>Enfin, le d\u00e9veloppeur front-end est <strong>un expert de la r\u00e9solution de probl\u00e8me<\/strong>. C&rsquo;est probablement sa comp\u00e9tence principale, car les clients attendent de lui qu&rsquo;il apporte des solutions.<\/p><p>Ce professionnel doit \u00eatre capable de d\u00e9composer un probl\u00e8me en morceaux de moindre envergure, et de r\u00e9soudre les soucis dans les applications web.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c0731fb elementor-widget elementor-widget-image\" data-id=\"c0731fb\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"900\" height=\"518\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-skills.jpg\" class=\"attachment-full size-full wp-image-181364\" alt=\"\" srcset=\"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-skills.jpg 900w, https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-skills-300x173.jpg 300w, https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-skills-768x442.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f222276 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"f222276\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-developpeur-full-stack\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Se former au d\u00e9veloppement web<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2bbb975 e-flex e-con-boxed e-con\" data-id=\"2bbb975\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e85a938 elementor-widget elementor-widget-heading\" data-id=\"e85a938\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Front end vs back end : quelle diff\u00e9rence ?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-761f9b8 elementor-widget elementor-widget-text-editor\" data-id=\"761f9b8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>\u00c0 <a href=\"https:\/\/datascientest.com\/front-end-vs-back-end\">l&rsquo;inverse du front end<\/a>, le back end est la partie \u00ab server-side \u00bb du site web. Elle stocke et organise les donn\u00e9es, et permet aussi d&rsquo;assurer que toute <strong>la partie client-side<\/strong> fonctionne correctement.<\/p><p>C&rsquo;est la partie du site web que l&rsquo;internaute ne peut pas voir, et avec laquelle il ne peut pas interagir. Il n&rsquo;y a pas de contact direct entre l&rsquo;utilisateur et le back-end.<\/p><p>Le d\u00e9veloppeur back end se charge d&rsquo;\u00e9crire les <a href=\"https:\/\/datascientest.com\/api\">API<\/a>, de cr\u00e9er des biblioth\u00e8ques, et de travailler avec <strong>les composants syst\u00e8me sans interface utilisateur<\/strong>. Il manie les langages PHP, C++, Java, Python et Node.js, et les frameworks tels que Express, Django, Ruby on Rail, Laravel et Spring. En r\u00e9sum\u00e9, le front-end est la partie du site web que les utilisateurs voient et le backend est ce qui permet son fonctionnement.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6d8e759 e-flex e-con-boxed e-con\" data-id=\"6d8e759\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-81cbd12 elementor-widget elementor-widget-heading\" data-id=\"81cbd12\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Front end et Data Science<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-05c0f9a elementor-widget elementor-widget-text-editor\" data-id=\"05c0f9a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Le d\u00e9veloppement front end peut \u00eatre tr\u00e8s utile pour la Data Science, notamment pour la <a href=\"https:\/\/datascientest.com\/quest-ce-la-dataviz-le-point-avec-nos-data-experts\">DataViz<\/a> ou visualisation de donn\u00e9es. Il est essentiel de <strong>savoir cr\u00e9er des rapports, graphiques et slides agr\u00e9ables visuellement<\/strong> avec une interface adapt\u00e9e aux appareils mobiles.<\/p><p>Il existe des outils Python simplifiant la visualisation de donn\u00e9es pour les <strong>applications internes<\/strong>, comme <a href=\"https:\/\/datascientest.com\/streamlit-ou-loutil-pour-presenter-votre-travail-de-machine-learning\">Streamlit<\/a> et <a href=\"https:\/\/datascientest.com\/realiser-de-la-data-visualisation-grace-a-plotly\">Plotly Dash<\/a>. Toutefois, ces outils ne sont pas adapt\u00e9s pour pr\u00e9senter les donn\u00e9es \u00e0 une audience plus large et moins technique.<\/p><p>Les langages front end HTML, CSS et Javascript sont plus efficaces. En outre, le d\u00e9veloppement front end <strong>permet aussi au Data Scientist de d\u00e9ployer un site web interagissant avec les <\/strong><a href=\"https:\/\/datascientest.com\/programmation-dapi-web-sous-python-avec-flask\">API Python Flask<\/a> <strong>qu&rsquo;il \u00e9crit<\/strong>.<\/p><p>De mani\u00e8re g\u00e9n\u00e9rale, apprendre le d\u00e9veloppement front end permet au Data Scientist de mieux comprendre le travail des d\u00e9veloppeurs avec lesquels il collabore, et d&rsquo;\u00e9viter que son travail soit g\u00e2ch\u00e9 par une interface laissant \u00e0 d\u00e9sirer.<\/p><p>Le front end est tr\u00e8s utile pour cr\u00e9er un <strong>design \u00ab responsive \u00bb<\/strong> compatible avec les appareils mobiles tels que les smartphones et tablettes. L&rsquo;application ou la DataViz doit adapter son affichage aux dimensions de l&rsquo;\u00e9cran.<\/p><p>Par ailleurs, il permet de rendre les mod\u00e8les accessibles \u00e0 d&rsquo;autres \u00e9quipes via une API REST. Le m\u00eame <strong>concept de microservice<\/strong> peut \u00eatre appliqu\u00e9 aux sites web, afin de permettre au client web de r\u00e9agir aux \u00e9v\u00e9nements utilisateurs par <strong>l&rsquo;envoi de requ\u00eate HTTP au back end<\/strong>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7782284 elementor-widget elementor-widget-image\" data-id=\"7782284\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"950\" height=\"550\" src=\"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-datascientest.jpg\" class=\"attachment-full size-full wp-image-181366\" alt=\"\" srcset=\"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-datascientest.jpg 950w, https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-datascientest-300x174.jpg 300w, https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/dev-front-end-datascientest-768x445.jpg 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b991d9 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"7b991d9\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/datascientest.com\/formation-developpeur-full-stack\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">D\u00e9couvrir le d\u00e9veloppement web<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7cf86a7 e-flex e-con-boxed e-con\" data-id=\"7cf86a7\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c617156 elementor-widget elementor-widget-heading\" data-id=\"c617156\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Comment suivre une formation en Data Science ?<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce53028 elementor-widget elementor-widget-text-editor\" data-id=\"ce53028\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Afin de devenir expert en Data Science, vous pouvez <strong>choisir<\/strong> <strong>les formations DataScientest<\/strong>. Nos diff\u00e9rents cursus Data Analyst, Data Scientist, Data Engineer ou encore Data Product Manager vous permettent d&rsquo;acqu\u00e9rir toutes les comp\u00e9tences requises pour exercer ces m\u00e9tiers.<\/p><p>Vous apprendrez notamment la <a href=\"https:\/\/datascientest.com\/formation-langage-python\">programmation en Python<\/a>, la <strong>DataViz<\/strong>, le <strong>Machine Learning<\/strong>, la manipulation de bases de donn\u00e9es, l&rsquo;<strong>analyse de donn\u00e9es<\/strong> et la <strong>Business Intelligence<\/strong>.<\/p><p>\u00c0 travers la <a href=\"https:\/\/datascientest.com\/formation-data-engineer\">formation Data Engineer<\/a>, vous apprendrez les techniques de <strong>d\u00e9veloppement front end et back end<\/strong> comme la <a href=\"https:\/\/datascientest.com\/ci-cd-integration-continue-livraison-continue\">CI \/ CD<\/a> avec Git et <a href=\"https:\/\/datascientest.com\/formation-github\">GitHub<\/a> ou l&rsquo;automatisation et le d\u00e9ploiement avec Docker, Kubernetes et les API.<\/p><p>Nos programmes adoptent une approche hybride <a href=\"https:\/\/datascientest.com\/blended-learning\">blended learning<\/a> alliant l&rsquo;<strong>apprentissage flexible sur plateforme<\/strong> et les Masterclasses anim\u00e9es par un Data Scientist. Notre m\u00e9thode p\u00e9dagogique est tourn\u00e9e vers la pratique, avec des <strong>exercices en ligne<\/strong> pour tous les modules et un projet fil rouge.<\/p><p>Toutes nos formations permettent d&rsquo;obtenir <strong>un certificat des Mines ParisTech PSL Executive Education<\/strong>, de valider le bloc 3 de la certification RNCP 36129 <strong>\u00ab Chef de projet en intelligence artificielle \u00bb<\/strong> reconnue par l&rsquo;\u00c9tat, et de pr\u00e9parer le passage d&rsquo;une certification cloud Amazon Web Services ou Microsoft Azure.<\/p><p>Nos cursus se compl\u00e8tent int\u00e9gralement \u00e0 distance, et notre organisme est \u00e9ligible au <a href=\"https:\/\/datascientest.com\/cpf-comment-utiliser-son-compte-personnel-de-formation\">Compte Personnel de Formation<\/a> pour le financement. <strong>D\u00e9couvrez DataScientest d\u00e8s \u00e0 pr\u00e9sent !<\/strong><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3824f1 elementor-widget elementor-widget-text-editor\" data-id=\"b3824f1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Vous savez tout sur le front end. Pour plus d&rsquo;informations sur le sujet, d\u00e9couvrez <a href=\"https:\/\/datascientest.com\/git-tutoriel-sur-le-systeme-de-controle-de-versions-du-developpeur\">notre dossier complet sur Git<\/a> et <a href=\"https:\/\/datascientest.com\/back-end-quest-ce-que-cest-et-quelle-importance-en-data-science\">notre dossier sur le back end<\/a>.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c5f5f69 elementor-align-center button-principale elementor-widget elementor-widget-button\" data-id=\"c5f5f69\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"\/formations-data\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Voir nos formations<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e374908 e-flex e-con-boxed e-con\" data-id=\"e374908\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;boxed&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e833ecb elementor-widget elementor-widget-html\" data-id=\"e833ecb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<script type=\"application\/ld+json\">\r\n{\r\n  \"@context\": \"https:\/\/schema.org\",\r\n  \"@type\": \"FAQPage\",\r\n  \"mainEntity\": [{\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Qu'est-ce que le d\u00e9veloppement front end ?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Le d\u00e9veloppement front-end, aussi appel\u00e9 d\u00e9veloppement client-side, consiste \u00e0 produire du code HTML, CSS et Javascript pour un site web ou une application web. Le but est de permettre \u00e0 l\u2019utilisateur de voir le contenu et d\u2019interagir avec.\"\r\n    }\r\n  },{\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Quels sont les outils du d\u00e9veloppeur front end ?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Un d\u00e9veloppeur front end doit ma\u00eetriser trois langages de programmation : HTML, CSS et JavaScript. Il doit aussi manier diff\u00e9rents frameworks, librairies logicielles et autres outils utiles.\"\r\n    }\r\n  },{\r\n    \"@type\": \"Question\",\r\n    \"name\": \"Comment suivre une formation en Data Science ?\",\r\n    \"acceptedAnswer\": {\r\n      \"@type\": \"Answer\",\r\n      \"text\": \"Afin de devenir expert en Data Science, vous pouvez choisir les formations DataScientest. Nos diff\u00e9rents cursus Data Analyst, Data Scientist, Data Engineer ou encore Data Product Manager vous permettent d\u2019acqu\u00e9rir toutes les comp\u00e9tences requises pour exercer ces m\u00e9tiers.\"\r\n    }\r\n  }]\r\n}\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Le front end est la partie visible d&rsquo;un site web, avec laquelle les internautes interagissent. Faut-il apprendre le d\u00e9veloppement front end en tant que Data Scientist ? D\u00e9couvrez la r\u00e9ponse. Dans le domaine du d\u00e9veloppement web, la notion de d\u00e9veloppement \u00ab front end \u00bb est essentielle. Elle englobe toute la partie d&rsquo;un site web visible [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":181370,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"content-type":"","inline_featured_image":false},"categories":[2494],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.7 (Yoast SEO v21.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Front end : Quels sont les outils et comp\u00e9tences de ce m\u00e9tier ?<\/title>\n<meta name=\"description\" content=\"Le front end est la partie visible d&#039;un site web, avec laquelle les internautes interagissent. Faut-il apprendre le d\u00e9veloppement front end en tant que Data Scientist ? D\u00e9couvrez la r\u00e9ponse.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/datascientest.com\/outils-et-competences-front-end\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Front end : Quels sont les outils et comp\u00e9tences de ce m\u00e9tier ?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/datascientest.com\/outils-et-competences-front-end\" \/>\n<meta property=\"og:site_name\" content=\"Formation Data Science | DataScientest.com\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-23T13:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-24T15:57:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/front-end.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Margalith Mamou\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Margalith Mamou\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/datascientest.com\/outils-et-competences-front-end\",\"url\":\"https:\/\/datascientest.com\/outils-et-competences-front-end\",\"name\":\"Front end : Quels sont les outils et comp\u00e9tences de ce m\u00e9tier ?\",\"isPartOf\":{\"@id\":\"https:\/\/datascientest.com\/#website\"},\"datePublished\":\"2022-11-23T13:29:00+00:00\",\"dateModified\":\"2024-07-24T15:57:38+00:00\",\"author\":{\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00\"},\"description\":\"Le front end est la partie visible d'un site web, avec laquelle les internautes interagissent. Faut-il apprendre le d\u00e9veloppement front end en tant que Data Scientist ? D\u00e9couvrez la r\u00e9ponse.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/datascientest.com\/outils-et-competences-front-end\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/datascientest.com\/#website\",\"url\":\"https:\/\/datascientest.com\/\",\"name\":\"Formation Data Science | DataScientest.com\",\"description\":\"Leader de la formation en Data Science\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/datascientest.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00\",\"name\":\"Margalith Mamou\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/datascientest.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg\",\"contentUrl\":\"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg\",\"caption\":\"Margalith Mamou\"},\"description\":\"Margalith Mamou est Product Manager chez DataScientest, apr\u00e8s avoir occup\u00e9 le poste de Chef de projet Web pendant plus d'un an au sein de la m\u00eame entreprise. Auparavant, elle a \u00e9t\u00e9 D\u00e9veloppeur web pendant pr\u00e8s de 3 ans. Margalith est dipl\u00f4m\u00e9e du Digital College et de l'Institut F2I, avec une sp\u00e9cialisation en gestion du Web et design digital marketing.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/margalith-mamou-a2869919b\/\",\"user\"],\"url\":\"https:\/\/datascientest.com\/author\/margalith\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Front end : Quels sont les outils et comp\u00e9tences de ce m\u00e9tier ?","description":"Le front end est la partie visible d'un site web, avec laquelle les internautes interagissent. Faut-il apprendre le d\u00e9veloppement front end en tant que Data Scientist ? D\u00e9couvrez la r\u00e9ponse.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/datascientest.com\/outils-et-competences-front-end","og_locale":"fr_FR","og_type":"article","og_title":"Front end : Quels sont les outils et comp\u00e9tences de ce m\u00e9tier ?","og_url":"https:\/\/datascientest.com\/outils-et-competences-front-end","og_site_name":"Formation Data Science | DataScientest.com","article_published_time":"2022-11-23T13:29:00+00:00","article_modified_time":"2024-07-24T15:57:38+00:00","og_image":[{"width":800,"height":450,"url":"https:\/\/datascientest.com\/wp-content\/uploads\/2022\/11\/front-end.png","type":"image\/png"}],"author":"Margalith Mamou","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Margalith Mamou","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/datascientest.com\/outils-et-competences-front-end","url":"https:\/\/datascientest.com\/outils-et-competences-front-end","name":"Front end : Quels sont les outils et comp\u00e9tences de ce m\u00e9tier ?","isPartOf":{"@id":"https:\/\/datascientest.com\/#website"},"datePublished":"2022-11-23T13:29:00+00:00","dateModified":"2024-07-24T15:57:38+00:00","author":{"@id":"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00"},"description":"Le front end est la partie visible d'un site web, avec laquelle les internautes interagissent. Faut-il apprendre le d\u00e9veloppement front end en tant que Data Scientist ? D\u00e9couvrez la r\u00e9ponse.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/datascientest.com\/outils-et-competences-front-end"]}]},{"@type":"WebSite","@id":"https:\/\/datascientest.com\/#website","url":"https:\/\/datascientest.com\/","name":"Formation Data Science | DataScientest.com","description":"Leader de la formation en Data Science","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/datascientest.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/datascientest.com\/#\/schema\/person\/1c2cce73f7edd34162d45b93c92adb00","name":"Margalith Mamou","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/datascientest.com\/#\/schema\/person\/image\/","url":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg","contentUrl":"https:\/\/datascientest.com\/wp-content\/uploads\/2023\/11\/Margalith.jpg","caption":"Margalith Mamou"},"description":"Margalith Mamou est Product Manager chez DataScientest, apr\u00e8s avoir occup\u00e9 le poste de Chef de projet Web pendant plus d'un an au sein de la m\u00eame entreprise. Auparavant, elle a \u00e9t\u00e9 D\u00e9veloppeur web pendant pr\u00e8s de 3 ans. Margalith est dipl\u00f4m\u00e9e du Digital College et de l'Institut F2I, avec une sp\u00e9cialisation en gestion du Web et design digital marketing.","sameAs":["https:\/\/www.linkedin.com\/in\/margalith-mamou-a2869919b\/","user"],"url":"https:\/\/datascientest.com\/author\/margalith"}]}},"_links":{"self":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts\/181338"}],"collection":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/comments?post=181338"}],"version-history":[{"count":0,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/posts\/181338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/media\/181370"}],"wp:attachment":[{"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/media?parent=181338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/categories?post=181338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datascientest.com\/wp-json\/wp\/v2\/tags?post=181338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}