├── imagens ├── 02-trilha-frontend.png ├── 01-trilha-fundamental.png ├── exercicios-css-02-css-externo.png ├── exercicios-html-01-hello-world.png ├── exercicios-css-01-css-na-pratica.png ├── exercicios-css-03-1-estilo-titulo.png ├── exercicios-html-02-marcacoes-html.png ├── exercicios-css-03-8-formatar-o-rodape.png ├── exercicios-css-03-9-importar-fonte-web.png ├── exercicios-css-03-resumo-pag-enzo-pascal.png ├── exercicios-html-01-hello-world-com-tag.png ├── exercicios-css-03-2-mais-estilo-nos-textos.png ├── exercicios-css-03-3-formatando-links-e-botoes.png ├── exercicios-css-03-5-tamanho-e-posicionar-imagem.png ├── exercicios-css-03-4-alinhar-textos-e-espacamentos.png ├── exercicios-css-03-6-estilo-de-lista-e-cor-de-fundo.png ├── exercicios-css-03-7-estilo-da-barra-de-progresso.png └── exercicios-html-02-marcacoes-html-resultado-esperado.png ├── EXERCICIOS-HTML.md ├── README_WEB_PARA_DEV_DJANGO.md ├── EXERCICIOS-CSS.md └── README.md /imagens/02-trilha-frontend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/02-trilha-frontend.png -------------------------------------------------------------------------------- /imagens/01-trilha-fundamental.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/01-trilha-fundamental.png -------------------------------------------------------------------------------- /imagens/exercicios-css-02-css-externo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-02-css-externo.png -------------------------------------------------------------------------------- /imagens/exercicios-html-01-hello-world.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-html-01-hello-world.png -------------------------------------------------------------------------------- /imagens/exercicios-css-01-css-na-pratica.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-01-css-na-pratica.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-1-estilo-titulo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-1-estilo-titulo.png -------------------------------------------------------------------------------- /imagens/exercicios-html-02-marcacoes-html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-html-02-marcacoes-html.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-8-formatar-o-rodape.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-8-formatar-o-rodape.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-9-importar-fonte-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-9-importar-fonte-web.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-resumo-pag-enzo-pascal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-resumo-pag-enzo-pascal.png -------------------------------------------------------------------------------- /imagens/exercicios-html-01-hello-world-com-tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-html-01-hello-world-com-tag.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-2-mais-estilo-nos-textos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-2-mais-estilo-nos-textos.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-3-formatando-links-e-botoes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-3-formatando-links-e-botoes.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-5-tamanho-e-posicionar-imagem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-5-tamanho-e-posicionar-imagem.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-4-alinhar-textos-e-espacamentos.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-4-alinhar-textos-e-espacamentos.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-6-estilo-de-lista-e-cor-de-fundo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-6-estilo-de-lista-e-cor-de-fundo.png -------------------------------------------------------------------------------- /imagens/exercicios-css-03-7-estilo-da-barra-de-progresso.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-css-03-7-estilo-da-barra-de-progresso.png -------------------------------------------------------------------------------- /imagens/exercicios-html-02-marcacoes-html-resultado-esperado.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/huogerac/guia-definitivo-do-zero-a-dev/HEAD/imagens/exercicios-html-02-marcacoes-html-resultado-esperado.png -------------------------------------------------------------------------------- /EXERCICIOS-HTML.md: -------------------------------------------------------------------------------- 1 | # Guia Definitivo Do Zero à Dev - EXERCÍCIOS 2 | 3 | ## HTML 4 | 5 | ### 🏆 1 - Olá Mundo 6 | 7 | Crie um arquivo de texto com a extensão .html com o conteúdo abaixo: 8 | 9 | ``` 10 | Olá Mundo 11 | Este é um arquivo que nosso navegador entende 12 | ``` 13 | 14 | Abra o arquivo em seu navegador 15 | 16 | ![HTML Hello world](./imagens/exercicios-html-01-hello-world.png) 17 | 18 | Agora altere o arquivo de forma a adicionar as tags html: 19 | 20 | ``` 21 |

