Este repositório é utilizado para o curso "praticando-html-css" da Alura, ministrado para turmas do 2 ano. Nele está registrado os arquivos finais do curso (img/., index.html, styles.css), rúbricas avaliatívas e uma lista de links para aprofundamento dos temas.

O curso "praticando-html-css" aborda três principais temas:

1. Construir páginas web utilizando html/css;
2. Interpretar protótipos de alta fidelidade para construir páginas web;
3. Utilizar github para controle dos arquivos do site e como ferramenta para publicação do site.

O resultado final do curso pode ser acessado pelo link;

• Criar repositório do projeto no github;
  • Criar conta no github, caso necessário;
• Utilizar vscode.dev conectado ao repositório do github;
• Interpretar protótipo de alta fidelidade no figma como referência para construção da página web;
• Criar arquivo index.html no repositório do projeto no github;
  • Escrever a estrutura de tags básicas de um arquivo .html: doctype, html, head, body, header, section, footer; div; p, h1, h2, h3,
  • Escrever as tags HTML que determinam a codificação de caracteres, que capturam o tamanho da tela do dispositivo, e criação da conexão com arquivos externos, inicialmente folhas de estilo;
  • Escrever a tag HTML para importar fontes tipográficas do endereço fonts.google;
  • Utilizar a tag img, lista não ordenada, e links;
• Criar arquivo styles.css no repositório do projeto no github;
  • Escrever variáveis para armazenar as cores que são padrões da página e os nomes das fontes tipográficas no arquivo CSS; alterar as propriedades background-color e color da página;
  • Reutilizar estilos por meio de classes;
  • Modificar/utilizar as propriedades: font-family, font-size, font-weight; background-color, color da páginas principal; margin, padding; background-image, background-repeat, background-size; display inline-block, flex, justify-content, grid e grid-template-columns; flex-containers, flex-itens, flex-direction;
  • Remover a decoração padrão de links, botões e listas;
• Utilizar o padrão block element modifier;
• Utilizar elementos do HTML que são definidos por mais de uma classe;

• vscode.dev;
• figma: protótipo de alta fidelidade;
• alura: o-que-e-html-suas-tags-parte-1-estrutura-basica;
• alura: nomes-de-classes-no-css;
• alura: qual-diferenca-entre-id-e-class;
• alura: guia-de-unidades-no-css;
• alura: criando-layouts-com-css-grid-layout;
• alura: heroku-vercel-outras-opcoes-cloud-plataforma;
• alura: escrever-bom-readme;
• medium: pare-de-chutar-e-aprenda-como-funciona-o-display-inline-block-4e6cba2f19d4;
• mdn: Pseudo-classes;
• github: about-github-pages;
• vercel;