Entrar Ainda não tem acesso?
4
respostas

[Sugestão] Lista de Exercícios

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Layout e tags semânticas e atividade Lista de exercícios

por Paulo Camargo Fernandes
| 12.9k xp | 58 posts
Militar Aposentado

Após pesquisa e práticas de tentativas e erros adicionei os cinco exercícios no meu projeto de Portfólio conforme segue:

<!DOCTYPE html>
<html>
<head>
    <title>Meu Portfólio</title>
    <style>
        h1 {
            color: blueviolet;
        }
        p {
            color: blue;
        }
        button {
            background-color: cyan;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px; /* Adiciona um espaço entre os botões */
        }
        img {
            width: 200px;
            height: auto;
            border-radius: 50%;
            border: 2px solid black;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        }
        .button-container {
            margin-top: 10px; /* Adiciona um espaço acima dos botões */
        }
        .secoes {
            display: none; /* Oculta as seções inicialmente */
        }
    </style>
    <script>
        function mostrarSecao(id) {
            const secoes = document.querySelectorAll('.secoes');
            secoes.forEach(secao => {
                secao.style.display = 'none'; // Oculta todas as seções
            });
            document.getElementById(id).style.display = 'block'; // Mostra a seção clicada
        }
    </script>
</head>
<body>
    <header>
        <nav><!--Definir setor de Navegação-->
            <ul style="list-style-type: none; padding: 0;">
                <li style="display: inline; margin-right: 20px;"><a href="javascript:void(0);" onclick="mostrarSecao('sobre')">Sobre</a></li>
                <li style="display: inline; margin-right: 20px;"><a href="javascript:void(0);" onclick="mostrarSecao('projetos')">Projetos</a></li>
                <li style="display: inline; margin-right: 20px;"><a href="javascript:void(0);" onclick="mostrarSecao('habilidades')">Habilidades</a></li>
                <li style="display: inline; margin-right: 20px;"><a href="javascript:void(0);" onclick="mostrarSecao('contato')">Contato</a></li>
            </ul>
        </nav>
    </header>

    <div>
        <h1>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Paulo Camargo Fernandes, Estudante de programação. Posso ajudar a sua empresa a ter uma página WEB de qualidade! Vamos conversar?</p>
        <img src="paulointernet.jpg" alt="Foto do Paulo Camargo futuro Desenvolvedor">
        <div class="button-container">
            <button>
                <a href="https://www.instagram.com/paulocamargo.psic" target="_blank">Instagram</a>
            </button>
            <button>
                <a href="https://www.facebook.com/paulocarmargo.psic" target="_blank">Facebook</a>
            </button>
        </div>
    </div>

    <div id="sobre" class="secoes">
        <h2>Sobre</h2>
        <p>Projeto de Páginas WEB, readequação de projetos antigos e acessoria Front-end.</p>
    </div>

    <div id="projetos" class="secoes">
        <h2>Projetos</h2>
        <p>Aqui estão alguns dos projetos que desenvolvi:</p>
        <ul>
            <li>Projeto 1: Projeto HTML - Básico.</li>
            <a href=https://github.com/machado10666/meu-projetobase-HTML.git>Github</a>
            <li>Projeto 2: Amigo Secreto.</li>
            <a href=https://github.com/machado10666/aula-amigo-secreto.git>Github</a>
           <li>Projeto 3: Carrinho de Compras.</li>
           <a href=https://github.com/machado10666/Carrinho-Compras.git>Github</a>
        </ul>
    </div>

    <div id="habilidades" class="secoes">
        <h2>Habilidades</h2>
        <p>Conhecimentos em:</p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Github</li>
        </ul>
    </div>

    <div id="contato" class="secoes">
        <h2>e-mail: fernandesmetal721@mail.com</h2>
        <p>Você pode me contatar pelo número: (011) 947782191</p>
4 respostas
por Karina Ivanova Varlamova
| 94.9k xp | 212 posts

Olá, Paulo! Desculpe, mas você escreve sobre cinco projetos, e no html só tem três (básico, amigo secreto, carrinho de compras). Ou perdi algo?

por Paulo Camargo Fernandes
| 12.9k xp | 58 posts
Militar Aposentado

