{"id":1882,"date":"2022-09-22T21:51:00","date_gmt":"2022-09-23T00:51:00","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=1882"},"modified":"2023-10-31T14:51:26","modified_gmt":"2023-10-31T17:51:26","slug":"front-end-o-que-e-para-que-serve-e-como-aprender","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/","title":{"rendered":"Front-End: o que \u00e9, para que serve e como aprender?"},"content":{"rendered":"\n<p><span style=\"font-size: 14pt;\">Neste artigo voc\u00ea entender\u00e1 em detalhes o que \u00e9 Front-End e qual \u00e9 a sua finalidade. Desde os prim\u00f3rdios da internet, um dos maiores desafios sem d\u00favida para os profissionais de web, foi e ainda \u00e9 criar sites que enrique\u00e7am a experi\u00eancia do usu\u00e1rio.<\/span><\/p>\n\n\n\n<p>Sem tempo para ler? Clique no play abaixo para ouvir o conte\u00fado!<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"100%\" height=\"83\" scrolling=\"no\" src=\"https:\/\/go.vooozer.com\/embed\/05b60a52\" frameborder=\"0\" title=\"Narra\u00e7\u00e3o humana do artigo\" style=\"height: 83px !important;\" allowfullscreen><\/iframe>\n\n\n\n<p><span style=\"font-size: 14pt;\">O fato \u00e9 que, no in\u00edcio da web, e principalmente no Brasil, n\u00e3o t\u00ednhamos tantos recursos para internet como temos hoje, e os usu\u00e1rios estavam mais preocupados em descobrir um mundo novo, do que exatamente avaliar como ele foi apresentado.<\/span><br><span style=\"font-size: 14pt;\">Na realidade alguns recursos que hoje s\u00e3o comuns e viraram at\u00e9 mesmo verbos, antes eram <strong>impensados<\/strong>. Pense em termos como \u201cPostei no Face\u201d, \u201cTwittei isso ontem\u201d o que isso significaria a apenas 15 anos atr\u00e1s?<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Antigamente, os respons\u00e1veis por criar as p\u00e1ginas web, eram os <a href=\"https:\/\/www.impacta.com.br\/blog\/2017\/04\/07\/entenda-tudo-sobre-web-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web Designers<\/a> e os Web Masters. Um era o respons\u00e1vel pela cria\u00e7\u00e3o do Layout, HTML, formata\u00e7\u00e3o das tabelas que formavam o visual e o outro pela programa\u00e7\u00e3o, na \u00e9poca utilizava-se CGI, VBScript, <a href=\"https:\/\/www.impacta.com.br\/blog\/2017\/12\/26\/saiba-o-que-e-javascript-e-por-que-voce-deve-conhece-la\/\" target=\"_blank\" rel=\"noopener noreferrer\">JScript<\/a> etc.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">A nossa realidade hoje melhorou muito se compararmos com alguns anos atr\u00e1s, j\u00e1 que a Internet est\u00e1 em constante progresso.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Novas tecnologias e novos conhecimentos aliado \u00e0 criatividade nata do ser humano, possibilitaram o surgimento de recursos maravilhosos, pense desde Com\u00e9rcio Eletr\u00f4nico, Internet<em> Banking<\/em>, Redes Sociais, Redes de Compras Coletivas, Mapas, <em>StreetView<\/em>, V\u00eddeos, fotos. A Internet est\u00e1 em constante progresso.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Com o advento das novas tecnologias, surgiram tamb\u00e9m novos dispositivos os chamados <em>Mobile Device<\/em> ou Dispositivos m\u00f3veis. <em>Tablets, smartphone, ultrabooks<\/em> com in\u00fameros formatos e resolu\u00e7\u00f5es. A tarefa do profissional de web seja ele Designer ou <a href=\"https:\/\/www.impacta.com.br\/blog\/2018\/12\/05\/guia-completo-do-desenvolvedor-web-saiba-tudo-sobre-a-profissao\/\" target=\"_blank\" rel=\"noopener noreferrer\">Desenvolvedor<\/a> cresceu exponencialmente, hoje temos al\u00e9m dos tradicionais:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><span style=\"font-size: 14pt;\">Web Designer<\/span><\/strong><\/li><li><strong><span style=\"font-size: 14pt;\">Web Master<\/span><\/strong><\/li><\/ul>\n\n\n\n<p><span style=\"font-size: 14pt;\">Novas profiss\u00f5es, e falaremos em especial do Front-End Developer.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9 Front-End?<\/h2>\n\n\n\n<p><span style=\"font-size: 14pt;\">Existem muitos conceitos sobre o que \u00e9 um desenvolvedor <em>Front-End<\/em>, alguns dizem que \u00e9 o mesmo que um Web Designer, outros especificam que por ter a palavra desenvolvedor no nome, ele \u00e9 um Web Designer que domina linguagens de programa\u00e7\u00e3o do lado cliente, por exemplo JavaScript.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Quando as vezes os Web Designers conhecem apenas o b\u00e1sico do JavaScript e a implementa\u00e7\u00e3o de <em>plug-ins<\/em>. Nosso objetivo n\u00e3o \u00e9 levantar pol\u00eamicas, portanto, uma boa defini\u00e7\u00e3o sobre<em> Front-End Developer<\/em>, \u00e9 mencionada numa excelente mat\u00e9ria criada h\u00e1 uns 3 anos atr\u00e1s pelo The Guardian uma refer\u00eancia Brit\u00e2nica, que diz:<\/span><\/p>\n\n\n\n<p class=\"has-text-align-center\"><span style=\"font-size: 14pt;\"><em>\u201cPara muitas pessoas, o desenvolvimento do lado cliente pode ser percebido como &#8220;fazer as coisas bem&#8221;, ao mesmo tempo que \u00e9 um coment\u00e1rio v\u00e1lido, uma vez que esses profissionais fazem as coisas parecem boas, com uma boa apar\u00eancia, fazem venderem&nbsp; melhor, h\u00e1 muitas outras tecnologias que se enquadram nesta campo que podem ser geralmente ignorados\u201d<\/em>.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Para que serve o Front-End?<\/h2>\n\n\n\n<p><span style=\"font-size: 14pt;\">Embora o <em>Front-End Developer<\/em> precisa cuidar da apar\u00eancia do site, espera-se que ele domine uma s\u00e9rie de tecnologias que podem passar despercebidas. S\u00e3o elas:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"font-size: 14pt;\"><strong>Marca\u00e7\u00e3o HTML<\/strong><\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-size: 14pt;\">Um <em>Front-End Developer<\/em> precisa dominar a parte sint\u00e1tica e sem\u00e2ntica do HTML em especial do HTML5, com os novos elementos, Header, Nav, Section, Article, Aside, Footer, Microdados.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">A maioria das pessoas acham um site pelos buscadores (leia-se google.com.br), logo um dos nossos principais objetivos \u00e9 possuir um site limpo, organizado e que tenha uma boa aceita\u00e7\u00e3o aos motores de buscas, a pr\u00e1tica de melhorar seu site para os motores de busca \u00e9 chamada de <em>Search Engine Optimization<\/em> (SEO).&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Um <em>Front-End developer<\/em> tem entre suas atribui\u00e7\u00f5es criar boas pr\u00e1ticas de SEO, al\u00e9m de deixar um <em>layout<\/em> leve e inovador.<\/span><br><span style=\"font-size: 14pt;\">Alguns sites na web mostram quais recursos do HTML5 n\u00f3s podemos utilizar nas vers\u00f5es atuais dos principais navegadores, veja por exemplo <a href=\"https:\/\/www.html5readiness.com\" target=\"_blank\" rel=\"noopener noreferrer\">www.html5readiness.com<\/a> , <a href=\"https:\/\/www.caniuse.com\" target=\"_blank\" rel=\"noopener noreferrer\">www.caniuse.com<\/a><\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"font-size: 14pt;\"><strong>Estiliza\u00e7\u00e3o CSS(CSS3)<\/strong><\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-size: 14pt;\">Dar significado ao conte\u00fado \u00e9 uma coisa, apresenta-lo como mencionamos de forma leve, inovadora \u00e9 outra. As folhas de estilo em cascata (<em>Cascading Style Sheets<\/em>) permitem que um conte\u00fado seja formatado da forma como voc\u00ea deseja, e \u00e9 um grande aliado a sua criatividade, uma vez que \u00e9 poss\u00edvel criar coisas inimagin\u00e1veis apenas com CSS e em especial CSS3.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Formata\u00e7\u00e3o de fontes, recursos de textos como colunas, novas formas de alinhamento, efeito nos blocos, anima\u00e7\u00f5es, transforma\u00e7\u00f5es, transi\u00e7\u00f5es e muito mais. Um <em>Front-End Developer<\/em> \u00e9 sem d\u00favida um profissional que domina essa linguagem de estiliza\u00e7\u00e3o.<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><span style=\"font-size: 14pt;\"><strong><em>Cross-Browser<\/em> e <em>Cross Device<\/em><\/strong><\/span><\/li><\/ul>\n\n\n\n<p><span style=\"font-size: 14pt;\">Qual \u00e9 uma das maiores virtudes do HTML5 e CSS3? A possibilidade de criar in\u00fameros recursos antes impensados realizar apenas com HTML, por exemplo acessar o hardware do dispositivo, criar anima\u00e7\u00f5es sem o uso de Flash.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><em>S\u00f3 um adendo: O HTML5 n\u00e3o \u00e9 um substituto do Flash! \u00c9 muito mais que isso, duas ou tr\u00eas das \u00e1reas do HTML5(Leia-se: Canvas, WebGL, CSS3 3D, Transform, Animation) podem realizar o que o Flash realiza, com a vantagem de ser nativo no navegador e rodar em qualquer dispositivo. Mas isso tamb\u00e9m \u00e9 um assunto para outro artigo, se voc\u00ea nunca ouviu falar de WebGL, Canvas, veja alguns exemplos, simples: <a href=\"https:\/\/goo.gl\/Jb905\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/goo.gl\/Jb905<\/a>&nbsp; use as setas do teclado, <a href=\"https:\/\/goo.gl\/HKdC3\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/goo.gl\/HKdC3<\/a> use o mouse.<\/em><\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Cross-Browser significa rodar em qualquer navegador e em qualquer vers\u00e3o de navegador, esse \u00e9 um dos maiores pesadelos que t\u00ednhamos no passado. T\u00ednhamos?<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Ou ainda temos, \u00e9 verdade que j\u00e1 foi pior, ter que fazer um site que rodasse no Chrome, Firefox, e in\u00fameras vers\u00f5es do Internet Explorer \u00e9 ainda a tarefa de muitos que est\u00e3o lendo este artigo, acredite somos solid\u00e1rios com seu sofrimento.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">No entanto hoje existem alguns recursos que permitem que voc\u00ea aplique uma tecnologia ao site, e caso o navegador n\u00e3o suporte tal tecnologia automaticamente fazemos um contorno, ou um <em>fallback<\/em>. Na Inglaterra existe uma argamassa ou massa corrida chamada Polycell de uma marca chamada Polyfilla.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">A ideia da massa corrida \u00e9 deixar uma parede lisinha sem buracos ou irregularidades, essa \u00e9 a ideia de um termo chamado PolyFill ou uma massa corrida para que os navegadores n\u00e3o se comportem de maneira estranha com alguns recursos que n\u00e3o suportam. Por exemplo o Modernizr.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Tamb\u00e9m est\u00e1 sendo criado uma nova iniciativa para padronizar a Web e torna-la mais organizada, evitando que navegadores tenham comportamentos t\u00e3o distinto quando da interpreta\u00e7\u00e3o dos elementos de um site. \u00c9 a Web platform <a href=\"https:\/\/www.webplatform.org\" target=\"_blank\" rel=\"noopener noreferrer\">www.webplatform.org<\/a> <a href=\"https:\/\/goo.gl\/M0972\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/goo.gl\/M0972<\/a><\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\"><em>Layout<\/em> Responsivo \u00e9 a ordem do dia,<em> Cross-Device<\/em> significa que o seu <em>app<\/em> ou site, pode rodas bem em qualquer dispositivo, o CSS3 e at\u00e9 vers\u00f5es anteriores tinham recursos que permitiam resolver a resolu\u00e7\u00e3o do usu\u00e1rios.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">S\u00e3o utilizado as \u201cmedia queries\u201d, mas ser responsivo envolve mais, por exemplo, se um usu\u00e1rio est\u00e1 acessando o seu site de um dispositivo m\u00f3vel, como um <em>smartphone<\/em>, talvez ele esteja na rua, ou num local longe de seu notebook ou desktop, ent\u00e3o al\u00e9m de alinhar o site para a resolu\u00e7\u00e3o ideal, ser\u00e1 que todas as informa\u00e7\u00f5es que temos num site comum ser\u00e3o necess\u00e1rias para algu\u00e9m que est\u00e1 usando um dispositivo de tela menor?<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Ser responsivo envolve pensar como o usu\u00e1rio que acessa de um dispositivo m\u00f3vel. Lembre-se nosso principal objetivo \u00e9 enriquecer a experi\u00eancia do usu\u00e1rio, e n\u00e3o torna-la um pesadelo.<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Outros termos s\u00e3o importantes para o <em>Front-End Developer<\/em>, tais como performance, Usabilidade, acessibilidade&nbsp;<em>( j\u00e1 tentou fazer uma experi\u00eancia de acessibilidade no seu computador? Tente desconectar o mouse, e utilizar um site, em especial se ele tiver aqueles light-box que congelam a tela e aparecem numa \u00e1rea fora do site comum.<\/em><\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como aprender Front-End?<\/h2>\n\n\n\n<p>A qualifica\u00e7\u00e3o mais importante para&nbsp;se tornar um desenvolvedor frontend \u00e9 a profici\u00eancia em HTML, CSS e JavaScript entre as principais habilidades. Sem saber codifica\u00e7\u00e3o, nada mais no seu curr\u00edculo importa.<\/p>\n\n\n\n<p>\u00c9 poss\u00edvel aprender por conta pr\u00f3pria, mas isso n\u00e3o significa que a educa\u00e7\u00e3o formal n\u00e3o importa. Muitas empresas preferem ou at\u00e9 mesmo exigem que o desenvolbvedor tenha um diploma.<\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">E o que a Impacta est\u00e1 fazendo para ajuda-lo a se tornar um <em>Front-End Developer?<\/em> Temos um Bootcamp para a forma\u00e7\u00e3o do <a href=\"https:\/\/impacta.com.br\/cursos\/bootcamp-front-end?gclid=Cj0KCQjwj7CZBhDHARIsAPPWv3fsmWp53UhRj9xq98ellLBjI1ECDuWt5cpK9RJC20NR1hreC7kcrUUaAsTZEALw_wcB\">Desenvolvedor<em> Front-End<\/em><\/a>, fique atento e se desejar poder\u00e1 nos enviar d\u00favidas sobre o assunto.&nbsp;<\/span><\/p>\n\n\n\n<p><span style=\"font-size: 14pt;\">Curtiu o post? Deixe seu coment\u00e1rio nos contando se o conte\u00fado foi relevante para voc\u00ea ou caso tenha ficado alguma d\u00favida!<\/span><\/p>\n<div class=\"sharing-default-minimal post-bottom\"><div class=\"nectar-social default\" data-position=\"\" data-rm-love=\"0\" data-color-override=\"override\"><div class=\"nectar-social-inner\"><a href=\"#\" class=\"nectar-love\" id=\"nectar-love-1882\" title=\"Love this\"> <i class=\"icon-salient-heart-2\"><\/i><span class=\"love-text\">Love<\/span><span class=\"total_loves\"><span class=\"nectar-love-count\">0<\/span><\/span><\/a><a class='facebook-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-facebook'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='twitter-share nectar-sharing' href='#' title='Share this'> <i class='fa icon-salient-x-twitter'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='linkedin-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-linkedin'><\/i> <span class='social-text'>Share<\/span> <\/a><a class='pinterest-share nectar-sharing' href='#' title='Pin this'> <i class='fa fa-pinterest'><\/i> <span class='social-text'>Pin<\/span> <\/a><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Neste artigo voc\u00ea entender\u00e1 em detalhes o que \u00e9 Front-End e qual \u00e9 a sua finalidade. Desde os prim\u00f3rdios da internet, um dos maiores desafios sem d\u00favida para os profissionais de web, foi e ainda \u00e9 criar sites que enrique\u00e7am a experi\u00eancia do usu\u00e1rio. Sem tempo para ler? Clique no play abaixo para ouvir o [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":17737,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,10,3],"tags":[90,91],"class_list":["post-1882","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-carreira","category-desenvolvimento","category-tecnologia","tag-desenvolvedor-front-end","tag-tecnologias"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>Front-End: o que \u00e9, para que serve e como aprender?<\/title>\r\n<meta name=\"description\" content=\"Muitas pessoas associam desenvolvedor de Front-End com um web, que domina linguagens de programa\u00e7\u00e3o, por\u00e9m \u00e9 aquele profissional que cuida do site.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/\" \/>\r\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"Front-End: o que \u00e9, para que serve e como aprender?\" \/>\r\n<meta property=\"og:description\" content=\"Muitas pessoas associam desenvolvedor de Front-End com um web, que domina linguagens de programa\u00e7\u00e3o, por\u00e9m \u00e9 aquele profissional que cuida do site.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/\" \/>\r\n<meta property=\"og:site_name\" content=\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\" \/>\r\n<meta property=\"article:published_time\" content=\"2022-09-23T00:51:00+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2023-10-31T17:51:26+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_frontend.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"850\" \/>\r\n\t<meta property=\"og:image:height\" content=\"283\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Glaucio Daniel\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Glaucio Daniel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/\",\"name\":\"Front-End: o que \u00e9, para que serve e como aprender?\",\"isPartOf\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_frontend.jpg\",\"datePublished\":\"2022-09-23T00:51:00+00:00\",\"dateModified\":\"2023-10-31T17:51:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/80a8c9d738747fe0675337bad157c792\"},\"description\":\"Muitas pessoas associam desenvolvedor de Front-End com um web, que domina linguagens de programa\u00e7\u00e3o, por\u00e9m \u00e9 aquele profissional que cuida do site.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#primaryimage\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_frontend.jpg\",\"contentUrl\":\"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_frontend.jpg\",\"width\":850,\"height\":283},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.impacta.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Front-End: o que \u00e9, para que serve e como aprender?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#website\",\"url\":\"https:\/\/www.impacta.com.br\/blog\/\",\"name\":\"Blog Impacta - Dicas e Not\u00edcias sobre Carreira\",\"description\":\"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/80a8c9d738747fe0675337bad157c792\",\"name\":\"Glaucio Daniel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6df0c1cfa0517bab0811cbb45c219e54?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6df0c1cfa0517bab0811cbb45c219e54?s=96&d=mm&r=g\",\"caption\":\"Glaucio Daniel\"},\"url\":\"https:\/\/www.impacta.com.br\/blog\/author\/glaucio-daniel\/\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Front-End: o que \u00e9, para que serve e como aprender?","description":"Muitas pessoas associam desenvolvedor de Front-End com um web, que domina linguagens de programa\u00e7\u00e3o, por\u00e9m \u00e9 aquele profissional que cuida do site.","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:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/","og_locale":"pt_BR","og_type":"article","og_title":"Front-End: o que \u00e9, para que serve e como aprender?","og_description":"Muitas pessoas associam desenvolvedor de Front-End com um web, que domina linguagens de programa\u00e7\u00e3o, por\u00e9m \u00e9 aquele profissional que cuida do site.","og_url":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/","og_site_name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","article_published_time":"2022-09-23T00:51:00+00:00","article_modified_time":"2023-10-31T17:51:26+00:00","og_image":[{"width":850,"height":283,"url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_frontend.jpg","type":"image\/jpeg"}],"author":"Glaucio Daniel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Glaucio Daniel","Est. reading time":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/","url":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/","name":"Front-End: o que \u00e9, para que serve e como aprender?","isPartOf":{"@id":"https:\/\/www.impacta.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#primaryimage"},"image":{"@id":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#primaryimage"},"thumbnailUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_frontend.jpg","datePublished":"2022-09-23T00:51:00+00:00","dateModified":"2023-10-31T17:51:26+00:00","author":{"@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/80a8c9d738747fe0675337bad157c792"},"description":"Muitas pessoas associam desenvolvedor de Front-End com um web, que domina linguagens de programa\u00e7\u00e3o, por\u00e9m \u00e9 aquele profissional que cuida do site.","breadcrumb":{"@id":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#primaryimage","url":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_frontend.jpg","contentUrl":"https:\/\/www.impacta.com.br\/blog\/wp-content\/uploads\/2020\/04\/header_frontend.jpg","width":850,"height":283},{"@type":"BreadcrumbList","@id":"https:\/\/www.impacta.com.br\/blog\/front-end-o-que-e-para-que-serve-e-como-aprender\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.impacta.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Front-End: o que \u00e9, para que serve e como aprender?"}]},{"@type":"WebSite","@id":"https:\/\/www.impacta.com.br\/blog\/#website","url":"https:\/\/www.impacta.com.br\/blog\/","name":"Blog Impacta - Dicas e Not\u00edcias sobre Carreira","description":"Dicas, Not\u00edcias e Conte\u00fados sobre Carreira, Tecnologia, Design, Gest\u00e3o e Marketing. Conhe\u00e7a e Acompanhe o Blog Impacta","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.impacta.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/80a8c9d738747fe0675337bad157c792","name":"Glaucio Daniel","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.impacta.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6df0c1cfa0517bab0811cbb45c219e54?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6df0c1cfa0517bab0811cbb45c219e54?s=96&d=mm&r=g","caption":"Glaucio Daniel"},"url":"https:\/\/www.impacta.com.br\/blog\/author\/glaucio-daniel\/"}]}},"acf":{"post_description":"","capa_mobile":false},"_links":{"self":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/1882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1882"}],"version-history":[{"count":1,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/1882\/revisions"}],"predecessor-version":[{"id":20749,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/posts\/1882\/revisions\/20749"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media\/17737"}],"wp:attachment":[{"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.impacta.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}