Olá Mundo

22 |

Este é um arquivo que nosso navegador entende

23 | ``` 24 | 25 | Salve o arquivo e clique em atualizar página do navegador. 26 | 27 | ![HTML Hello world](./imagens/exercicios-html-01-hello-world-com-tag.png) 28 | 29 | Versão final do Olá Mundo HTML 30 | 31 | ```HTML 32 | 33 | 34 | 35 | Olá mundo HTML da DevPro 36 | 37 | 38 |

Olá Mundo

39 |

Este é um arquivo que nosso navegador entende

40 | 41 | 42 | ``` 43 | 44 | ### 🏆 2 - Entendendo marcações HTML na prática 45 | 46 | Usando o conteúdo abaixo, crie o arquivo enzo-pascal.html e digite ou copie e cole este conteúdo e veja como ele será exibido em seu navegador. 47 | 48 | ```HTML 49 | Olá, sou o Enzo Pascal. 50 | UI/UX Designer 51 | Especialista em Web Design. Como profissional, meu foco é 52 | criar experiências significativas para as pessoas. 53 | Designer brasiliense, 29 anos, apaixonado por desenvolvimento de interfaces e 54 | viciado em tecnologia. Nos últimos 4 anos trabalhei em empresas de tecnologia, 55 | comunicação e design. Sempre com foco em produtos digitais. 56 | Projetos 57 | - Wordle: Trabalhei na criação do jogo de caça palavras usando apenas tecnologias do lado do cliente (HTML, CSS e JS) que passou de uma diversão para minha esposa em algo que virou febre na internet 58 | - Fazae: Trabalhei no design e elaboração dos conceitos para um todo list (gestor de tarefas) focado em usabilidade e dispositivos móveis, partindo de pesquisas e prototipação até a criação de componentes webs. 59 | - Trot: Participei da codificação do módulo frontend do projeto que é uma versão simplificada do strava, focando no frontend utilizando dados de dispositivos móveis, como GPS para armazenar a localização e exibição destes percursos usando bibliotecas como geemap.org, leafletjs e mapbox 60 | Habilidades 61 | UX Research 62 | Product Design 63 | UI Design 64 | Web Designer 65 | HTML & CSS 66 | JavaScript e VueJS 67 | Contato 68 | E-Mail: enzo@web.dev 69 | Fone: (12) 991002003 70 | ``` 71 | 72 | A saída do conteúdo acima no navegador sem fazer as marcações do html será como abaixo, ou seja, é como se tudo fosse apenas um parágrafo. 73 | 74 | ![HTML Marcações](./imagens/exercicios-html-02-marcacoes-html.png) 75 | 76 | Abra o arquivo enzo-pascal.html com texto original no seu editor de texto e aplique os conhecimentos adquiridos sobre tags do HTML, será necessário criar a estrutura base do html, e para cada parte do conteúdo iremos precisar utilizar as tags corretas, como h1 e p, ul e li para os conteúdos de lista e assim por diante. 77 | Depois de adicionar as marcações, a exibição do conteúdo deverá ser algo parecido com a visualização abaixo: 78 | 79 | ![HTML Marcações](./imagens/exercicios-html-02-marcacoes-html-resultado-esperado.png) 80 | -------------------------------------------------------------------------------- /README_WEB_PARA_DEV_DJANGO.md: -------------------------------------------------------------------------------- 1 | # Guia Web para dev Django 2 | 3 | - 📚 Guia do dev autodidata 4 | - 🌎 Guia para o contexto WEB 5 | - 👉 Gostou? deixa sua 🌟 ou segue este repo para receber atualizações 6 | - 👉 NÃO Gostou? Abra uma issue e vamos conversar o que está errado! Valeu 7 | - 🚧 Trabalho em andamento! Sua ajuda faz a diferença 8 | - 🚧 ATENÇÃO: Trabalho em Andamento! WIP 9 | - 👉 Vai ajudar dar uma olhada na [Sintaxe do JS](README.md) - É rápido e vale a pena! 10 | 11 | ## 🏢 **Motivações** 12 | - Aprender na prática e com exercícios 13 | - Diferente da maioria dos tutoriais Django que focam no "Backend" e nos "Models", este aqui quer focar parte WEB e "Frontend" 14 | - Aprenda JS antes de um framework JS (VueJS, React etc...) 15 | 16 | ## 🏆 **Exercícios** 17 | - Aprender na prática e com exercícios 18 | 19 | - [🚀 Dica DEV #1 - Editor de código](#wip) 20 | 21 | ## 🏢 **Web para devs Django - Parte 1** 22 | 23 | - [🏆 Desafio #1 CRUD de Tarefas 100% JS](https://github.com/huogerac/crud-js-materialize-api-mock) 24 | - Listar, Inserir, Alterar e Excluir Tarefas 25 | - Pode ser totalmente sem CSS ou talvez um bootrapzinho para ficar mais bonito 🤷🏼‍♀️ 26 | - [Internet](#WIP) 27 | - [Web Feliz - Talvez ajude - totalmente opcional 🤷🏼‍♀️](#wip) 28 | - [Como funcionam as páginas web](#como-funcionam-as-páginas-web) 29 | - [URL ou Link: você sempre usa, mas não prestou atenção](#wip) 30 | - [Domínio, IP e Domain Server Name (DNS)](#wip) 31 | - [Página web estática](#pagin-web-estatica) 32 | - [🏆 Deploy página web estática](#wip) 33 | - [🏆 Github Pages](#wip) 34 | - [🏆 Desafios Lista 1 e Lista 2](https://github.com/huogerac/guia-para-aprender-js-lista-exercicios) 35 | - [Uma pouco mais de JS](#wip) 36 | - [Iniciando com funções (functions) no JS](#wip) 37 | - [Parâmetros, Return e argumentos](#wip) 38 | - [Escopo](#wip) 39 | - [Funções anônimas e funções flechas (arrow functions)](#wip) 40 | - [Primeiros passos com Objetos no JS](#wip) 41 | - [Guia JS e Web](https://github.com/huogerac/guia-para-aprender-js-web) 42 | - [Entendendo o DOM](#wip) 43 | - [Adicionando JS na página](#wip) 44 | - [Entendendo o document.write](#wip) 45 | - [Entendendo o createElement, createTextNode e appendChild](#wip) 46 | - [Entendendo o seletores de elementos (querySelector)](#wip) 47 | - [Entendendo o textContent, innerHTML, setAttribute e classList](#wip) 48 | - [Entendendo eventos com addEventListener](#wip) 49 | - [Entender o Callback](#wip) 50 | - [Entender Promise](#wip) 51 | - [Entender uma chamada a uma API para atualizar a página](#wip) 52 | - [🏆 Obter a quantidade de estrelas de um repositório do github](#wip) 53 | - [🏆 Obter a lista de pokemons](#wip) 54 | - [Entender uma imitação do backend com API Mock](#wip) 55 | - [Entender Client-side vs Server-side](#wip) 56 | - [Dados com JSON (JavaScript Object Notation)](#wip) 57 | - [Fetch API](#wip) 58 | - [Requests usando uma biblioteca JS? 🤷🏼‍♀️](https://huogerac.hashnode.dev/devo-usar-fetch-ou-axios-para-fazer-chamadas-para-api-usando-js) 59 | 60 | ## 🧺 **Web para devs Django - Parte 2** 61 | - [Guia para aprender Django](https://github.com/huogerac/guia-para-aprender-django) 62 | - [localStorage e sessionStorage](#wip) 63 | - [ 🍪 CookieslocalStorage e sessionStorage](#wip) 64 | 65 | ## 🧺 **Outros** 66 | - [Módulos, import e export](#wip) 67 | - [Frameworks JS] 68 | - [Frontend no mundo real](#wip) 69 | - [Criando projetos utilizando o npm create](#wip) 70 | - [Processo de criação (build)](#wip) 71 | - [Variáveis de ambiente](#wip) 72 | - [Biblioteca de componentes](#wip) 73 | - [Tratamento de erros: try/catch/finally](#wip) 74 | - [HTTP Headers & Cookies](#wip) 75 | - [Async/await](#wip) 76 | - [Rest API](#wip) 77 | - [NVM](#wip) 78 | - [Deploy de projetos reais na Vercel](#wip) 79 | 80 | - [EXTRA: JS 🤷🏼‍♀️](#wip) 81 | - [Escopos Global e local](#wip) 82 | - [Entender a chave this](#wip) 83 | - [Spread syntax](#wip) 84 | - [Destructuring assignment](#wip) 85 | -------------------------------------------------------------------------------- /EXERCICIOS-CSS.md: -------------------------------------------------------------------------------- 1 | # Guia Definitivo Do Zero à Dev - EXERCÍCIOS 2 | 3 | ## Fundamentos do CSS 4 | 5 | ### 🏆 1 - CSS na prática 6 | 7 | Crie um novo arquivo HTML chamado css-tag-style.html e faça ficar parecido com a imagem abaixo: 8 | 9 | ![CSS na prática](./imagens/exercicios-css-01-css-na-pratica.png) 10 | 11 | ### 🏆 2 - Estilo inline, Tag Style e arquivos externos 12 | 13 | Converta o exemplo acima de forma que o estilo CSS ficará em um arquivo externo 14 | 15 | ![CSS na prática](./imagens/exercicios-css-02-css-externo.png) 16 | 17 | ### 🏆 3 - Página do Enzo Pascal 18 | 19 | O objetivo final é construir uma página simples, porém funcional. Mas para isto, iremos quebrar este desafio em 9 partes menores. 20 | 21 | ![CSS na prática](./imagens/exercicios-css-03-resumo-pag-enzo-pascal.png) 22 | 23 | ### 🏆 3.1 - Estilo no título 24 | 25 | ![CSS na prática](./imagens/exercicios-css-03-1-estilo-titulo.png) 26 | 27 | Passos: 28 | 29 | - Crie o arquivo enzo-passo1.css 30 | - Crie o arquivo enzo-passo1.html com a estrutura base do HTML (que vimos na parte de HTML) e importe o CSS de estilo enzo-passo1.css 31 | - Dentro do body, coloque os textos da imagem utilizando um `

