-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'devronier:main' into main
- Loading branch information
Showing
12 changed files
with
817 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <img width=100% src="https://capsule-render.vercel.app/api?type=waving&color=00bfbf&height=120§ion=header"/> | ||
|
|
||
| [](https://git.io/typing-svg) | ||
|
|
||
| ### Hi there 👋, I'm joaoNogueiradev | ||
| - 🔭 Currently looking for my first opportunity in the area | ||
| - 🌱 Studying Javascript, HTML and CSS | ||
| - 👀 Techs I look forward to learn: NodeJS, ExpressJS and Pythom | ||
| - 📫 My contact E-mail: [email protected] | ||
| - ⚡ Fun fact: Fluency in english language 📓 | ||
|
|
||
|
|
||
| <div> | ||
| <a href="mailto:[email protected]" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/Gmail-D14836?style=for-the-badge&logo=gmail&logoColor=white" alt="Gmail"></a> | ||
| <a href="https://www.linkedin.com/in/jo%C3%A3o-luiz-lima-nogueira-646580196/" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn"></a> | ||
| <a href="https://steamcommunity.com/profiles/76561199057907104/" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/Steam-000000?style=for-the-badge&logo=steam&logoColor=white" alt="Steam"></a> | ||
| </div> | ||
|
|
||
| <br> | ||
|
|
||
| <hr> | ||
|
|
||
| [](https://github.com/ashutosh00710/github-readme-activity-graph) | ||
|
|
||
| <br> | ||
|
|
||
| <div align="center"> | ||
| <img width="49%" height="195px" src="https://github-readme-stats.vercel.app/api?username=joaoNogueiradev&show_icons=true&count_private=true&hide_border=true&title_color=00bfbf&rank_icon=github&icon_color=00bfbf&text_color=c9d1d9&bg_color=0d1117" alt="joaoNogueiradev github stats" /> | ||
| <img width="41%" height="195px" src="https://github-readme-stats.vercel.app/api/top-langs/?username=joaoNogueiradev&layout=compact&hide_border=true&title_color=00bfbf&text_color=00bfbf&bg_color=0d1117" /> | ||
| </div> | ||
|
|
||
| <br><br> | ||
|
|
||
| ### Main skills: | ||
|  | ||
|  | ||
|  | ||
|
|
||
| ### Tools: | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|
|
||
| ### Techs & tools in which I am improving: | ||
|  | ||
|  | ||
|
|
||
| ### Studying in this moment: | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|  | ||
|
|
||
| <div align="center"> | ||
| <br><p align="centre"><b>Visitors Count</b></p> | ||
| <p align="center"><img align="center" src="https://profile-counter.glitch.me/{joaoNogueiradev}/count.svg" /></p> | ||
| <br></div> | ||
|
|
||
| <img width=100% src="https://capsule-render.vercel.app/api?type=waving&color=00bfbf&height=120§ion=footer"/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| introdução ao Desenvolvimento WEB |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| # Aula de 15/04/2024. | ||
|
|
||
|
|
||
| ## O que aprendemos? | ||
|
|
||
|
|
||
| 1. Apresentação da estrutura básica de um arquivo HTML. | ||
|
|
||
| 2. Principais tags de conteúdos textual: | ||
| * <p> | ||
| * <ul> | ||
| * <li> | ||
| * <div> | ||
|
|
||
| 3. Algumas tags de separação de conteúdo: | ||
| * <header> | ||
| * <main> | ||
| * <footer> | ||
| * <section> | ||
| * <h1> a <h6> | ||
|
|
||
| 4. Tags de semântica textual inline: | ||
| * <a> | ||
| * <b> | ||
| * <strong> | ||
| * <br> | ||
|
|
||
| 5. Tag de multimedia: <img> | ||
|
|
||
| 6. Navegação entre páginas HTML. | ||
|
|
||
| 7. Importação de uma imagem de fora, e de dentro, da pasta do projeto. | ||
|
|
||
| ## Tarefa de casa: | ||
|
|
||
| 1. Resolver até o desafio 30 na trilha de desenvolvimento web do freecodecamp, e enviar o print no grupo da turma FS16 no WhatsApp. | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| Formulários | ||
| Durante nossa jornada como desenvolvedores, frequentemente nos deparamos com situações em que precisamos "capturar" os dados dos usuários dos sistemas que desenvolvemos. Seja em um login ou na realização de um pedido em uma aplicação de delivery, quase sempre precisaremos dos dados que os usuários estão fornecendo. | ||
|
|
||
| Para isso, no desenvolvimento web, frequentemente utilizamos formulários. Em HTML, empregamos a tag <form></form> para criar essas estruturas de entrada de dados. | ||
|
|
||
| Estrutra báse de um Formulário: | ||
| <form> | ||
| <!--Conteudo do formulário--> | ||
| </from> | ||
| Mas como pegaremos esses dados? | ||
|
|
||
| Para isso, precisamos de compos, onde os usuário, poderá fornecernos as informações, como emal, senha, nome e sobrenome. Em HTML, esses campos são chamados de Inputs. | ||
|
|
||
| <input /> | ||
| Essa tag faz parte do grupo de self-closing tags, ou seja, são tags do HTML que não necessitam ser fechadas, pois são tags que não irão envolver um outro elemento da página. | ||
|
|
||
| Dentro dessa tag, poderam ser fornecidos alguns atributos, como o tipo de input, o valor padão dele, um dica de o que ele deve conter, ou o que deve ser fornecido pelo usuário nele. | ||
|
|
||
| Além disso, precisamos identificar essa entrada de dados. Afinal, como o usuário vai saber onde deve informar o e-mail, ou a senha, se isso não for informado? | ||
|
|
||
| Para isso, utiizamos tags label, essa também terão diversos atributos que podes ser passados para ela, e com ela vai envolver uma informação(como o nome do campo), essa tag precisa ser fechada. | ||
|
|
||
| Exemplo: | ||
| <label for="nome">Nome</label> | ||
| <input id="nome" type="text" placeholder="digite aqui o seu nome" /> | ||
| Tipos de input | ||
|
|
||
| <input type="button"> | ||
| <input type="checkbox"> | ||
| <input type="color"> | ||
| <input type="date"> | ||
| <input type="datetime-local"> | ||
| <input type="email"> | ||
| <input type="file"> | ||
| <input type="hidden"> | ||
| <input type="image"> | ||
| <input type="month"> | ||
| <input type="number"> | ||
| <input type="password"> | ||
| <input type="radio"> | ||
| <input type="range"> | ||
| <input type="reset"> | ||
| <input type="search"> | ||
| <input type="submit"> | ||
| <input type="tel"> | ||
| <input type="text"> | ||
| <input type="time"> | ||
| <input type="url"> | ||
| <input type="week"> | ||
| Atributos da tag form | ||
|
|
||
| Atributo Valor Descrição | ||
| https://www.w3schools.com/tags/att_form_accept_charset.asp character_set Especifica as codificações de caracteres que serão usadas para o envio do formulário | ||
| https://www.w3schools.com/tags/att_form_action.asp URL Especifica para onde enviar os dados do formulário quando um formulário é enviado | ||
| https://www.w3schools.com/tags/att_form_autocomplete.asp onoff Especifica se um formulário deve ter o preenchimento automático ativado ou desativado | ||
| https://www.w3schools.com/tags/att_form_enctype.asp application/x-www-form-urlencodedmultipart/form-datatext/plain Especifica se um formulário deve ter o preenchimento automático ativado ou desativado | ||
| Especifica como os dados do formulário devem ser codificados ao enviá-los ao servidor (apenas para method="post") | ||
| https://www.w3schools.com/tags/att_form_method.asp getpost Especifica o método HTTP a ser usado ao enviar dados de formulário | ||
| https://www.w3schools.com/tags/att_form_name.asp text Especifica o nome de um formulário | ||
| https://www.w3schools.com/tags/att_form_novalidate.asp novalidate Especifica que o formulário não deve ser validado quando enviado | ||
| https://www.w3schools.com/tags/att_form_rel.asp externalhelplicensenextnofollownoopenernoreferreropenerprevsearch Especifica a relação entre um recurso vinculado e o documento atual | ||
| https://www.w3schools.com/tags/att_form_target.asp _blank_self_parent_top Especifica onde exibir a resposta recebida após o envio do formulário | ||
| Curiosidade: | ||
| Os formulários foram adicionados ao HTML com a introdução do HTML 2.0 em 1995. Eles foram projetados para permitir interações mais complexas entre usuários e sites, facilitando a entrada de dados que poderiam ser enviados para um servidor web. Isso ampliou significativamente a capacidade do HTML, transformando-o de um simples mecanismo para publicação de documentos hipertexto em uma ferramenta robusta para construção de aplicações interativas na web. | ||
|
|
||
| 🏡Tarefa de casa: | ||
| Estudar sobre inputs HTML, e como devem ser utilizado. | ||
| Estudar sobre os atributos do Formulário HTML, e onde podem ser aplicados. | ||
| Resolver até a questão 20 do Freecodecamp. | ||
| Atualizar o Card na página do notion da turma. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| ## Introdução a CSS (Cascading Style Sheets) | ||
|
|
||
| CSS (Cascading Style Sheets) ou "Folha de Estilo em Cascata", é uma linguagem de estilo usada para definir a apresentação visual de documentos HTML. O termo "cascata" refere-se à forma como as regras de estilo são aplicadas no documento, respeitando uma hierarquia que define quais estilos têm prioridade. Com CSS, é possível controlar aspectos como cores, fontes, espaçamentos, e layout de diversos elementos, como textos, imagens e tabelas. Essa separação entre conteúdo (HTML) e estilo (CSS) simplifica a manutenção e a personalização das páginas web. | ||
|
|
||
| ### Primeiros passos com CSS. | ||
|
|
||
| Inicialmente iremos criar um arquivo HTML, para que possamos estiliza-lo. Dentro desse documento, iremos definir um elemento do tipo título com o seguinte conteudo: “FS16 - Aula 7” | ||
| ``` | ||
| <!DOCTYPE html> | ||
| <html lang="pt-BR"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Aula 7</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>FS16 - Aula 7</h1> | ||
| </main> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| Agora imagine que nossa missão é fazer com que esse titulo **`<h1></h1>`** , fique na cor vermelha, e que sua cor de fundo seja preta. | ||
|
|
||
| Para isso, vamos criar um arquivo ***style.css***, e dentro dele iremos selecionar o elemento que queremos estilizar, e definir qual estilo queremos aplicar nele, em nosso exemplo, vamos precicar alterar a cor do texto e a cor do fundo do elemento. | ||
| ``` | ||
| h1 { | ||
| color: red; | ||
| background-color: black; | ||
| } | ||
| ``` | ||
| Feito isso, você poderá observar que nada aconteceu com nosso documento HTML, ele ainda continua exatamente da mesma forma. Bem isso acontece porque, para que as estilizações sejam lidas e aplicadas aquela página pelo navegador, precisamos ligar, ou linkar, o nosso documento HTML, com nosso arquivo CSS. | ||
|
|
||
| Para isso, vamos definir um link, no *<head></head>*: | ||
| ``` | ||
| <!DOCTYPE html> | ||
| <html lang="pt-BR"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <!-- Substitua o "style.css", pelo caminho que o arquivo css está salvo em seu computador. | ||
| Em nosso exemplo, ele encontra-se na mesma pasta que o documento HTML, por isso pode ser | ||
| definido desta forma. --> | ||
| <title>Aula 7</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>FS16 - Aula 7</h1> | ||
| </main> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| Agora sim, verificando nosso site, ele já tem o título vermelho, e a cor de fundo do titulo, em preto, de acordo com a missão que nos foi dada. | ||
| ### Seletores CSS | ||
|
|
||
| Até agora, aprendemos como estilizar o título de um documento HTML. Mas, como faríamos para estilizar elementos de forma individualizada em um arquivo como este? | ||
| ``` | ||
| <!DOCTYPE html> | ||
| <html lang="pt-BR"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <!-- Substitua o "style.css", pelo caminho que o arquivo css está salvo em seu computador. | ||
| Em nosso exemplo, ele encontra-se na mesma pasta que o documento HTML, por isso pode ser | ||
| definido desta forma. --> | ||
| <title>Aula 7</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>FS16 - Aula 7</h1> | ||
| <p>Esse texto deve ser verde</p> | ||
| <p>Esse texto deve ser azul</p> | ||
| </main> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| Para isso, utilizamos o que chamamos de *seletores* em CSS. Os seletores nos permitem definir quais elementos do HTML queremos estilizar. Existe uma grande variedade de seletores que podemos utilizar para selecionar de forma precisa os elementos de um documento CSS, os mais comuns deles são: | ||
|
|
||
| - Tag: Utilizado quando queremos estilizar todos os elementos que possuem o mesmo tipo de tag HTML. Para definir esse seletor basta digitarmos o nome da tag, em nosso arquivo de estilização. | ||
| - Classe: Utilizado quando queremos estilizar todos os elementos que contem a mesma classe. E para definir ele, utiliza-se um . a frente do nome da classe, no arquivo de estilização | ||
| - ID: Por boas práticas, ID’s, devem ser únicos em um documento HTML, então utilizamos esse seletor quando queremos estilizar, expecificamente o elemento que contem o ID fonecedo. E para defilido, utilizamos um # a frente do ID, no arquivo de estilização. | ||
|
|
||
| Lembrando que como estamos lidando com uma estilização em cascata, existe uma relação de hierarquia, entre os seletores, mas isso vai ficar como lição de casa para você. | ||
|
|
||
| > Vale lembrar que a os metodos e valores de estilização de um elemento, devem ser definidos dentro de *“Chaves”,* em nosso arquivo de estilização. | ||
| > | ||
| Seguindo com o exemplo, como queremos aplicar a estilização expecificamente em cada um dos elementos da páginas, vamos utilizar o seletor do tipo ID. Então precisamos defir um ID para cada um dos paragrafos da página. | ||
| ``` | ||
| <!DOCTYPE html> | ||
| <html lang="pt-BR"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <!-- Substitua o "style.css", pelo caminho que o arquivo css está salvo em seu computador. | ||
| Em nosso exemplo, ele encontra-se na mesma pasta que o documento HTML, por isso pode ser | ||
| definido desta forma. --> | ||
| <title>Aula 7</title> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>FS16 - Aula 7</h1> | ||
| <p id="texto-verde">Esse texto deve ser verde</p> | ||
| <p id="texto-azul">Esse texto deve ser azul</p> | ||
| </main> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| Agora que temos nossos elementos, separados por ID’s, podemos estiliza-los, individualmente. | ||
|
|
||
| Em nosso arquivo de estilização faremos o seguinte: | ||
| ``` | ||
| #texto-verde { | ||
| color: green; | ||
| } | ||
| #texto-azul { | ||
| color: blue; | ||
| } | ||
| ``` | ||
| Fazendo isso, deveremos ter resultado final, uma página dessa forma: | ||
|  | ||
| ## 🏠Tarefa de casa: | ||
|
|
||
| - Estudar sobre [CSS Bem](https://getbem.com/introduction/). | ||
| - Pesquisar sobre a hierarquia de seletores em CSS. | ||
| - Resolver até a questão 40 do [freecodecamp](https://www.freecodecamp.org/learn/). |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.