Front-end > HTML e CSS
curso de

Guia de estilos: montando páginas com componentes

Faz parte dos cursos de HTML e CSS em Front-end. Discussões sobre esse curso

Estudando este mês:

Helton Barbosa Santos Ferreira Richard Schmitz Riedo Filipe Reges de Salles leonardo feijo barbozasantos Andre Luiz Pinheiro

e mais 276 alunos(as)

Resumo do curso

  • Entenda o processo de desenvolvimento de páginas web a partir de uma ferramenta de layout, como Figma
  • Aprenda a estruturar o projeto com arquitetura de CSS
  • Conheça o Emmet e IntelliSense CSS, ferramentas para agilizar a escrita de códigos
  • Melhore a manutenção de códigos com variáveis CSS
  • Crie componentes a partir de um guia de estilos
  • Desenvolva uma página utilizando componentes

Público alvo

Desenvolvedores que querem montar páginas a partir de ferramentas de layout como Figma.

Conteúdo relacionado

Cursos de HTML e CSS em Front-end

Leia nossos artigos de Front-end

Última atualização

09/03/2022

Já é aluno?

Comece o curso agora

8h

p/ conclusão

49

Atividades

153

Minutos de video

4304

Alunos nesse curso

9.1

Nota deste curso

Certificado de participação

Um pouco mais do conteúdo

Descubra se esse curso é pra você lendo as primeiras aulas de Guia de estilos: montando páginas com componentes

Instrutores

  • Matheus Alberto

    linkedin Linkedin github Github

    Formado em Sistemas de Informação na FIAP e em Design Gráfico na Escola Panamericana de Artes e Design. Trabalho como desenvolvedor e instrutor na Caelum e Alura. Nas horas vagas sou artista/ilustrador.

Conteúdo Detalhado

  1. Figma e guia de estilos

    • Recolhendo recursos
    • Primeiros passos
    • Criando um componente

  2. Arquitetura e ferramentas

    • EMMET e IntelliSense
    • Melhorando o desenvolvimento
    • Variáveis CSS
    • Valores complexos
    • Mais ferramentas CSS

  3. Os primeiros componentes

    • O input
    • Para saber mais: Padrão BEM CSS
    • O cartão
    • O título
    • Para saber mais: Componentes
    • Variações de componentes

  4. Outros componentes

    • O item
    • O produto
    • O vídeo
    • O cabeçalho

  5. Iniciando a página

    • O rodapé
    • Planejando a Home
    • Usando componentes
    • Documentação dos componentes

  6. Encerrando a página

    • As primeiras seções
    • Seção produto
    • Seção vídeo
    • Documentação dos componentes

Ainda não estuda com a gente?

Invista na transformação da sua carreira!

Comece agora

Cursos relacionados em HTML e CSS

nossos alunos e alunas

Experiências de quem já mergulhou com a gente.

O curso é bem prático e o conhecimento do EMMET é de alta valia para produtividade em HTML e CSS. Fantástico. Recomendo a todos.

Guia de estilos: montando páginas com componentes

Akira Nishikawa Tanaka

Vi sobre o Emmet e o Bem em outros cursos e aulas, mas apenas nesse foi aprofundado o seu uso. Recomendo até que esse curso seja adicionado na formação Front-end, achei muito relevante para ser avulso.

Guia de estilos: montando páginas com componentes

Andrea do Carmo Sousa

Projeto muito legal, com o material do figma com certeza vai dar pra evoluir muito mais o projeto e as habilidades não só de styleguides e css mas de javascript também. Em alguns momentos senti que faltou alguma edição, mas está muito bom!!!

Guia de estilos: montando páginas com componentes

Murillo Jorge Cunha

Aprenda HTML e CSS com esse e outros cursos, comece agora!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas

Cursos

Cursos de Programação
Lógica | Python | PHP | Java | .NET | Node JS | C | Computação | Jogos | IoT
Cursos de Front-end
HTML, CSS | React | Angular | JavaScript | jQuery
Cursos de Data Science
Ciência de dados | BI | SQL e Banco de Dados | Excel | Machine Learning | NoSQL | Estatística
Cursos de DevOps
AWS | Azure | Docker | Segurança | IaC | Linux
Cursos de UX & Design
Photoshop e Illustrator | Usabilidade e UX | Vídeo e Motion | 3D
Cursos de Mobile
React Native | Flutter | iOS e Swift | Android, Kotlin | Jogos
Cursos de Inovação & Gestão
Métodos Ágeis | Softskills | Liderança e Gestão | Startups | Vendas