Projeto Prático HTML5 + CSS3 - Criação do site de uma startup de contratação de diaristas

Aprenda desde o zero a criar um site de uma startup de contratação de diaristas usando HTML, CSS e JavaScript

Curso com 04h01 de vídeos Categoria Desenvolvimento Front-end

Matricule-se

Sobre o projeto

Não basta apenas entender como funciona o HTML e CSS, precisamos praticar o conhecimento, essa é a melhor forma de exercitar o que estamos aprendendo. Nada melhor do que um projeto completo do zero para fazer esse tipo de exercício. Iremos desenvolver uma página de apresentação de uma startup de contratação de serviços. Essa página está repleta de detalhes para podermos usar ao máximo nossos conhecimentos.

O que irá aprender?

Nesse projeto veremos na prática como criar um layout do zero com várias páginas e trabalharemos com os seguintes conceitos do HTML e CSS:

Display Flex;
Display Grid;
Criar componente de Accordion;
Páginas responsivas;
Utilização de variáveis CSS;
Trabalhar com pseudo-classes e pseudo elementos.

Para quem?

Esse projeto prático é voltado a desenvolvedores que já possuem um conhecimento básico de HTML e CSS e queiram praticar os conhecimentos com um projeto real.

Metodologia

Videoaulas
Texto e imagens
Início Imediato

Ambiente do curso

Visual Studio Code

Sobre o professor

Amauri Blanco Corrêa

Estudante de Análise e Desenvolvimento de Sistemas, apaixonado por tecnologia. Atualmente focado na área de front-end e iniciando uma grande e brilhante caminhada tanto profissionalmente quanto pessoalmente nesse universo que é a programação.

Quais os pré-requisitos para esse curso?

Curso
HTML5 + CSS3
Fundamentos
04h59 Nível Iniciante

Conteúdo programático

Início do projeto

Nessa aula, iremos iniciar nosso projeto com a criação do cabeçalho, que será utilizado nas duas páginas do projeto
5 aulas
- Apresentação
- O código-fonte deste curso está no GitHub!
- Apresentação do projeto e preparação de ambiente
- Criando a base para o projeto
- Montando header da página principal
Iniciando com corpo da página

Nessa nossa segunda aula, vamos iniciar com a primeira section da nossa página, trazendo as imagens e ícones necessários.
3 aulas
- Iniciando a primeira section
- Ajustando descrição
- Finalizando a primeira section
Trabalhando com grid de informações

Na terceira aula, iremos estruturar o grid de cards. Nessa section é onde ficarão os motivos principais do serviço oferecido pelo cliente
3 aulas
- Montando estrutura da segunda section
- Estilizando a section
- Finalizando as estilizações da section
Criando componente de accordion

Já nessa quarta aula, iremos adicionar o efeito de divisão das sections e ainda criaremos o componente de accordion.
3 aulas
- Criando efeito de divisão da section
- Adicionando texto e montando estrutura do accordion
- Finalizando o componente de accordion
Adicionando footer e finalizando estilizações de desktop

Nesta aula vamos adicionar o footer do projeto trabalhando com grid. Também vamos verificar os detalhes no desktop para começar adaptar a página para diferentes dispositivos.
2 aulas
- Estruturando o rodapé da página
- Finalizando a home do desktop
Iniciando com a responsividade da página

Agora vamos de fato iniciar toda a responsividade da página, criando a nossa estrutura de breakpoints e alterando as estilizações.
4 aulas
- Montando a estrutura de breakpoints
- Estilizando primeiro breakpoint
- Adaptando a página para tamanhos médios
- Finalizando toda página de Home
Criando página de login

Nessa última aula vamos à criação da segunda página do nosso projeto com a página de login e ajustando últimos detalhes.
4 aulas
- Preparando a estrutura da página de login
- Adicionando conteúdo
- Estilizando a página de login
- Finalizando o projeto