A seguir, vamos explicar com mais detalhes o que \u00e9 essa ferramenta, como ela funciona e como configur\u00e1-la e utiliz\u00e1-la hoje mesmo. Vamos conferir?<\/p>\n\n\n\n
O que \u00e9 Codepen?<\/strong><\/h2>\n\n\n\nCodePen<\/a> \u00e9 uma plataforma online que permite aos desenvolvedores criar, compartilhar e testar c\u00f3digo HTML, CSS e JavaScript<\/a>. \u00c9 uma ferramenta muito \u00fatil para aqueles que trabalham com desenvolvimento web, pois fornece uma maneira f\u00e1cil de experimentar e compartilhar pequenos trechos de c\u00f3digo.<\/p>\n\n\n\nAo criar um projeto no CodePen, voc\u00ea pode escrever c\u00f3digo em tr\u00eas \u00e1reas separadas, sendo elas HTML<\/strong>, CSS <\/strong>e JavaScript<\/strong>. H\u00e1 tamb\u00e9m um visualizador integrado que permite ver como o seu c\u00f3digo est\u00e1 sendo interpretado pelo navegador em tempo real. Isso \u00e9 \u00fatil para ver como o seu c\u00f3digo est\u00e1 se comportando e identificar erros rapidamente.<\/p>\n\n\n\nAl\u00e9m disso, ele tem uma s\u00e9rie de recursos colaborativos que tornam mais f\u00e1cil trabalhar em projetos com outros desenvolvedores. Voc\u00ea pode compartilhar seus projetos com outras pessoas atrav\u00e9s de links, permitindo que outros vejam o seu c\u00f3digo e fa\u00e7am altera\u00e7\u00f5es. <\/p>\n\n\n\n
Tamb\u00e9m \u00e9 poss\u00edvel usar o CodePen como uma plataforma para apresentar o seu trabalho a outras pessoas, pois os projetos criados podem ser facilmente compartilhados atrav\u00e9s de links.<\/p>\n\n\n\n
Ou seja, em resumo, o CodePen \u00e9 uma ferramenta \u00fatil para qualquer pessoa que trabalhe com desenvolvimento web, pois permite que voc\u00ea crie, teste e compartilhe c\u00f3digo de maneira r\u00e1pida e f\u00e1cil.<\/p>\n\n\n\n
Vantagens de utilizar CodePen<\/strong><\/h3>\n\n\n\nO CodePen \u00e9 uma ferramenta muito popular entre os desenvolvedores, e estima-se que ele tenha quase 15 milh\u00f5es de visitas todos os meses. Uma grande raz\u00e3o para isso s\u00e3o as vantagens que a ferramenta oferece.<\/p>\n\n\n\n
A primeira delas \u00e9 a facilidade no uso<\/strong>, j\u00e1 que a sua interface \u00e9 completamente intuitiva<\/a>, e permite que usu\u00e1rio escreva e execute o c\u00f3digo sem nenhuma dificuldade. Al\u00e9m disso, ele permite experimentar novas ideias rapidamente<\/strong>, gra\u00e7as \u00e0 agilidade no seu funcionamento.<\/p>\n\n\n\nCom rela\u00e7\u00e3o a recursos \u00fateis, o CodePen apresenta uma grande variedade<\/strong>, como um visualizador integrado que permite ver como o seu c\u00f3digo est\u00e1 sendo interpretado pelo navegador em tempo real.<\/p>\n\n\n\nOutra vantagem importante para os profissionais de tecnologia \u00e9 a facilidade na colabora\u00e7\u00e3o<\/strong>. O CodePen tem v\u00e1rios recursos colaborativos que tornam mais f\u00e1cil trabalhar em projetos com outros desenvolvedores.<\/p>\n\n\n\nPor isso, os projetos criados podem ser compartilhados por meio de links, o que os torna \u00fateis para mostrar o seu trabalho a outras pessoas, dentro e fora da sua equipe.<\/p>\n\n\n\n
Como mencionamos, a ferramenta tamb\u00e9m tem uma ampla comunidade de usu\u00e1rios <\/strong>ativa, que compartilham seus projetos. Dessa forma, voc\u00ea pode aprender com projetos reais, e tamb\u00e9m pode tirar d\u00favidas com facilidade quando necess\u00e1rio.<\/p>\n\n\n\nPor fim, voc\u00ea poder\u00e1 criar projetos de exemplo que ilustram como um determinado c\u00f3digo funciona. Isso pode ser \u00fatil para apresentar suas habilidades para outras pessoas ou para explicar esse funcionamento.<\/p>\n\n\n\n
<\/strong>Funcionalidades do CodePen<\/strong><\/h3>\n\n\n\nAo acessar o CodePen, voc\u00ea ver\u00e1 que h\u00e1 diferentes funcionalidades. Explicamos cada uma delas:<\/p>\n\n\n\n
Search Pens<\/strong><\/h4>\n\n\n\nO recurso de pesquisa de pens\u00f5es no CodePen permite que voc\u00ea encontre pens\u00f5es espec\u00edficas criadas por outros usu\u00e1rios da plataforma. Para usar a pesquisa de pens\u00f5es, siga estas etapas:<\/p>\n\n\n\n
\n- Acesse o site do CodePen (https:\/\/codepen.io<\/a>) e clique em “Pesquisar” na parte superior da p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n
\n- Digite as palavras-chave relevantes para o que voc\u00ea est\u00e1 procurando na caixa de pesquisa. Por exemplo, se voc\u00ea estiver procurando por pens\u00f5es relacionadas a anima\u00e7\u00f5es CSS, pode digitar “animation CSS” na caixa de pesquisa.<\/li>\n<\/ul>\n\n\n\n
\n- Clique em “Pesquisar” para iniciar a pesquisa.<\/li>\n<\/ul>\n\n\n\n
Os resultados da pesquisa ser\u00e3o exibidos em uma p\u00e1gina separada. Voc\u00ea pode navegar pelos resultados da pesquisa usando as op\u00e7\u00f5es de filtro na lateral esquerda da p\u00e1gina. Por exemplo, voc\u00ea pode filtrar os resultados por linguagem de programa\u00e7\u00e3o ou por popularidade.<\/p>\n\n\n\n
Quando encontrar uma pens\u00e3o que deseja visualizar, basta clicar no t\u00edtulo da pens\u00e3o para abri-la. Voc\u00ea pode ver o c\u00f3digo fonte da pens\u00e3o e visualiz\u00e1-la no visualizador integrado do CodePen.<\/p>\n\n\n\n
Challenges <\/strong><\/h4>\n\n\n\nO recurso de desafios do CodePen permite que os usu\u00e1rios criem e participem de desafios relacionados ao desenvolvimento web. Cada desafio tem uma descri\u00e7\u00e3o e um conjunto de regras espec\u00edficas que os participantes devem seguir.<\/p>\n\n\n\n
Para participar de um desafio, basta criar uma nova pens\u00e3o no CodePen e seguir as regras do desafio. Voc\u00ea pode usar qualquer linguagem de programa\u00e7\u00e3o ou recurso que desejar, desde que esteja de acordo com as regras do desafio. Depois de criar sua pens\u00e3o, basta envi\u00e1-la para o desafio clicando em “Enviar para o Desafio” na parte superior da p\u00e1gina.<\/p>\n\n\n\n
Os desafios podem ter diferentes temas e categorias, como design, anima\u00e7\u00e3o ou programa\u00e7\u00e3o. Alguns desafios s\u00e3o organizados por organiza\u00e7\u00f5es ou empresas, enquanto outros s\u00e3o criados por usu\u00e1rios da plataforma.<\/p>\n\n\n\n
Ao participar de um desafio, voc\u00ea pode aprender novas habilidades, colaborar com outros desenvolvedores e mostrar o seu trabalho a uma ampla audi\u00eancia. O CodePen tem uma ampla comunidade de usu\u00e1rios que participam ativamente de desafios e oferecem feedback e suporte.<\/p>\n\n\n\n
Spark<\/strong><\/h4>\n\n\n\nSpark \u00e9 um recurso do CodePen que permite que os usu\u00e1rios criem pequenos projetos usando HTML, CSS e JavaScript<\/a>. Os projetos criados com Spark s\u00e3o conhecidos como “fa\u00edscas”.<\/p>\n\n\n\nPara criar uma fa\u00edsca, basta acessar o site do CodePen (https:\/\/codepen.io<\/a>) e clicar em “Criar uma Fa\u00edsca” na parte superior da p\u00e1gina. Isso abrir\u00e1 uma nova janela com tr\u00eas \u00e1reas de texto para escrever c\u00f3digo HTML, CSS e JavaScript. Voc\u00ea pode escrever o seu c\u00f3digo nas \u00e1reas de texto correspondentes e clicar em “Executar” para visualizar o resultado.<\/p>\n\n\n\nAs fa\u00edscas s\u00e3o \u00fateis para criar pequenos projetos de exemplo ou experimentar novas ideias rapidamente. Elas tamb\u00e9m s\u00e3o f\u00e1ceis de compartilhar com outras pessoas atrav\u00e9s de links.<\/p>\n\n\n\n
Ao criar uma fa\u00edsca, voc\u00ea pode escolher se quer que ela seja p\u00fablica ou privada. As fa\u00edscas p\u00fablicas podem ser vistas por qualquer pessoa e s\u00e3o indexadas nos resultados de pesquisa do CodePen. As fa\u00edscas privadas s\u00f3 podem ser vistas por voc\u00ea e por quem voc\u00ea compartilhar o link.<\/p>\n\n\n\n
xemplo do CodePen na pr\u00e1tica<\/strong><\/h2>\n\n\n\nA utiliza\u00e7\u00e3o do CodePen \u00e9 t\u00e3o simples quanto seu conceito, e se voc\u00ea tiver conhecimentos sobre HTML, CSS e Javascript, n\u00e3o ter\u00e1 dificuldades em acessar a ferramenta e manipul\u00e1-la. Pensando nisso, que tal conhecer um exemplo pr\u00e1tico?<\/p>\n\n\n\n
Suponha que voc\u00ea queira criar um pequeno projeto que exibe uma lista de frutas em uma p\u00e1gina HTML. Voc\u00ea pode usar o CodePen para escrever o c\u00f3digo HTML, CSS e JavaScript necess\u00e1rio para exibir a lista. Primeiro, voc\u00ea criaria uma nova “pens\u00e3o” no CodePen e escreveria o seguinte c\u00f3digo HTML:<\/p>\n\n\n\n![\"Exemplo](\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica.png\")
<\/figure>\n\n\n\nEm seguida, voc\u00ea pode escrever algum c\u00f3digo CSS para estilizar a lista:<\/p>\n\n\n\n![\"\"](\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica-estilizar-list.png\")
<\/figure>\n\n\n\nPor fim, voc\u00ea pode adicionar algum c\u00f3digo JavaScript para adicionar uma funcionalidade de clique \u00e0 lista:<\/p>\n\n\n\n![\"\"](\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica-funcionalidades.png\")
<\/figure>\n\n\n\nQuando voc\u00ea executar o c\u00f3digo, ver\u00e1 uma p\u00e1gina HTML com uma lista de frutas estilizada e com a funcionalidade de clique. Voc\u00ea pode compartilhar o projeto com outras pessoas atrav\u00e9s de um link ou salv\u00e1-lo para uso posterior.<\/p>\n\n\n\n
Esse \u00e9 apenas um exemplo simples de como o CodePen pode ser usado. Ele pode ser empregado para criar projetos muito mais complexos e pode ser \u00fatil para qualquer pessoa que trabalhe com desenvolvimento web.<\/p>\n\n\n\n
Como configurar o CodePen<\/strong><\/h2>\n\n\n\nAntes de come\u00e7ar a utilizar o CodePen na cria\u00e7\u00e3o dos seus c\u00f3digos, \u00e9 importante configur\u00e1-lo. Para isso, siga estas etapas:<\/p>\n\n\n\n
\n- Acesse o site do CodePen (https:\/\/codepen.io\/<\/a>) e clique em “Cadastrar” na parte superior da p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n
\n- Insira seu nome de usu\u00e1rio, endere\u00e7o de email e senha desejados e clique em “Cadastrar”.<\/li>\n<\/ul>\n\n\n\n
\n- Verifique seu email e clique no link de verifica\u00e7\u00e3o fornecido para ativar sua conta.<\/li>\n<\/ul>\n\n\n\n
\n- Ap\u00f3s a ativa\u00e7\u00e3o da conta, voc\u00ea ser\u00e1 redirecionado de volta para o CodePen e poder\u00e1 come\u00e7ar a criar suas pr\u00f3prias pens\u00f5es.<\/li>\n<\/ul>\n\n\n\n
\n- Para criar uma nova pens\u00e3o, clique em “Novo Pen” na parte superior da p\u00e1gina. Isso abrir\u00e1 uma nova janela com tr\u00eas \u00e1reas de texto para escrever c\u00f3digo HTML, CSS e JavaScript.<\/li>\n<\/ul>\n\n\n\n
\n- Escreva o seu c\u00f3digo nas \u00e1reas de texto correspondentes e clique em “Executar” para visualizar o resultado.<\/li>\n<\/ul>\n\n\n\n
\n- Se desejar, voc\u00ea tamb\u00e9m pode clicar em “Salvar” para salvar sua pens\u00e3o para uso posterior ou compartilh\u00e1-la com outras pessoas<\/li>\n<\/ul>\n\n\n\n
Aprenda Programa\u00e7\u00e3o com a Awari<\/strong><\/h2>\n\n\n\nO CodePen \u00e9 apenas uma das ferramentas utilizadas por profissionais de tecnologia. Ao estudar Programa\u00e7\u00e3o na Awari<\/strong><\/a>, aprender\u00e1 sobre as principais ferramentas, linguagens e frameworks utilizadas no mercado de desenvolvimento.<\/p>\n\n\n\nAl\u00e9m disso, a Awari ainda oferece uma plataforma completa de aprendizado, com aulas ao vivo, atividades, materiais complementares e uma comunidade exclusiva para fortalecer seu networking. Outro recurso \u00e9 a possibilidade de agendar mentorias individuais<\/a> com profissionais especialistas em diversas \u00e1reas.\u00a0
Para saber mais sobre os cursos de Programa\u00e7\u00e3o e sobre os benef\u00edcios da plataforma da Awari, clique aqui<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"O CodePen \u00e9 uma plataforma online popular entre os desenvolvedores web, pois oferece uma maneira f\u00e1cil de experimentar e compartilhar c\u00f3digo HTML, CSS e JavaScript. Ele tem uma interface de usu\u00e1rio intuitiva e um visualizador integrado que permite ver como o seu c\u00f3digo est\u00e1 sendo interpretado pelo navegador em tempo real. Al\u00e9m disso, o CodePen […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-118200","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\n
Acelerando seu aprendizado de programa\u00e7\u00e3o com a plataforma Codepen - Fluency.io Brasil<\/title>\n<meta name=\"description\" content=\"O CodePen \u00e9 uma plataforma online popular entre os desenvolvedores web, pois oferece uma maneira f\u00e1cil de experimentar e compartilhar c\u00f3digo HTML, CSS e Ja...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Acelerando seu aprendizado de programa\u00e7\u00e3o com a plataforma Codepen - Fluency.io Brasil\" \/>\n<meta property=\"og:description\" content=\"O CodePen \u00e9 uma plataforma online popular entre os desenvolvedores web, pois oferece uma maneira f\u00e1cil de experimentar e compartilhar c\u00f3digo HTML, CSS e Ja...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/\" \/>\n<meta property=\"og:site_name\" content=\"Fluency.io Brasil\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-03T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-01T18:07:11+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"kaue\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/\",\"url\":\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/\",\"name\":\"Acelerando seu aprendizado de programa\u00e7\u00e3o com a plataforma Codepen - Fluency.io Brasil\",\"isPartOf\":{\"@id\":\"https:\/\/fluency.io\/br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica.png\",\"datePublished\":\"2023-01-03T11:00:00+00:00\",\"dateModified\":\"2023-08-01T18:07:11+00:00\",\"author\":{\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\"},\"description\":\"O CodePen \u00e9 uma plataforma online popular entre os desenvolvedores web, pois oferece uma maneira f\u00e1cil de experimentar e compartilhar c\u00f3digo HTML, CSS e Ja...\",\"breadcrumb\":{\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#primaryimage\",\"url\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica.png\",\"contentUrl\":\"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/homolog.fluency.io\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Acelerando seu aprendizado de programa\u00e7\u00e3o com a plataforma Codepen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fluency.io\/br\/#website\",\"url\":\"https:\/\/fluency.io\/br\/\",\"name\":\"Fluency.io Brasil\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fluency.io\/br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a\",\"name\":\"kaue\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g\",\"caption\":\"kaue\"},\"url\":\"https:\/\/homolog.fluency.io\/br\/author\/kaue\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Acelerando seu aprendizado de programa\u00e7\u00e3o com a plataforma Codepen - Fluency.io Brasil","description":"O CodePen \u00e9 uma plataforma online popular entre os desenvolvedores web, pois oferece uma maneira f\u00e1cil de experimentar e compartilhar c\u00f3digo HTML, CSS e Ja...","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:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/","og_locale":"pt_BR","og_type":"article","og_title":"Acelerando seu aprendizado de programa\u00e7\u00e3o com a plataforma Codepen - Fluency.io Brasil","og_description":"O CodePen \u00e9 uma plataforma online popular entre os desenvolvedores web, pois oferece uma maneira f\u00e1cil de experimentar e compartilhar c\u00f3digo HTML, CSS e Ja...","og_url":"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/","og_site_name":"Fluency.io Brasil","article_published_time":"2023-01-03T11:00:00+00:00","article_modified_time":"2023-08-01T18:07:11+00:00","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"kaue","Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/","url":"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/","name":"Acelerando seu aprendizado de programa\u00e7\u00e3o com a plataforma Codepen - Fluency.io Brasil","isPartOf":{"@id":"https:\/\/fluency.io\/br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#primaryimage"},"image":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#primaryimage"},"thumbnailUrl":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica.png","datePublished":"2023-01-03T11:00:00+00:00","dateModified":"2023-08-01T18:07:11+00:00","author":{"@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a"},"description":"O CodePen \u00e9 uma plataforma online popular entre os desenvolvedores web, pois oferece uma maneira f\u00e1cil de experimentar e compartilhar c\u00f3digo HTML, CSS e Ja...","breadcrumb":{"@id":"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#primaryimage","url":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica.png","contentUrl":"https:\/\/fluency.io\/br\/blog\/wp-content\/uploads\/2023\/01\/Exemplo-do-CodePen-na-pratica.png"},{"@type":"BreadcrumbList","@id":"https:\/\/homolog.fluency.io\/br\/blog\/plataforma-codepen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/homolog.fluency.io\/br\/"},{"@type":"ListItem","position":2,"name":"Acelerando seu aprendizado de programa\u00e7\u00e3o com a plataforma Codepen"}]},{"@type":"WebSite","@id":"https:\/\/fluency.io\/br\/#website","url":"https:\/\/fluency.io\/br\/","name":"Fluency.io Brasil","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fluency.io\/br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/7b3b2b50ba17b7f2ad0cce0a40bfa00a","name":"kaue","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/fluency.io\/br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bdd3958fa53019cfd8f789c0a49a730e7ba40a1d20cb42c9ced7646285842479?s=96&d=mm&r=g","caption":"kaue"},"url":"https:\/\/homolog.fluency.io\/br\/author\/kaue\/"}]}},"_links":{"self":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/comments?post=118200"}],"version-history":[{"count":0,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/posts\/118200\/revisions"}],"wp:attachment":[{"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/media?parent=118200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/categories?post=118200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/tags?post=118200"},{"taxonomy":"format","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/format?post=118200"},{"taxonomy":"trilha","embeddable":true,"href":"https:\/\/homolog.fluency.io\/br\/wp-json\/wp\/v2\/trilha?post=118200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Ao criar um projeto no CodePen, voc\u00ea pode escrever c\u00f3digo em tr\u00eas \u00e1reas separadas, sendo elas HTML<\/strong>, CSS <\/strong>e JavaScript<\/strong>. H\u00e1 tamb\u00e9m um visualizador integrado que permite ver como o seu c\u00f3digo est\u00e1 sendo interpretado pelo navegador em tempo real. Isso \u00e9 \u00fatil para ver como o seu c\u00f3digo est\u00e1 se comportando e identificar erros rapidamente.<\/p>\n\n\n\n Al\u00e9m disso, ele tem uma s\u00e9rie de recursos colaborativos que tornam mais f\u00e1cil trabalhar em projetos com outros desenvolvedores. Voc\u00ea pode compartilhar seus projetos com outras pessoas atrav\u00e9s de links, permitindo que outros vejam o seu c\u00f3digo e fa\u00e7am altera\u00e7\u00f5es. <\/p>\n\n\n\n Tamb\u00e9m \u00e9 poss\u00edvel usar o CodePen como uma plataforma para apresentar o seu trabalho a outras pessoas, pois os projetos criados podem ser facilmente compartilhados atrav\u00e9s de links.<\/p>\n\n\n\n Ou seja, em resumo, o CodePen \u00e9 uma ferramenta \u00fatil para qualquer pessoa que trabalhe com desenvolvimento web, pois permite que voc\u00ea crie, teste e compartilhe c\u00f3digo de maneira r\u00e1pida e f\u00e1cil.<\/p>\n\n\n\n O CodePen \u00e9 uma ferramenta muito popular entre os desenvolvedores, e estima-se que ele tenha quase 15 milh\u00f5es de visitas todos os meses. Uma grande raz\u00e3o para isso s\u00e3o as vantagens que a ferramenta oferece.<\/p>\n\n\n\n A primeira delas \u00e9 a facilidade no uso<\/strong>, j\u00e1 que a sua interface \u00e9 completamente intuitiva<\/a>, e permite que usu\u00e1rio escreva e execute o c\u00f3digo sem nenhuma dificuldade. Al\u00e9m disso, ele permite experimentar novas ideias rapidamente<\/strong>, gra\u00e7as \u00e0 agilidade no seu funcionamento.<\/p>\n\n\n\n Com rela\u00e7\u00e3o a recursos \u00fateis, o CodePen apresenta uma grande variedade<\/strong>, como um visualizador integrado que permite ver como o seu c\u00f3digo est\u00e1 sendo interpretado pelo navegador em tempo real.<\/p>\n\n\n\n Outra vantagem importante para os profissionais de tecnologia \u00e9 a facilidade na colabora\u00e7\u00e3o<\/strong>. O CodePen tem v\u00e1rios recursos colaborativos que tornam mais f\u00e1cil trabalhar em projetos com outros desenvolvedores.<\/p>\n\n\n\n Por isso, os projetos criados podem ser compartilhados por meio de links, o que os torna \u00fateis para mostrar o seu trabalho a outras pessoas, dentro e fora da sua equipe.<\/p>\n\n\n\n Como mencionamos, a ferramenta tamb\u00e9m tem uma ampla comunidade de usu\u00e1rios <\/strong>ativa, que compartilham seus projetos. Dessa forma, voc\u00ea pode aprender com projetos reais, e tamb\u00e9m pode tirar d\u00favidas com facilidade quando necess\u00e1rio.<\/p>\n\n\n\n Por fim, voc\u00ea poder\u00e1 criar projetos de exemplo que ilustram como um determinado c\u00f3digo funciona. Isso pode ser \u00fatil para apresentar suas habilidades para outras pessoas ou para explicar esse funcionamento.<\/p>\n\n\n\n Ao acessar o CodePen, voc\u00ea ver\u00e1 que h\u00e1 diferentes funcionalidades. Explicamos cada uma delas:<\/p>\n\n\n\n O recurso de pesquisa de pens\u00f5es no CodePen permite que voc\u00ea encontre pens\u00f5es espec\u00edficas criadas por outros usu\u00e1rios da plataforma. Para usar a pesquisa de pens\u00f5es, siga estas etapas:<\/p>\n\n\n\n Os resultados da pesquisa ser\u00e3o exibidos em uma p\u00e1gina separada. Voc\u00ea pode navegar pelos resultados da pesquisa usando as op\u00e7\u00f5es de filtro na lateral esquerda da p\u00e1gina. Por exemplo, voc\u00ea pode filtrar os resultados por linguagem de programa\u00e7\u00e3o ou por popularidade.<\/p>\n\n\n\n Quando encontrar uma pens\u00e3o que deseja visualizar, basta clicar no t\u00edtulo da pens\u00e3o para abri-la. Voc\u00ea pode ver o c\u00f3digo fonte da pens\u00e3o e visualiz\u00e1-la no visualizador integrado do CodePen.<\/p>\n\n\n\n O recurso de desafios do CodePen permite que os usu\u00e1rios criem e participem de desafios relacionados ao desenvolvimento web. Cada desafio tem uma descri\u00e7\u00e3o e um conjunto de regras espec\u00edficas que os participantes devem seguir.<\/p>\n\n\n\n Para participar de um desafio, basta criar uma nova pens\u00e3o no CodePen e seguir as regras do desafio. Voc\u00ea pode usar qualquer linguagem de programa\u00e7\u00e3o ou recurso que desejar, desde que esteja de acordo com as regras do desafio. Depois de criar sua pens\u00e3o, basta envi\u00e1-la para o desafio clicando em “Enviar para o Desafio” na parte superior da p\u00e1gina.<\/p>\n\n\n\n Os desafios podem ter diferentes temas e categorias, como design, anima\u00e7\u00e3o ou programa\u00e7\u00e3o. Alguns desafios s\u00e3o organizados por organiza\u00e7\u00f5es ou empresas, enquanto outros s\u00e3o criados por usu\u00e1rios da plataforma.<\/p>\n\n\n\n Ao participar de um desafio, voc\u00ea pode aprender novas habilidades, colaborar com outros desenvolvedores e mostrar o seu trabalho a uma ampla audi\u00eancia. O CodePen tem uma ampla comunidade de usu\u00e1rios que participam ativamente de desafios e oferecem feedback e suporte.<\/p>\n\n\n\n Spark \u00e9 um recurso do CodePen que permite que os usu\u00e1rios criem pequenos projetos usando HTML, CSS e JavaScript<\/a>. Os projetos criados com Spark s\u00e3o conhecidos como “fa\u00edscas”.<\/p>\n\n\n\n Para criar uma fa\u00edsca, basta acessar o site do CodePen (https:\/\/codepen.io<\/a>) e clicar em “Criar uma Fa\u00edsca” na parte superior da p\u00e1gina. Isso abrir\u00e1 uma nova janela com tr\u00eas \u00e1reas de texto para escrever c\u00f3digo HTML, CSS e JavaScript. Voc\u00ea pode escrever o seu c\u00f3digo nas \u00e1reas de texto correspondentes e clicar em “Executar” para visualizar o resultado.<\/p>\n\n\n\n As fa\u00edscas s\u00e3o \u00fateis para criar pequenos projetos de exemplo ou experimentar novas ideias rapidamente. Elas tamb\u00e9m s\u00e3o f\u00e1ceis de compartilhar com outras pessoas atrav\u00e9s de links.<\/p>\n\n\n\n Ao criar uma fa\u00edsca, voc\u00ea pode escolher se quer que ela seja p\u00fablica ou privada. As fa\u00edscas p\u00fablicas podem ser vistas por qualquer pessoa e s\u00e3o indexadas nos resultados de pesquisa do CodePen. As fa\u00edscas privadas s\u00f3 podem ser vistas por voc\u00ea e por quem voc\u00ea compartilhar o link.<\/p>\n\n\n\n A utiliza\u00e7\u00e3o do CodePen \u00e9 t\u00e3o simples quanto seu conceito, e se voc\u00ea tiver conhecimentos sobre HTML, CSS e Javascript, n\u00e3o ter\u00e1 dificuldades em acessar a ferramenta e manipul\u00e1-la. Pensando nisso, que tal conhecer um exemplo pr\u00e1tico?<\/p>\n\n\n\n Suponha que voc\u00ea queira criar um pequeno projeto que exibe uma lista de frutas em uma p\u00e1gina HTML. Voc\u00ea pode usar o CodePen para escrever o c\u00f3digo HTML, CSS e JavaScript necess\u00e1rio para exibir a lista. Primeiro, voc\u00ea criaria uma nova “pens\u00e3o” no CodePen e escreveria o seguinte c\u00f3digo HTML:<\/p>\n\n\n\n Em seguida, voc\u00ea pode escrever algum c\u00f3digo CSS para estilizar a lista:<\/p>\n\n\n\n Por fim, voc\u00ea pode adicionar algum c\u00f3digo JavaScript para adicionar uma funcionalidade de clique \u00e0 lista:<\/p>\n\n\n\n Quando voc\u00ea executar o c\u00f3digo, ver\u00e1 uma p\u00e1gina HTML com uma lista de frutas estilizada e com a funcionalidade de clique. Voc\u00ea pode compartilhar o projeto com outras pessoas atrav\u00e9s de um link ou salv\u00e1-lo para uso posterior.<\/p>\n\n\n\n Esse \u00e9 apenas um exemplo simples de como o CodePen pode ser usado. Ele pode ser empregado para criar projetos muito mais complexos e pode ser \u00fatil para qualquer pessoa que trabalhe com desenvolvimento web.<\/p>\n\n\n\n Antes de come\u00e7ar a utilizar o CodePen na cria\u00e7\u00e3o dos seus c\u00f3digos, \u00e9 importante configur\u00e1-lo. Para isso, siga estas etapas:<\/p>\n\n\n\n O CodePen \u00e9 apenas uma das ferramentas utilizadas por profissionais de tecnologia. Ao estudar Programa\u00e7\u00e3o na Awari<\/strong><\/a>, aprender\u00e1 sobre as principais ferramentas, linguagens e frameworks utilizadas no mercado de desenvolvimento.<\/p>\n\n\n\n Al\u00e9m disso, a Awari ainda oferece uma plataforma completa de aprendizado, com aulas ao vivo, atividades, materiais complementares e uma comunidade exclusiva para fortalecer seu networking. Outro recurso \u00e9 a possibilidade de agendar mentorias individuais<\/a> com profissionais especialistas em diversas \u00e1reas.\u00a0 O CodePen \u00e9 uma plataforma online popular entre os desenvolvedores web, pois oferece uma maneira f\u00e1cil de experimentar e compartilhar c\u00f3digo HTML, CSS e JavaScript. Ele tem uma interface de usu\u00e1rio intuitiva e um visualizador integrado que permite ver como o seu c\u00f3digo est\u00e1 sendo interpretado pelo navegador em tempo real. Al\u00e9m disso, o CodePen […]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":[186],"meta":{"inline_featured_image":false,"footnotes":""},"categories":[229],"tags":[],"trilha":[],"class_list":["post-118200","post","type-post","status-publish","format-standard","hentry","category-skills","format-artigos"],"acf":[],"yoast_head":"\nVantagens de utilizar CodePen<\/strong><\/h3>\n\n\n\n
<\/strong>Funcionalidades do CodePen<\/strong><\/h3>\n\n\n\n
Search Pens<\/strong><\/h4>\n\n\n\n
\n
\n
\n
Challenges <\/strong><\/h4>\n\n\n\n
Spark<\/strong><\/h4>\n\n\n\n
xemplo do CodePen na pr\u00e1tica<\/strong><\/h2>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\nComo configurar o CodePen<\/strong><\/h2>\n\n\n\n
\n
\n
\n
\n
\n
\n
\n
Aprenda Programa\u00e7\u00e3o com a Awari<\/strong><\/h2>\n\n\n\n
Para saber mais sobre os cursos de Programa\u00e7\u00e3o e sobre os benef\u00edcios da plataforma da Awari, clique aqui<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"