Editar | Versões | Fórum de Discussão
Prazos para Envio
Introdução e Configuração do Ambiente
Introdução
Páginas HTML contém apenas marcações de hipertexto que, normalmente, não são nem um pouco visualmente atrativas. Por esse motivo precisamos estilizar essas páginas e modificar o visual dos elementos. Para isso, utilizamos o CSS (Cascading Stylesheets).
Com o CSS, podemos selecionar elementos da nossa página (ou classes de elementos) e modificar suas características visuais como cores, tamanho, disposição na tela. Podemos também inserir regras para realizar adaptações para tamanhos de telas diferentes e até mesmo fazer animações!
Neste tutorial faremos o desenvolvimento e a estilização da página do nosso game de adivinhação, adaptado de https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash
O Jogo de Adivinhação
Nesta série de tópicos iremos utilizar como base o tutorial “Um Primeiro Mergulho no Javascript”, elaborado pela equipe do Mozilla. Esse tutorial consiste no desenvolvimento de um Jogo de Adivinhação. Nele o computador irá gerar um número aleatório e o jogador tentará adivinhar esse número em uma quantidade finita de palpites. Para facilitar, o jogo também irá fornecer dicas para que o jogador saiba se o seu palpite foi muito alto ou muito baixo. Veja a página que iremos construir, estilizar e animar.
Desse modo, iremos passar pelos conceitos básicos da programação Web, como construção de páginas Web, estilização e animação utilizando CSS e Javascript. Siga adiante e, principalmente, divirta-se :-)
O Ambiente de Desenvolvimento
Para este tutorial vamos utilizar uma das ferramentas mais populares na Web para desenvolvimento de Apps: O visual Studio Code.
Faça o Download da ferramenta em https://code.visualstudio.com/download e instale no seu PC de acordo com o seu sistema operacional.
Crie uma pasta chamada JogoAdivinhacao que irá armazenar os arquivos desse projeto.
-
Inicie o Visual Studio Code e crie um Novo Arquivo.
-
Salve o arquivo com o nome “jogo” e extensão “.html”, para indicar que esse arquivo é um arquivo HTML.
Agora vamos escrever o nosso código HTML. Siga Adiante!