“ Iniciando uma Carreira Front-end de Sucesso ” HTML5 & CSS3 “ Iniciando uma Carreira Front-end de Sucesso ” UX Design - Tipografia

00 OBJETIVO DO CURSO Facilitar o aprendizado das linguagens e conseitos. Ensinar na prática, sobre o desenvolvimento de sites responsivos e otimizados. Encaminhar o aluno para o mercado.

00 GRADE DO CURSO Introdução: Sobre o Curso Conhecer as Linguagens Ferramentas para desenvolvimento Codificação: Estruturas e Estilização Otimização SEO Responsividade Ferramentas Auxiliares Desenvolvendo o Projeto: Pizzaria

00 PORQUE HTML & CSS ? Visibilidade A web domina milhões de usuários por todo o mundo. Compatibilidade O acesso a internet em diferentes dispositivos ( smartphone, tablet, notebook, desktop , TV ) se torna cada vez maior. Segurança O avanço da tecnologia, possibilitou mais segurança para o usuário da web. (HTTPS)

00 FERRAMENTAS DE DESENVOLVIMENTO Sublime Text 3 Firefox (Ou Navegador de Sua Preferência) Download e Instalação

00 INTRODUÇÃO: HTML E CSS HTML ( Hyper Text Markup Language ) Linguagem de marcação, responsável por estruturar o DOM, elementos presentes no site, aplicativo, ou sistema web. CSS ( Cascading Style Sheet ) Linguagem de Estilo, responsável por estilizar os elementos do HTML, ajustando cores, espaçamentos, tamanhos e posicionamento.

00 ESTRUTURA HTML BÁSICA

00 META TAG São utilizadas para passar informações sobre o conteúdo do site para o navegador. De forma a reconhecer descrição, palavras chaves , o criador do site entre outros dados. Afim de melhorar o aspecto SEO.

00 O QUE É SEO ? SEO ( Search Engine Optimization ) Meta Tags Velocidade de Carregamento Conteúdo Usabilidade Responsividade Semântica

00 SEMÂNTICA HTML5 Semântica O seu código html deve ter uma estrutura organizada de forma lógica , as tags devem conter o que é esperado pelo navegador e buscador. - header - nav - section - article - aside Footer Div

00 SOBRE O DOM DOM (Document Object Model) Modo de organização dos elementos que são representados pela linguagem de marcação, a fim de padronizar a forma de renderização entre os navegadores e navegação entre os elementos.

00 SOBRE O DOM Representação da Árvore DOM

00 TRABALHANDO COM CSS Modelo de Escrita: Inline: O estilo é aplicado direto na tag especificada. Não precisa do uso de seletores. Incorporada: O estilo é criado no mesmo documento do html porém em um bloco separado. Utiliza os seletores para adicionar o estilo a tag. Documento Externo: Organiza o estilo da página em um documento separado, devemos utilizar um link ou um import para referênciar este documento ao html. Permite um maior aproveitamento de código e manutenção facilitada.

00 SELETORES BÁSICOS Seletores: Seletores são referencias aplicadas no html como um identificador, selecionando que elemento ou qual grupo de elementos receberá o estilo css aplicado. Classe: Usado para referenciar elementos no html de forma genérica, estilizando elementos do mesmo tipo , que possuem características semelhantes. Cada elemento pode receber várias classes. Id: Usado para referenciar elementos únicos na pagina html, cada elemento só poderá possuir um id.

00 TRABALHANDO COM TEXTOS - Títulos Subtítulos Parágrafos Citações, textos pequenos

00 TRABALHANDO COM IMAGENS - Adicionar Imagem Configurando Tamanho Tornando Imagem Responsiva Aplicando Filtros na Imagem