LoboMaker - Aprendendo a Criar um Site para sua equipe/empresa DO ZERO [#3]

[Sir Lobo]

ATENÇÃO: Este tutorial é voltado para iniciantes que tenham o mínimo de conhecimento em HTML e CSS, mas nada que impeça um iniciante de conseguir

Olá! Eu sou Sir Lobo e estou retornando as atividades depois de quase 3 anos fora  e vos trago a nova série de tutoriais para que você finalmente pare de procrastinar e faça aquele site pra divulgar sua grandiosa equipe e o seu projeto 

#	Aula	Tópico	Status
01	Preparação do Ambiente	Vamos configurar e baixar os programas necessários para poder iniciar nosso site	[ACESSAR]
02	Configuração Inicial	Configuração do template, dos diretórios e dos arquivos principais	[ACESSAR]
03 e 04	Construção de Layout / Estilizando os Elementos	Vamos primeiramente, criar a estrutura que servirá de base para nosso site / Criação da folha de estilos e respectiva estilização de elementos	ATUAL
05	Página de Contato	Utilizando PHP, vamos adentrar à lógica de programação para um sistema simples de mensagens built-in	AGUARDANDO
06	Listagem de Jogos	Também utilizando PHP, iremos criar nossa base de dados e popular dinamicamente com os jogos produzidos	AGUARDANDO
07	Sistema de Blog	Pra finalizar com o PHP, um sistema de posts dinâmicos simples, mas útil para informes de atualizações e anúncios sobre novas produções	AGUARDANDO

Aulas #3 e #4 - Construção de Layout e Estilização

Peço desculpas antecipadas pela qualidade nada didática do material a seguir, mas infelizmente fatores técnicos me impedem de fazer algo com uma qualidade superior e mais dinâmica, mas estarei à ordens para responder dúvidas aqui neste posto mesmo (por favor, não mandem nada no privado, pois assim, futuros interessados também poderão ver possíveis resoluções de problemas) 

Para tentar facilitar o entendimento, resolvi gravar um vídeo ilustrativo do processo, porém, infelizmente estou sem microfone, mas fiz o possível para que fica-se autoexplicativo 

O arquivo estará em anexo, caso queiram baixar direto, mas é recomendável que vejam primeiro o vídeo ou que alterem conforme o vídeo ilustra as ações para que você aprenda, e não somente copie algo praticamente pronto. O intuito não é apenas criar, mas sim, aprender para fazer eventuais alterações 

Lembrando que o arquivo final(este em anexo no final desta postagem) pode estar ligeiramente diferente por conta das alterações que fiz no pós-vídeo para que o código fique semântico e sem erros de sintaxe. Gostaria de salientar também que o intuito é a construção rápida e limpa de um site SIMPLES, e não um projeto complexo que envolve planejamento minucioso e profissional de design e layout entre outras etapas que envolvem a construção de um website profissional. O site deve ser minimalista e funcional, mas venho aqui apenas dar o pontapé inicial

Complemento Visual para Estudos

#1 - Organizando elementos, hierarquias e pré-configurando o dinamismo da página

#2 - Configurando caminhos e criando a folha de estilo

#3 - Estruturando os elementos principais

#3 - Responsividade e Funcionalidade do Menu

[close]

E no fim, temos um site apresentável e responsivo (ou seja, que se adapta à diferentes resoluções de telas e dispositivos)

Imagens

Desktop






Mobile (Responsivo)

[close]

[box2 class=titlebg title=Considerações Finais]
Bem, chegamos ao fim de mais um tutorial! Espero que o vídeo ajude-o nas futuras configurações. Baixe o arquivo anexado e substitua pelo projeto anterior se for de seu interesse, ou então, assista os vídeos e este este projeto atualizado 

No próximo tutorial vamos "pegar mais na massa" e por isso não irei disponibilizar um arquivo completo para baixar, pois isto pode atrapalhar o seu entendimento visto que PHP e banco de dados demanda mais atenção do que linguagens de marcação e estilo, e provavelmente você vai querer adicionar mais campos, por exemplo, de informações específicas de relativas ao seu jogo

Se estiver gostando, peço que dê um feedback para que que eu possa continuar os tutoriais de forma que ajude-o 

Te espero na próxima aula! Dúvidas, basta responder aqui 

Um abraço do Lobo
[/box2]

Download do projeto:
https://drive.google.com/file/d/1l7_Yj9oIKwfMHrrQyELO01nKa7vFow5G/view?usp=sharing