treinamento-HTML-CSS

KO | EN

gitlite — search

#react #llm #golang #go #android #deep-learning #macos #windows #cli #kubernetes #vue #security #openai #ios

treinamento-HTML-CSS

(★ 8)

Mini projetos para treinar HTML e CSS

treinamento-HTML-CSS Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Treinamento-HTML-CSS

## 1.Descrição

O objetivo desse treinamento é fazer o participante adquirir conhecimento sobre as linguagens de marcação e estilização, HTML e CSS respectivamente.

As atividades são listadas com base na sua dificuldade e complexidade.

Ao final do treinamento o participante deverá ser capaz de estilizar uma página e estruturá-la.

Utilize o [treinamento HTML/CSS](https://github.com/Treina-Bolinho/treinamento-HTML-CSS/tree/master/interfaces), durante a realização deste treinamento.

## 2.Atividades

## 2.1 Entendendo a linguagem

### 2.1.1 Objetivo

- Entender como funciona a estrutura de arquivo HTML e CSS.
- Entender o que é frontend.

### 2.1.2 Tarefa HTML

Entender as tags de html:

#### 2.1.2.1 Após compreender o que a tag faz, escreva na tabela abaixo a sua funcionalidade.

|Tags|Funcionalidade|
|---|---|
|\<html>\</html>||
|\<head>\</head>||
|\<button>\</button>||
|\<nav>\</nav>||
|\<style>\</style>||
|\<script>\</script>||
|\<title>\</title>||
|\<body>\</body>||
|\<p>\</p>||
|\<a>\</a>||
|\<h1>\</h1>||
|\<h2>\</h2>||
|\<li>\</li>||
|\<ul>\</ul>||
|\<ol>\</ol>||
|\<div>\</div>||
|\<br>||
|\<hr>||

#### 2.1.2.2 Implementar uma página com tais informações:

- titulo da página: seu apelido
- titulo: seu nome
- subtitulo: matricula
- texto: seus objetivos no curso
- lista: todas as matérias que você já fez (pode ser só desse semestre)

faça isso no arquivo com o nome "Pagina1.html" [interfaces](https://github.com/Treina-Bolinho/treinamento-HTML-CSS/tree/master/interfaces).

Exemplo:

![image1](https://raw.githubusercontent.com/Treina-Bolinho/treinamento-HTML-CSS/master/imagens/first_exercise.png)

Dica:

#### Faça a visualização do arquivo, modo de fazer:

![gif1](https://raw.githubusercontent.com/Treina-Bolinho/treinamento-HTML-CSS/master/imagens/open_html.gif)

### 2.1.3 Tarefa CSS

Utilize a página do exercício anterior para estilizar e colocar as cores e tamanho de fonte como quiser.

Mas para isso você deve entender o conceito de classe e id, dentro de html. Vá a procura e quando encontrar diga para a gente:

|Tags|Funcionalidade|
|---|---|
|class||
|id||

Após isso implemente css, procure como implementar dentro do próprio arquivo html. Existe um jeito muito fácil, mas como nem tudo é um mar de rosas, da um google.

Um dos melhores sites para você pegar as coisas de html e css é o [W3schools](https://www.w3schools.com/). Use e abuse desse site maravilhoso.

### 2.1.4 Tarefa Geral

- Utilize as suas habilidades do treinamento para fazer uma página o mais parecido com:
- Use as imagens rasa.svg e rasa_conversartion.webp para criação dessa interface.

![imagem2](https://raw.githubusercontent.com/Treina-Bolinho/treinamento-HTML-CSS/master/imagens/site_rasa.png)

## Sites, vídeos e cursos

Segue a lista de alguns sites, vídeos e cursos que podem ajudar durante o treinamento.

- [W3schools](https://www.w3schools.com/)
- [Tutorial for Beginners](https://www.youtube.com/watch?v=J35jug1uHzE)
- [Tutorial HTML CSS](https://www.youtube.com/watch?v=kMT54MPz9oE)

## Observações

Qualquer dúvida sobre os projetos entre em contato com o grupo

treinamento-HTML-CSS

treinamento-HTML-CSS Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

treinamento-HTML-CSS

treinamento-HTML-CSS Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README