Skip to content

IrlanFreitas/formacao-html-css

Repository files navigation

Formação Html e CSS

1 HTML & CSS

A base de todo desenvolvimento Web é um bom HTML. Mais que aprender tags, é saber a importância de um código semântico e bem estruturado.

Em cima disso, aplicamos o layout CSS que também é muito mais que apenas colocar uma cores e firulas por aí. É muito fácil escrever códigos HTML e CSS ruins.

E é muito fácil não dar a atenção devida a esses fundamentos da Web.

  • HTML5 e CSS3 parte 1: A primeira página da Web
  • HTML5 e CSS3 parte 2: Posicionamento, listas e navegação
  • HTML5 e CSS3 parte 3: Trabalhando com formulários e tabelas
  • HTML5 e CSS3 parte 4: Avançando no CSS

2 Acessibilidade

Ao criarmos um produto queremos que ele atinja o maior número de pessoas possível.

Assim temos uma maior chance desse produto ser um sucesso. Para isso, não podemos deixar de fora pessoas com algum tipo de limitação ou dificuldade.

Desde o início do nosso projeto devemos pensar sobre questões de acessibilidade e por isso é importante que você estude as boas práticas constantemente.

  • Acessibilidade web: introdução a designs inclusivos
  • Acessibilidade web parte 1: tornando seu front-end inclusivo
  • Acessibilidade web parte 2: Componentes acessíveis com um pouco de JavaScript

3 Javascript

Atualmente é muito difícil achar sites 100% estáticos, por isso que desenvolvedores front-end precisam conhecer a linguagem mais utilizada na web e no mundo, o JavaScript.

  • JavaScript: Programando na linguagem da web

4 Avançando com CSS

A Web de antigamente parava em algumas poucas propriedades do CSS. Mas não mais. O mundo evoluiu, novas exigências surgiram, e a Web cresceu junto.

Agora você vai mergulhar em técnicas e tecnologias mais recentes e profundas, que vão te trazer um outro olhar ao desenvolvimento front-end.

Desde pré-processamento de CSS com SASS até o uso de ferramentas de debug, passando por layouts avançados com flexbox. E, o mais importante, como lidar com o mundo multidispositivo que temos hoje com a criação de sites responsivos e mobile-first.

  • Sass e Compass: Descomplicando o CSS
  • Flexbox: Posicione elementos na tela
  • CSS Grid: Simplificando layouts

5 Layouts Responsivos

A grande diversidade de tamanhos, formatos e resoluções de telas atualmente torna impossível criarmos um site que não seja responsivo.

Cada vez mais os usuários querem uma experiência ótima independente se estão trabalhando no computador, celular ou tablet e isso torna imprescindível sabermos como criar sites que se adaptam à tela que estamos usando.

  • Web Design Responsivo: Páginas que se adaptam do mobile ao desk
  • Bootstrap 4: Criando uma landing page responsiva

6 Arquitetura CSS

Se não tomarmos cuidado, em projetos grandes, é muito comum não sabermos mais onde as coisas se encontram além de vermos uma mistura de padrões de nomes das classes e IDs dos nossos objetos.

Pensando nisso foram criados alguns padrões que se seguidos desde o inicio do projeto facilitam a vida de quem estiver desenvolvendo um projeto maior.

  • Arquitetura CSS: Descomplicando os problemas

7 Otimizações e Performance

Com a quantidade de dispositivos que acessam nossos sites todos os dias, e a quantidade cada vez maior de animações, efeitos e interações sendo colocadas no front-end é essencial que você entenda como a web funciona e como podemos utilizar melhor os recursos para tornar nossos sites cada vez mais rápidos.

  • HTTP: Entendendo a web por baixo dos panos
  • Performance Web I: otimizando o front-end
  • Performance Web II: Critical Path, HTTP/2 e Resource Hints

Written with StackEdit.