CSS Grid - Construa Websites Modernos e Responsivos de Forma Eficiente (+Projetos)

Aprenda os Fundamentos do CSS Grid e Crie Designs Profissionais de Websites

Avaliação: 4.3 de 546 avaliações

Total de horas: 4.5

Aulas: 53

Nível: Intermediário

Descubra o poder do CSS Grid e revolucione o processo de layout do seu website. No passado, os web designers tinham que depender de técnicas complexas de posicionamento e código extenso para criar um website visualmente atraente. No entanto, com o CSS Grid, você pode criar designs de websites impressionantes e responsivos com apenas algumas linhas de código.

Seja você um iniciante ou tenha um entendimento básico de HTML e CSS, este curso foi projetado para equipá-lo com as habilidades necessárias para se tornar um web designer profissional em pouco tempo. Ao aprender a sintaxe e os conceitos do CSS Grid, você será capaz de criar layouts web 2D impressionantes sem esforço, sem a necessidade de frameworks como o Bootstrap.

Ao longo deste curso, você aprenderá:

1. Como criar layouts web 2D profissionais com código mínimo
2. Como projetar websites que variam de blogs simples de 2 colunas a layouts complexos com várias colunas e linhas
3. Como tornar seu website totalmente responsivo sem depender de frameworks externos
4. Como criar vários elementos, como widgets, carrosséis, aplicativos, galerias, barras de navegação e itens de menu
5. Como controlar a posição, tamanho e espaçamento dos elementos sem que eles se sobreponham
6. Como alinhar facilmente os elementos tanto horizontalmente quanto verticalmente com uma única linha de código
7. Como reordenar os elementos na página sem modificar o código HTML
8. Como criar layouts web aninhados com vários modelos de grid
9. Como desenvolver websites do mundo real usando o CSS Grid e criar layouts de demonstração para aprovação do cliente

Ao aplicar o conhecimento adquirido neste curso, você será capaz de:

1. Criar layouts profissionais de websites, desde blogs simples até websites empresariais complexos
2. Projetar vários tipos de websites, limitados apenas pela sua imaginação
3. Criar websites responsivos otimizados para smartphones, tablets e iPads
4. Reduzir drasticamente a quantidade de código em websites existentes utilizando as propriedades do CSS Grid
5. Mostrar websites de portfólio para projetos e candidaturas a empregos
6. Atrair projetos freelance demonstrando suas valiosas habilidades em CSS Grid
7. Criar websites 2D com controle completo sobre layouts de linhas e colunas

As aplicações do CSS Grid são ilimitadas, permitindo que você aplique suas novas habilidades em qualquer projeto web. Sua criatividade é o único obstáculo para implementar o CSS Grid em seus projetos do mundo real.

Estrutura do Curso

Este curso é composto por 4 módulos, cada um explicando detalhadamente um conceito-chave do CSS Grid através de exemplos práticos. Exemplos do mundo real são utilizados para ilustrar esses conceitos. Os módulos são os seguintes:

Módulo 1: Propriedade CSS Grid

Neste módulo fundamental, você aprenderá como transformar um elemento em um container de Grid e manipular seus itens filhos. Você também explorará colunas e linhas de grid e seu papel no layout do website.

Módulo 2: Linhas de Grid

Este módulo explora o conceito de linhas de grid, que permitem a criação de layouts web 2D. Você aprenderá como utilizar linhas de grid para projetar websites e concluirá dois projetos de layout de websites. Além disso, você descobrirá várias propriedades de alinhamento de grid.

Módulo 3: Áreas de Grid

Baseando-se no módulo anterior, você explorará áreas de grid, uma ferramenta poderosa para criar layouts de websites complexos de forma mais eficiente do que com linhas de grid. Dois projetos adicionais de layout de websites serão abordados neste módulo.

Módulo 4: Crie um Website - Projeto do Mundo Real (Não Responsivo e Responsivo)

Neste módulo final, você aprenderá como criar um website empresarial simples de 2 colunas, semelhante a muitos websites de pequenas empresas. Além disso, você descobrirá como tornar o website totalmente responsivo.

Ao longo do curso, você também encontrará vários exemplos e projetos, incluindo:

1. Projeto #1: Aplicando propriedades de linhas de grid para criar um layout de blog
2. Projeto #2: Criando um layout de website mais complexo usando linhas de grid
3. Projeto #3: Projetando um layout sofisticado de website empresarial com áreas de grid
4. Projeto #4: Desenvolvendo um layout de website empresarial e de blog com elementos aninhados
5. Website de 2 colunas do mundo real com um cabeçalho responsivo, barra de navegação, conteúdo principal, barra lateral e rodapé

Por que Escolher Nosso Curso?

1. Nós fornecemos um ensino abrangente, cobrindo tudo o que você precisa para criar designs e layouts web impressionantes usando o CSS Grid. Não são necessários recursos adicionais.
2. Enfatizamos a aprendizagem prática, com inúmeros exemplos que explicam claramente cada conceito.
3. Ao acompanhar nossos treinamentos e concluir os mini projetos, você ganhará confiança em utilizar o CSS Grid para design web responsivo e aprimorará seu currículo com habilidades valiosas.
4. Acreditamos em tornar a aprendizagem agradável, por isso incorporamos projetos divertidos que permitem que você aplique os conceitos aprendidos em cenários do mundo real.

Não espere mais! Matricule-se agora e desbloqueie o potencial do CSS Grid para criar layouts e designs web impressionantes em pouco tempo!

O que Você Aprenderá

• Domine os conceitos do CSS Grid através de projetos práticos
• Crie websites modernos e totalmente responsivos com 4+ layouts
• Projete blogs, websites empresariais, websites de portfólio e muito mais com código mínimo de CSS grid
• Crie layouts web 2D profissionais com facilidade
• Desenvolva websites com várias colunas e linhas
• Transforme seu website em uma obra-prima responsiva sem frameworks externos
• Crie vários elementos, como widgets, carrosséis, aplicativos, galerias, barras de navegação e itens de menu
• Controle facilmente a posição, tamanho e espaçamento dos elementos
• Alinhe elementos do website horizontal e verticalmente com uma única linha de código
• Ordene elementos na página sem modificar o código HTML
• Crie layouts web aninhados com vários modelos de grid
• Crie websites do mundo real usando o CSS Grid e apresente layouts de demonstração aos clientes para aprovação