CS50-MCZ

Homepage

Construa uma página inicial simples usando HTML, CSS e JavaScript.

Contexto

A internet possibilitou coisas incríveis: podemos usar um mecanismo de busca para pesquisar qualquer coisa imaginável, comunicar com amigos e familiares ao redor do mundo, jogar jogos, fazer cursos e muito mais. Mas acontece que quase todas as páginas que visitamos são construídas com três linguagens principais, cada uma com um propósito ligeiramente diferente:

HTML, ou Linguagem de Marcação de Hipertexto, que é usada para descrever o conteúdo dos sites;
CSS, Folhas de Estilo em Cascata, que é usada para descrever a estética dos sites; e
JavaScript, que é usado para tornar os sites interativos e dinâmicos.

Crie uma página inicial simples que apresente você mesmo, seu hobby ou atividade extracurricular favorito, ou qualquer outra coisa de interesse para você.

Começando

Acesse code.cs50.io, clique na janela do seu terminal e execute cd sozinho. Você deve encontrar que o prompt da janela do seu terminal se assemelha ao abaixo:

Depois execute

wget https://cdn.cs50.net/2022/fall/psets/8/homepage.zip

para baixar um arquivo ZIP chamado homepage.zip para o seu espaço de código.

Em seguida, execute

unzip homepage.zip

para criar uma pasta chamada homepage. Você não precisa mais do arquivo ZIP, então pode executar

rm homepage.zip

e responda com "y" seguido de Enter no prompt para remover o arquivo ZIP que você baixou.

Agora digite

cd homepage

seguido de Enter para se mover para dentro (ou seja, abrir) esse diretório. Seu prompt agora deve se parecer com o abaixo.

homepage/ $

Execute ls sozinho e você deverá ver alguns arquivos:

index.html  styles.css

Se você encontrar algum problema, siga novamente essas mesmas etapas e veja se consegue determinar onde errou! Você pode iniciar imediatamente um servidor para visualizar seu site executando

http-server

na janela do terminal. Em seguida, clique com o botão direito (se estiver no Mac) ou clique com o botão de controle (se estiver no PC) no primeiro link que aparecer:

http-server executando em LINK

Onde LINK é o endereço do seu servidor.

Especificação

Implemente no diretório da sua página inicial (homepage) um site que deve:

Conter pelo menos quatro páginas diferentes com a extensão .html, sendo que uma delas deve ser index.html (a página principal do seu site), e deve ser possível navegar de qualquer página do seu site para qualquer outra página através de um ou mais hiperlinks.
Utilizar pelo menos dez (10) tags HTML distintas, além das tags <html>, <head>, <body> e <title>. O uso repetido de uma mesma tag (por exemplo, <p>) conta apenas como uma (1) das dez!

Integrar um ou mais recursos do Bootstrap no seu site. Bootstrap é uma biblioteca popular (que vem com muitas classes CSS e mais) através da qual você pode embelezar o seu site. Consulte a documentação do Bootstrap para começar. Em particular, você pode achar alguns dos componentes do Bootstrap interessantes. Para adicionar o Bootstrap ao seu site, basta incluir

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
      

em suas páginas, abaixo do <head>, você também pode incluir

<link href="styles.css" rel="stylesheet">
      

para vincular seu próprio CSS.

Tenha pelo menos um arquivo de estilo próprio, styles.css, que utilize pelo menos cinco (5) seletores CSS diferentes (por exemplo, tag (exemplo), classe (.exemplo) ou ID (#exemplo)), e dentro do qual você use um total de pelo menos cinco (5) propriedades CSS diferentes, como font-size ou margin; e
Integre uma ou mais funcionalidades do JavaScript em seu site para torná-lo mais interativo. Por exemplo, você pode usar JavaScript para adicionar alertas, ter um efeito em intervalos recorrentes ou adicionar interatividade a botões, menus suspensos ou formulários. Sinta-se à vontade para ser criativo!
Certifique-se de que seu site seja visualmente agradável em navegadores tanto em dispositivos móveis quanto em laptops e desktops.

Testando

Se você quiser ver como seu site está enquanto trabalha nele, você pode executar o http-server. Clique com o botão direito ou pressione Control e clique no primeiro link apresentado pelo http-server, o que deve abrir sua página da web em uma nova guia. Em seguida, você poderá atualizar a guia que contém sua página da web para ver as alterações mais recentes.

Lembre-se também de que, ao abrir as Ferramentas de Desenvolvedor no Google Chrome, você pode simular a visita à sua página em um dispositivo móvel clicando no ícone em forma de telefone à esquerda de Elementos na janela das ferramentas de desenvolvedor, ou, uma vez que a guia das Ferramentas de Desenvolvedor já tenha sido aberta, digitando Ctrl+Shift+M em um PC ou Cmd+Shift+M em um Mac, em vez de precisar visitar seu site em um dispositivo móvel separadamente!

Avaliação

Não há check50 para esta tarefa! Em vez disso, a correção do seu site será avaliada com base no cumprimento dos requisitos da especificação descrita acima e na validade do seu HTML. Para garantir que suas páginas estejam corretas, você pode usar este Serviço de Validação de Marcação, copiando e colando seu HTML diretamente na caixa de texto fornecida. Tome cuidado para eliminar quaisquer avisos ou erros sugeridos pelo validador antes de enviar!

Considere também:

se a estética do seu site é intuitiva e fácil de navegar para o usuário;
se o seu CSS foi separado em arquivo(s) CSS separado(s); e
se você evitou repetições e redundâncias através da "cascata" de propriedades de estilo a partir das tags pai.

Infelizmente, o style50 não suporta arquivos HTML, então é sua responsabilidade organizar e alinhar suas tags HTML de forma limpa. Saiba também que você pode criar um comentário HTML com:

<!-- Comment goes here -->

mas comentar o seu código HTML não é tão imperativo como o é ao comentar código em, por exemplo, C ou Python. Você também pode comentar o seu CSS, em arquivos CSS, com:

/* Comment goes here */

Dicas

Para guias bastante abrangentes sobre as linguagens apresentadas neste problema, confira estes tutoriais:

Como enviar

No seu terminal, execute o comando abaixo para enviar o seu trabalho.

submit50 cs50/problems/2023/x/homepage