“ Iniciando uma Carreira Front-end de Sucesso ”

Apresentação em tema: "“ Iniciando uma Carreira Front-end de Sucesso ”"— Transcrição da apresentação:

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

2 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.

3 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

4 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)

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

6 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.

7 00 ESTRUTURA HTML BÁSICA

8 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.

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

10 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

11 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.

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

13 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.

14 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.

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

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