Bom dia Karina obrigado por comentar, porém eu acho que o meu texto não foi bem interpretado, são 5 exercios propostos de estilização CSS, e eu os usei no HTML do meu portifólio.No campo projetos eu coloquei apenas três para praticar. Eu não citei que havia 5 projetos no Portifólio, e sim que há 5 atividades neste HTML. Tirando este equívoco, o meu código está bem estruturado e funcional?

por Karina Ivanova Varlamova
| 94.9k xp | 212 posts

Olá Paulo!

O código está bem estruturado e funcional, mas eu faria algumas melhorias. Algumas sugestões:

Corrigir os links dos projetos - envolver os textos dentro das tags a para que fiquem clicáveis corretamente. Adicionar alt em todas as imagens e utilizar title nos links. Mudar a paleta de cores. O azul e o cyan podem não ter um bom contraste. Botões mais estilizados. Os botões contêm links internos, mas melhor é estilizar os a diretamente ou fazer o button disparar um evento JavaScript. Melhorar espaçamento (margin e padding). Centralizar o conteúdo (max-width). Não usar javascript void. Isso não é necessário, pois os eventos onclick já estão sendo usados. Otimizar document querySelector All.

por Karina Ivanova Varlamova
| 94.9k xp | 212 posts
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Portfólio - Paulo Camargo Fernandes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        header {
            background: #6a0dad;
            padding: 15px 0;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin: 0 15px;
        }
        nav a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }
        h1 {
            color: #6a0dad;
        }
        p {
            color: #333;
        }
        button {
            background-color: #008cba;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
            border-radius: 5px;
        }
        button a {
            color: white;
            text-decoration: none;
        }
        img {
            width: 150px;
            height: auto;
            border-radius: 50%;
            border: 2px solid black;
            box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
        }
        .secoes {
            display: none;
            margin-top: 20px;
        }
        .ativo {
            display: block;
            animation: fadeIn 0.5s ease-in-out;
        }
    </style>
    <script>
        function mostrarSecao(id) {
            document.querySelectorAll('.secoes').forEach(secao => secao.classList.remove('ativo'));
            document.getElementById(id).classList.add('ativo');
        }
    </script>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#" onclick="mostrarSecao('sobre')">Sobre</a></li>
                <li><a href="#" onclick="mostrarSecao('projetos')">Projetos</a></li>
                <li><a href="#" onclick="mostrarSecao('habilidades')">Habilidades</a></li>
                <li><a href="#" onclick="mostrarSecao('contato')">Contato</a></li>
            </ul>
        </nav>
    </header>

    <div>
        <h1>Eleve seu negócio digital com um <strong>Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Paulo Camargo Fernandes, estudante de programação. Posso ajudar sua empresa a ter uma página WEB de qualidade! Vamos conversar?</p>
        <img src="paulointernet.jpg" alt="Foto do Paulo Camargo, futuro desenvolvedor" title="Paulo Camargo Futuro Dev">
        <div>
            <button><a href="https://www.instagram.com/paulocamargo.psic" target="_blank">Instagram</a></button>
            <button><a href="https://www.facebook.com/paulocarmargo.psic" target="_blank">Facebook</a></button>
        </div>
    </div>

    <section id="sobre" class="secoes">
        <h2>Sobre</h2>
        <p>Projeto de Páginas WEB, readequação de projetos antigos e assessoria Front-end.</p>
    </section>

    <section id="projetos" class="secoes">
        <h2>Projetos</h2>
        <p>Aqui estão alguns dos projetos que desenvolvi:</p>
        <ul>
            <li>
                <a href="https://github.com/machado10666/meu-projetobase-HTML.git" target="_blank">Projeto HTML - Básico</a>
            </li>
            <li>
                <a href="https://github.com/machado10666/aula-amigo-secreto.git" target="_blank">Amigo Secreto</a>
            </li>
            <li>
                <a href="https://github.com/machado10666/Carrinho-Compras.git" target="_blank">Carrinho de Compras</a>
            </li>
        </ul>
    </section>

    <section id="habilidades" class="secoes">
        <h2>Habilidades</h2>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>GitHub</li>
        </ul>
    </section>

    <section id="contato" class="secoes">
        <h2>Contato</h2>
        <p>Email: <a href="mailto:fernandesmetal721@mail.com">fernandesmetal721@mail.com</a></p>
        <p>Telefone: (11) 94778-2191</p>
    </section>
</body>
</html>