Durante os “7 Days de HTML e CSS” da 7 Days of Code, uma iniciativa da Alura, os participantes explorarĂŁo a essĂȘncia do Front-end. Embora a teoria seja crucial, a prĂĄtica desempenha um papel essencial na consolidação dos conhecimentos.
No decorrer, propĂ”e-se um desafio: replicar a pĂĄgina de perfil do LinkedIn. Desde conceitos bĂĄsicos, como ‘div’, ‘section’ e medidas responsivas em CSS, atĂ© tĂ©cnicas mais avançadas, como Flexbox, Grid e outros fundamentais para aqueles que estĂŁo iniciando no universo do Front-end.
Após 7 dias de pråtica consecutiva, a memorização da sintaxe das tags e a compreensão de suas funcionalidades deixarão de ser obståculos, permitindo que os participantes concentrem sua energia em solucionar problemas de forma mais eficiente. Preparem-se para a transformação!
7 Days of Code de HTML e CSS
Durante os “7 Days de HTML e CSS” da 7 Days of Code, os participantes terĂŁo a oportunidade de praticar a essĂȘncia do Front-end, explorando a importĂąncia da aplicação prĂĄtica para solidificar conhecimentos.
Replicando o Layout do LinkedIn: Um Projeto Desafiador
A proposta envolve a criação de uma rĂ©plica da pĂĄgina de perfil do LinkedIn. Desde conceitos bĂĄsicos como ‘div’ e ‘section’ atĂ© tĂ©cnicas avançadas como Flexbox e Grid, os participantes serĂŁo guiados na construção de um projeto sĂłlido.
Desenvolvendo Habilidades Essenciais para Front-end
Os participantes utilizarão conceitos fundamentais, como medidas responsivas em CSS, e explorarão elementos mais avançados para construir uma base sólida no Front-end. Flexbox, Grid e outras técnicas serão abordadas, essenciais para quem ingressa nessa årea.
7 Dias de PrĂĄtica Intensiva: Superando Desafios
Ao praticar esses conceitos por 7 dias consecutivos, os participantes superarão desafios, tornando a memorização da sintaxe das tags uma habilidade natural e permitindo uma maior concentração na resolução de problemas.
ConteĂșdo do Desafio
- Dia 1: JĂĄ no primeiro dia, vocĂȘ vai ser apresentado com o layout de uma pĂĄgina no Figma, analisĂĄ-lo e usĂĄ-lo para criar a seção de informaçÔes principais do perfil, que contĂ©m a imagem de capa, a foto de perfil, nome, tĂtulo, informaçÔes de contato, informaçÔes da carreira e, no final da seção, botĂ”es de ação.
- Dia 2: Aqui vocĂȘ desenvolverĂĄ o menu de navegação, tambĂ©m conhecido como Navbar. Nessa seção, vocĂȘ terĂĄ a logo do LinkedI, uma barra de pesquisa e um conjunto de links levando para outras ĂĄreas da rede social.
- Dia 3: Nesse dia vocĂȘ vai precisar trabalhar bastante com alinhamento no CSS, e conhecimentos de Flexbox ou Grid vĂŁo facilitar muito a sua vida! A seção se chama ‘PublicaçÔes em Destaque’ e contĂ©m trĂȘs cards lado a lado, todos com certos itens visuais.
- Dia 4: Nesse dia vocĂȘ irĂĄ implementar duas partes da tela hoje: a seção de ‘Atividades recentes’, que contĂ©m texto, imagens e linhas divisĂłrias, e a seção ‘Sobre’.
- Dia 5: Esse serĂĄ provavelmente o desafio mais importante, pois vocĂȘ desenvolverĂĄ a seção de ‘ExperiĂȘncias’, provavelmente a mais relevante da da pĂĄgina. Ela contĂ©m diferentes grupos de blocos agrupados e diversas informaçÔes sobre as experiĂȘncias de emprego passadas da pessoa.
- Dia 6: Chegando quase no final, vocĂȘ desenvolverĂĄ as seçÔes de ‘Formação acadĂȘmica’ e ‘Idiomas’, que sĂŁo bem parecidas com algumas das seçÔes desenvolvidas anteriormente.
- Dia 7: No sĂ©timo e Ășltimo dia do desafio, vocĂȘ criarĂĄ duas seçÔes bem parecidas, que vamos chamar de seçÔes de sugestĂ”es de perfis. A primeira se chama ‘As pessoas tambĂ©m viram’ e a segunda ‘Pessoas que talvez vocĂȘ conheça’. Elas possuem um formato um pouco diferente e vĂĄrios botĂ”es. VocĂȘ poderĂĄ publicar a sua pĂĄgina gratuitamente na internet, para que outras pessoas possam acessĂĄ-la e ela sirva como portfĂłlio para vocĂȘ. VocĂȘ irĂĄ fechar com chave de ouro!
7 Desafios em 7 Dias para Desenvolver seu PortfĂłlio
O programa oferece uma jornada de 7 desafios em 7 dias, incentivando o desenvolvimento do portfĂłlio e do GitHub. Criado por profissionais do mercado, o curso proporciona uma imersĂŁo prĂĄtica no mundo do Front-end.
Quem Vai Te Desafiar? Conheça Natålia F. Dev
Natålia F. Dev, uma desenvolvedora Front-end, iniciou sua carreira dando aulas de computação para crianças. Apaixonada por aprendizado, ela compartilha seu conhecimento no YouTube e LinkedIn, com um foco especial em CSS.
Para Quem Ă© o Programa?
Destinado a quem tem interesse em tecnologia e programação, o curso atende aqueles que buscam praticar habilidades demandadas pelo mercado de trabalho. InscriçÔes abertas para mĂșltiplas tecnologias, a partir do momento da inscrição, os participantes receberĂŁo um e-mail diĂĄrio com dicas prĂĄticas.
Crie Projetos e Aprimore seu PortfĂłlio
Ao final dos 7 dias, os participantes terĂŁo criado projetos tangĂveis, prontos para integrar em seus portfĂłlios e demonstrar suas habilidades. Compartilhe seus resultados nas redes sociais e destaque-se no Instagram, Twitter e LinkedIn!
HTML
HTML, ou HyperText Markup Language, Ă© a espinha dorsal do desenvolvimento web, permitindo a estruturação e organização de conteĂșdo em pĂĄginas online.
No HTML, a estrutura bĂĄsica consiste em tags e elementos. As tags sĂŁo instruçÔes inseridas no cĂłdigo para definir o inĂcio e o fim de elementos especĂficos, como tĂtulos, parĂĄgrafos, imagens e links.
Hierarquia de Documentos
A hierarquia de documentos no HTML Ă© estabelecida por meio da aninhamento de elementos. Tags podem conter outras tags, criando uma estrutura hierĂĄrquica que organiza o conteĂșdo da pĂĄgina de maneira lĂłgica.
Personalizando Elementos
A personalização de elementos Ă© alcançada por meio de atributos. Atributos fornecem informaçÔes adicionais sobre um elemento e sĂŁo inseridos nas tags para modificar seu comportamento ou aparĂȘncia.
Elementos SemĂąnticos
O HTML5 introduziu elementos semĂąnticos que atribuem significado e contexto ao conteĂșdo. Exemplos incluem <article>, <section>, <header> e <footer>, contribuindo para uma compreensĂŁo mais clara do propĂłsito de cada parte da pĂĄgina.
Links e Navegação
A criação de links Ă© uma parte fundamental do HTML, permitindo a navegação entre diferentes pĂĄginas. A tag <a> Ă© usada para definir links, conectando recursos online e aprimorando a experiĂȘncia do usuĂĄrio.
Interação do Usuårio
HTML facilita a criação de formulårios interativos. As tags como <input>, <select>, e <textarea> possibilitam a coleta de informaçÔes do usuårio, como nome, senha e comentårios.
MultimĂdia
HTML suporta a incorporação de mĂdia, como imagens e vĂdeos. As tags <img> e <video> permitem a inclusĂŁo de elementos visuais, melhorando a experiĂȘncia do usuĂĄrio.
Alura
A Alura, lĂder em educação online, oferece uma experiĂȘncia educacional personalizada, permitindo que os alunos avancem em seus prĂłprios ritmos. Com cursos elaborados por especialistas da indĂșstria, a plataforma proporciona uma jornada de aprendizado flexĂvel, alinhada Ă s necessidades individuais de cada estudante.
Diversidade de Cursos e AtualizaçÔes Constantes
A variedade de cursos abrange programação, design, gestĂŁo e negĂłcios, atendendo a diversos interesses e necessidades profissionais. Os conteĂșdos sĂŁo continuamente atualizados para refletir as Ășltimas tendĂȘncias e demandas do mercado, garantindo que os alunos estejam equipados com as habilidades mais relevantes.
Comunidade de Aprendizado DinĂąmica e Desenvolvimento ContĂnuo
Os alunos tĂȘm acesso a fĂłruns de discussĂŁo, mentoria e eventos exclusivos, criando um ambiente propĂcio ao networking e ao desenvolvimento contĂnuo. A Alura promove uma comunidade ativa que estimula a troca de conhecimentos e experiĂȘncias entre os estudantes.
Transforme seu conhecimento em ação!
As inscriçÔes para o 7 Days of Code de HTML e CSS devem ser realizadas no site do 7 Days of Code.
Desafie-se e inspire outros!
Gostou do conteĂșdo sobre o desafio gratuito? EntĂŁo compartilhe com a galera!
