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:
- Construir páginas web utilizando html/css;
- Interpretar protótipos de alta fidelidade para construir páginas web;
- 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;