Projetos em CSS: Aprenda Técnicas Profissionais de Desenvolvimento CSS Construindo Projetos

Visão geral do curso

Seja um mago do front-end com este curso único da Eduonix. Reunimos um currículo onde você aprenderá todas as dicas e truques de design CSS e HTML enquanto constrói dez projetos incríveis. Isso ajudará você a dominar diferentes aspectos da programação front-end e mostrará todas as melhores práticas de desenvolvimento. Os seguintes projetos foram especialmente selecionados para fazer parte deste curso.

Projeto 1 - Design de Página de Destino

Descrição: Criaremos uma página de destino HTML5/CSS que apresentará um cabeçalho e rodapé, uma lista com marcadores de imagem, um formulário HTML5 e um bloco de depoimentos. A página será completamente responsiva e se adaptará a qualquer tamanho de tela usando consultas de mídia CSS3. Também usaremos o arquivo de redefinição de Eric Meyers. Recursos/Tecnologias: HTML5, CSS3, Formulários da Web, Listas, Arquivos de Redefinição, Design Responsivo da Web

Projeto 2 - Calendário Responsivo sem Tabelas

Descrição: Criaremos uma página de calendário da web usando HTML5/CSS. Ao contrário de muitos calendários que usam tabelas HTML para posicionamento e apresentação, nosso calendário usará apenas CSS. O calendário será completamente responsivo e terá um sublayout para tamanhos de tela menores. Recursos/Tecnologias: HTML5, CSS3, Listas, Design Responsivo da Web, Layout semelhante a tabela usando apenas CSS, Espaçamento de Caixa, Preenchimento e Margens

Projeto 3 - Slider de Imagens com CSS Puro

Descrição: A maioria dos sliders de imagens que você vê na Web são alimentados por JavaScript ou uma biblioteca JavaScript como JQuery. Construiremos um slider de imagens totalmente funcional com CSS puro. Teremos miniaturas que, quando clicadas, fazem a imagem maior deslizar para o lugar. Usaremos animação/keyframes CSS para alcançar isso. Recursos/Tecnologias: HTML5, CSS3, Animação, Keyframes, z-index e Posicionamento

Projeto 4 - Menu Suspenso com Transição

Descrição: Construiremos um menu suspenso de vários níveis usando transições CSS para o efeito de animação do menu suspenso. Usaremos um pouco de JQuery para adicionar dinamicamente um elemento div. Recursos/Tecnologias: HTML5, CSS3, Listas Aninhadas, Design Responsivo da Web, Transições CSS, JQuery

Projeto 5 - Linha do Tempo em CSS

Descrição: Neste projeto, construiremos uma linha do tempo usando HTML5/CSS. Este projeto se afastará dos layouts comuns em forma de caixa que vemos o tempo todo. Haverá pontos para anos e eventos com descrições. Isso pode ser usado para muitas coisas, como rastreamento profissional/emprego e pessoal/estilo de vida. Recursos/Tecnologias: HTML5, CSS3, Design Responsivo da Web, Layout Fluid, Imagens de Fundo e Posicionamento

Projeto 6 - Tabelas com SASS

Descrição: SASS é um pré-processador CSS que nos permite fazer coisas incríveis, como usar variáveis, mixins e estilos aninhados. Criaremos algumas tabelas de preços para pacotes de hospedagem na web. Recursos/Tecnologias: HTML5, CSS3, Listas, Design Responsivo da Web, Layout Fluid, Instalação, Configuração e Trabalho com SASS

Projeto 7 - Galeria de Imagens em CSS

Descrição: Construiremos uma galeria de imagens com a ajuda do JQuery. O layout será estilizado com CSS e usaremos o JQuery para filtragem dinâmica de categorias e lightbox de imagens. Também criaremos um logotipo muito simples no Photoshop. Recursos/Tecnologias: HTML5, CSS3, Design Responsivo da Web, Layout Fluid, JQuery, Plugin JQuery Fancybox

Projeto 8 - Carro Animado

Descrição: Vamos nos concentrar na animação CSS3 e keyframes para posicionar e animar imagens. Usaremos uma imagem de um carro e faremos com que pareça estar dirigindo pela rua. Recursos/Tecnologias: HTML5, CSS3, Animação, Keyframes, Recorte de Imagens no Photoshop, Imagens de Fundo e Posicionamento

Projeto 9 - Template Bootstrap Animado

Descrição: O Twitter Bootstrap é o framework HTML5/CSS mais popular disponível. Construiremos um template Bootstrap personalizado junto com algumas animações, incluindo animação inicializada por rolagem usando JQuery e CSS. Recursos/Tecnologias: HTML5, CSS3, Animação, Keyframes, Twitter Bootstrap, JQuery

Projeto 10 - Design de Newsletter com LESS

Descrição: LESS é outro pré-processador CSS como o SASS. Criaremos um modelo de newsletter suave para um restaurante. Implementaremos LESS e usaremos recursos como variáveis, mixins, estilos aninhados e importação de arquivos .less. Recursos/Tecnologias: HTML5, CSS3, Instalação do Node.js, Instalação, Configuração e Trabalho com LESS

O que você aprenderá

- Aprenda técnicas de design CSS - Aprenda a usar LESS e SASS - Aprenda o uso do Bootstrap - Aprenda as melhores práticas de desenvolvimento para CSS