Para todos aqueles que estão iniciando a caminhada no meio Dev e sentem dificuldade de entender o conteúdo ou o que cada coisa faz.
Ao clonar esse repositório tenha a curiosidade de ir mudando algumas coisas como os containers, resoluções e elementos.
- Visual Studio Code
- Bootstrap << download opcional, possui tudo o que precisamos no site
Após baixar o Visual Studio realize as seguintes etapas:
- Abra o Folder onde salvou esse projeto
Essa parte já esstá feita mas deixarei o processo caso queira tentar tambem!
Como eu fiz para adicionar o bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Fundamentos</title>
<!-- AQUI ADD A PARTE DO CSS DO BOOTSTRAP -->
</head>
<body>
<p>Bem-vindo ao Fundamentos via CDN (Content Delivery Network)</p>
<!-- AQUI ADD A PARTE DE JS DO BOOTSTRAP -->
</body>
</html>
No site do bootstrap possui os sripts que deve copiar: https://getbootstrap.com/docs/4.4/getting-started/introduction/
Observação: Você deve colocar os scripts js por último por "n" motivos, um deles é porque o browser não vai renderizar a página enquanto ele não baixar o css & o script do js deve estar na ordem exata, se não, não irá funcionar.
Resumindo só segue o modelo (padrão).
- As estruturas precisam estar dentro de um container
É um elemento que vai conter dentro todos os outros elementos. Ele armazena as “div’s”.
O sistema de Grid (grade em português) no Bootstrap ajuda a alinhar o texto lado a lado e usa uma série de contêineres, linhas e colunas. O sistema Grid no Bootstrap usa ems e rems para definir a maioria dos tamanhos, enquanto os pxs são usados para pontos de interrupção da grade e larguras de contêiner. O sistema de grade de inicialização permite até 12 colunas na página.
Ele literalmente tem a forma de um container ^^
.col- Extra Small ( < 576 px ) .col-sm- Small ( >= 576 px ) .col-md- Medium ( >= 768 px ) .col-lg- Large ( >= 992 px ) .col-xl- Extra Large ( >= 1200 px )
Essa formatação é diferente em mobile!
Para comentar >> SHIFT + ALT + A
Para formatar documento(a visualização do código organizada em tela) >> SHIFT + ALT + F ou CTRL + ;
Por proporcionarem alguns cursos gratuitos: (https://www.treinaweb.com.br/)
Por publicar um conteúdo interessante: (https://www.geeksforgeeks.org/meaning-of-numbers-in-col-md-4-col-xs-1-col-lg-2-in-bootstrap/)
Feito com 💜 by Soonas