Lista de exercícios para os alunos praticarem programação web na disciplina Desenvolvimento Web I no curso de ciência da computação do IFC Videira. A lista contém exercícios práticos para serem resolvidos com HTML, CSS e JavaScript.
Crie a estrutura de diretórios abaixo para organizar os exercícios:
DesenWebI-lista-2024
│ README.md
│
└───exercicios
│ │
│ └───exercicio-xx
│ │ │ index.html
│ │ │ style.css
│ │ │ main.js
│ │ │ ...
│ │
Para cada exercício, crie um diretório exercicio-xx onde xx é o número do exercício. Dentro do diretório, crie os arquivos index.html, style.css, main.js e demais recursos para a solução do exercício. O aluno pode fazer um fork deste repositório para resolver os exercícios ou criar um repositório próprio.
Além disso, siga essas boas práticas em todos os exercícios:
display: block com float.display: flex com flex-direction, justify-content, align-items, etcdisplay: grid com grid-template-columns, grid-template-areas, etc<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TITULO AQUI</title>
<meta name="description" content="DESCRICAO AQUI" />
<meta name="author" content="SEU_NOME" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav class="navbar clearfix">
<a href="#" class="logo">Logotipo</a>
<div id="menu">
<ul>
<li class="menu-item">
<a class="menu-link" href="#">Parceiros</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Contato</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Sobre</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="jumbotron">
<div class="container clearfix">
<h1>Hello, world!</h1>
<p>
This is a template for a simple marketing or informational website.
It includes a large callout called a jumbotron and three supporting
pieces of content. Use it as a starting point to create something
more unique.
</p>
<p>
<a class="btn btn-primary">Learn more</a>
</p>
</div>
</div>
<div class="container clearfix">
<div class="linha">
<div class="coluna">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn btn-small btn-secondary">View details</a>
</p>
</div>
<div class="coluna">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn btn-small btn-secondary">View details</a>
</p>
</div>
<div class="coluna">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn btn-small btn-secondary">View details</a>
</p>
</div>
</div>
</div>
</main>
<footer>
<p>© SEU_NOME 2024</p>
</footer>
</body>
</html>
localStorage para que elas não sejam perdidas ao recarregar a página.localStorage esteja vazio.localStorage.webp. Leia a documentação da API para saber como fazer a requisição: https://picsum.photos/. Além disso, faça:
navigator.clipboard para fazer isso.navigator.mediaDevices.getUserMedia para acessar a câmera do dispositivo. Caso o dispositivo não tenha câmera, permitir que o usuário faça o upload de uma foto.navigator.geolocation para acessar a localização do dispositivo. Caso o dispositivo não tenha GPS, permitir que o usuário informe a localização manualmente.localStorage para que elas não sejam perdidas ao recarregar a página.history.pushState para navegar entre as páginas sem recarregar a página.localStorage.localStorage para armazenar os produtos no carrinho.Os produtos podem estar disponíveis em um arquivo JSON (Exemplo abaixo) ou em uma API externa como https://dummyjson.com/docs/products.
[
{
"id": 1,
"name": "Notebook",
"description": "Notebook Dell Inspiron 15 3000",
"price": 2999.99,
"category": "Notebook",
"brand": "Dell",
"images": ["notebook-dell.jpg", "notebook-dell-2.jpg"]
},
{
"id": 2,
"name": "Monitor",
"description": "Monitor LG 24' LED Full HD",
"price": 899.99,
"category": "Monitor",
"brand": "LG",
"images": ["monitor-lg.jpg", "monitor-lg-2.jpg"]
},
{
"id": 3,
"name": "Teclado",
"description": "Teclado Mecânico Gamer HyperX Alloy FPS",
"price": 299.99,
"category": "Teclado",
"brand": "HyperX",
"images": ["teclado-hyperx.jpg", "teclado-hyperx-2.jpg"]
}
]
fetch para carregar as perguntas de um arquivo JSON.fetch para carregar a próxima pergunta.setInterval para atualizar o cronômetro a cada segundo. Exibir uma mensagem de tempo esgotado caso o usuário não responda a tempo e finalizar o quiz.fetch para carregar as perguntas novamente.fetch para carregar as perguntas da IA.web scrapping para coletar informações sobre o corpo docente do curso (disponível em: https://videira.ifc.edu.br/ciencia-da-computacao/corpo-docente/). O sistema deve conter as seguintes funcionalidades: