douglasabnovato / developer

Projeto de um site com contéudos para estudar programação: links de vídeos.

🚧 Developer 🚀

Links de conteúdos para aprender a programar, sendo: soft skill, frontend, backend e tools.

Tarefas

• links organizados em categorias
• tooltip para indicar a categoria do card
• objeto para cada categoria
• compreendido a url do youtube
• personalizar logo
• favicon personalizado
• personalizar menu com área de estudo
• personalizar menu mobile com fluxo
• estrutura de tópicos construídos index, hardskills, tools, host, collegestech, perfisdev, goodcompanies, jobs, softskills, speaker
• warning imagens na index: Tentativas: try catch, async await. Correções: mudar de .avif para .jpg, diminuir o caminho da url.

Objetivo

Desenvolver a aplicação de forma completa.

• login, logout, register, recuperação de senha
• páginas on e páginas off
• newsletter
• contato: enviar email
• contato: mensageiro whatsapp
• nova aba: redes sociais
• nova aba: experiências
• nova aba: eventos
• personalizar formulário com uma funcionalidade legal
• criar função para botão principal

Detalhes da versão inicial

A Responsividade é um assunto muito importante para que nosso layout seja flexível, conforme o dispositivo que o está acessando, seja ele smartphone, tablet ou desktop. (E até mesmo, a impressora sabia?)

Uma Masterclass da Rocketseat tratou desse assunto com estratégias de CSS Units para que tanto o nosso Layout, quanto os nossos textos, fiquem fluidos.

Utilizaram também CSS Media Queries para adicionar CSS customizados conforme o breakpoint definido, para que nosso layout fique adaptado ao viewport do dispositivo.

Além do mais, veremos atributos e tags HTML especiais, para que possamos obter sucesso ao tornar nosso layout responsivo.

Versão Final

Design inicial com a aplicação das técnicas citadas abaixo de responsividade.

Warning GET 404

CSS Units

Unidades de medidas do CSS

Layout Fixo px - Pixels

Layout Fluido % - Porcentagem auto - Automática vh - Viewport Height vw - Viewport Width

Textos fixos 1px = 0.75pt 16px = 12pt

Texto fluidos em - multiplicado pelo pai rem - multiplicado pelo root

CSS Media Queries

No HTMl eu coloco a seguinte tag meta

<meta name="viewport" content="width=device-width, initial-scale=1.0">

No CSS eu uso da seguinte forma

@media (max-width: 320px) {
  #form h3 {
    font-size: 2rem;
  }
}

HTML Media Attrib.

Posso utilizar o atribuito media no link do meu HTML, ao importar um arquivo css, usando as propriedades da mesma forma que usaria na regra @media do css.

<link 
    rel="stylesheet"
    href="responsive.css" 
    media="screen and (max-width: 768px)"
/>

<link rel="stylesheet" href="print.css" media="print">

Imagens

Usamos a tag <picture> para que as imagens sejam responsivas.

<picture class="image" alt="Imagem">
    <source media="(min-width: 768px)" 
        srcset="https://i.ytimg.com/vi/GykTLqODQuU/maxresdefault.jpg">
    <source media="(min-width: 320px)" 
        srcset="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg">
    <source media="(min-width: 10px)" 
        srcset="https://i.ytimg.com/vi/GykTLqODQuU/mqdefault.jpg">

    <img 
        src="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg" 
        alt="Imagem" />
</picture>

Versão Inicial

Design inicial sem aplicação das técnicas citadas acima de responsividade.

Sempre que possível, usar SVG ao invés de JPG, PNG

Feito com ❤️ por Douglas A B Novato 👋🏽 Entre em contato!

Fonte do projeto na Responsividade na Prática | Masterclass #08 e do repositório no Github.