` e `

` respectivamente 32 | - A cada alteração feita nos arquivos, abra no navegador e atualize a página para ver o resultado 33 | - -Veja no mapa mental anterior e localize a propriedade que altera o tamanho, depois use os tamanhos 26px e 48px respectivamente 34 | - Também localize a propriedade que altera a cor e utilize as cores #00a78e e #293651 35 | - No subtítulo vamos precisar trocar a fonte para uma que não tem serifa, utilize a propriedade font-family: sans-serif; 36 | - No título vamos precisar deixar o texto negrito, utilize a propriedade font-weight: bold; 37 | - Em todos os textos vamos precisar centralizar, procure no mapa mental a propriedade para esta finalidade e aplique de forma a deixar todos elementos centralizados 38 | - Se seu CSS e HTML estiverem sem erros, sua página deverá estar igual a da imagem acima, se algo deu errado, é melhor verificar primeiramente a sintaxe, ou seja, ver se todas as tags do HTML estão abrindo e fechando, se o CSS está sendo importado corretamente, se não faltou um ponto e vírgula no final de cada propriedade CSS etc… 39 | 40 | ### 🚀 Dica DEV #1 - Editor de código 41 | 42 | Utilize um editor de código, como o VSCODE 43 | 44 | ### 🏆 3.2 - Mais estilo nos textos 45 | 46 | ![CSS na prática](./imagens/exercicios-css-03-2-mais-estilo-nos-textos.png) 47 | 48 | Passos: 49 | 50 | - Crie o arquivo enzo-passo2.css com o conteúdo das regras de estilo acima 51 | - Crie o arquivo enzo-passo2.html com as marcações acima, note que o `` do código acima está incompleto 52 | - Crie um elemento `

` com a classe subtitle2 para formatar o texto “UI/UX & Web Designer …” 53 | - A cada mudança abaixo, salve o arquivo e atualize o navegador para ir vendo de forma incremental as alterações 54 | - Crie um parágrafo com a classe text para adicionar o texto: “Desenvolvedor front-end, apaixonado …” 55 | - A cor da fonte do subtitle2 é a mesma do título, o tamanho será 22px, o peso da fonte será 300 e para um melhor espaçamento entre letras, utilize um ajuste fino com a propriedade: letter-spacing: 2pt;. Utilize a família da fonte sem serifa (sans-serif) 56 | - O parágrafo tem a cor #76778c;, tamanho 20px, fonte também sem serifa e adicione também um letter-spacing: 1.2pt; 57 | - Ainda na classe .text e para melhorar o espaçamento ou distância com o texto anterior, adicione um line-height: 32px; 58 | - Note que na imagem acima, os textos estão centralizados, se tiver algum elemento não centralizado, adicione a propriedade que faz isto 59 | - Se seu CSS e HTML estiverem sem erros, sua página deverá estar igual a da imagem acima, se algo deu errado, verifique a sintaxe do HTML e do CSS, tenha certeza que os arquivos foram salvos e atualize seu navegador. 60 | 61 | ### 🚀 Dica DEV #2 - Codepen 62 | 63 | Estamos em um nível que já começamos a fazer as primeiras páginas e queremos mostrar para outras pessoas, obter feedback e quem sabe entender onde podemos melhorar, não faz sentido? 64 | 65 | Estamos precisando de uma plataforma para salvar nosso trabalho na internet. É aí que entra a plataforma [CodePen](https://codepen.io). Primeiramente será necessário criar uma conta, utilize o botão Sign Up na página principal ou acesse diretamente o link: https://codepen.io/accounts/signup/user/free. 66 | 67 | ### 🏆 3.3 - Formatando links e botões 68 | 69 | ![CSS na prática](./imagens/exercicios-css-03-3-formatando-links-e-botoes.png) 70 | 71 | Passos: 72 | 73 | - Crie os arquivos d3-passo3.html e d3-passo3.css 74 | - Tenha certeza que o CSS é importado na página 75 | - Digite ou copie as marcações e o estilo deste CodePen aqui (https://codepen.io/huogerac/pen/LYJjdvE) 76 | - Crie o elemento `Mais informações` 77 | - Adicione a classe .btn no arquivo CSS 78 | - Crie o estilo para a tag `` conforme as dicas de propriedades abaixo: 79 | 80 | - background-color: É a propriedade que adiciona uma cor de fundo em qualquer elemento HTML, assim como color, podemos colocar a cor no formato texto, por exemplo, background-color: blue; no formato RGB background-color: rgb(0, 0, 255); ou no formato Hexadecimal background-color: #0000ff; Nossa página do Enzo Pascal utiliza a uma variação da cor ciano: #00a78e; 81 | 82 | - border-radius: É a propriedade que deixa os cantos arredondados, onde o valor border-radius: 1px; faz um arredondamento de 1px o que é quase zero, uma sugestão é ir aumentando este valor até ficar parecido com o botão acima 83 | 84 | - padding: É a propriedade que adiciona um espaço interno a qualquer elemento HTML, para deixar o botão maior usando espaço interno, vamos adicionar 20px; na parte de cima e na parte de baixo (eixo x) e 40px nas laterais (eixo y), então a propriedade final fica assim: padding: 20px 40px; 85 | 86 | - text-decoration: É a propriedade que permite alterar o decorator padrão de links (text-decoration: underline;). Procure no seu site de busca pelo termo: "text-decoration MDN", esta é a forma de procurar sobre a documentação do site da Mozilla sobre qualquer propriedade CSS. Tente achar o valor desta propriedade para desligar o underline. 87 | 88 | Com as alterações das propriedades acima, falta agora apenas alterar as propriedades que já conhecemos, são elas: Propriedade de tamanho, cor da fonte e família da fonte. Sem passar mais detalhes, tente descobrir os valores de cada uma dessas propriedades de forma a deixar o botão o mais próximo possível da imagem deste exercício. 89 | 90 | ### 🚀 Dica DEV #3 - Chrome Dev Tools 91 | 92 | O Chrome DevTools é um conjunto de ferramentas para desenvolvimento web, ela já vem instalada no navegador Google Chrome. Com o DevTools podemos olhar detalhes de qualquer página, modificar e ver o resultado da alteração em tempo real. É a ferramenta ideal para nos ajudar a testar propriedades novas ou para ajudar a entender por que alguma coisa não está funcionando como esperado. 93 | 94 | ### 🏆 3.4 - Alinhar textos e espaçamentos 95 | 96 | ![CSS na prática](./imagens/exercicios-css-03-4-alinhar-textos-e-espacamentos.png) 97 | 98 | ### 🏆 3.5 - Tamanho e posicionar imagem 99 | 100 | ![CSS na prática](./imagens/exercicios-css-03-5-tamanho-e-posicionar-imagem.png) 101 | 102 | Passos: 103 | 104 | - Crie os arquivos d3-passo5.html e d3-passo5.css 105 | - Tenha certeza que o d3-passo5.css é importado na página 106 | -Compare o resultado do seu exercício #3.4 com as marcações e o estilo deste CodePen aqui (https://codepen.io/huogerac/pen/KKxZmqE). Sua página inicial tem que ficar o mais próximo possível desta página. 107 | - Adicione o atributo src na tag `` apontando para a imagem do Enzo ou da Enza Pascal. Para isto temos duas opções, baixar a imagem e colocá-la na mesma pasta do seu arquivo html ou adicionar o endereço da imagem na internet diretamente no atributo src. 108 | - Enza Pascal pode ser baixada aqui (https://raw.githubusercontent.com/devpro-br/ebook-t1-desafios/main/images/hero-enza.png) 109 | - Enzo Pascal pode ser baixado aqui (https://raw.githubusercontent.com/devpro-br/ebook-t1-desafios/main/images/hero-enzo.png) 110 | - A imagem têm as dimensões original de 676 x 652 pixels (tamanho x altura), podemos utilizar as propriedades width e height para alterá-las e assim exibir a imagem na página maior ou menor que seu tamanho original. 111 | - Utilize a ferramenta DevTools para alterar o width e height da imagem de forma a chegar no tamanho desejado. Veja a seção de dicas 112 | - Precisamos centralizar a imagem, mas note que se colocarmos o text-align: center diretamente na imagem, nada irá mudar. Tente colocar a imagem dentro de uma tag `
` e centralizar o conteúdo da div ao invés da imagem diretamente. 113 | 114 | ### 🏆 3.6 - Estilo de lista e cor de fundo 115 | 116 | ![CSS na prática](./imagens/exercicios-css-03-6-estilo-de-lista-e-cor-de-fundo.png) 117 | 118 | - Crie os arquivos d3-passo6.html e d3-passo6.css 119 | - Tenha certeza que o d3-passo6.css é importado na página 120 | - Compare o resultado do seu exercício #3.5 com as marcações e o estilo deste CodePen aqui (https://codepen.io/huogerac/pen/VwGJapg). Sua página inicial tem que ficar o mais próximo possível desta página. 121 | - Adicione inicialmente uma nova região utilizando a tag `
` 122 | - Adicione um `

` para o texto Projetos 123 | - Adicione uma lista não ordenada `