Modelo de Entrega Do Trabalho - VF

CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER
ESCOLA SUPERIOR POLITÉCNICA

CURSO
FERRAMENTAS DA PROGRAMAÇÃO WEB
ATIVIDADE PRÁTICA
NOME, RU
CIDADE-ESTADO
2023
1. Estrutura de pastas do projeto
2. COLOCAR NOME DOS ARQUIVOS

(COPIAR CÓDIGO)
Nome do arquivo: index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="../styles/home.css">
<link rel="stylesheet" href="../styles/global.css">
<script defer src="../scripts/getNavBar.js"></script>
<script src="../scripts/getFooter.js"></script>
</head>
<body>
<div class="nav-placeholder"></div>
<main class="home-container">
<article>
<img src="../assets/programmer.jpg" alt="programmer-stock-img"
width="365" height="365" />
<section>
1
<h1>Kaique Ricardo de melo</h1>
<h3>Programador & Estudante</h3>
<p>
Meu nome é Kaique, e sou um desenvolvedor fullstack apaixonado
por solucionar problemas através da programação.
</p>
<p>
No momento, trabalho como freelancer, onde utilizo as stacks
Next.js e Nest.js do JavaScript para criar soluções inovadoras e eficientes
para meus clientes.
</p>
<div class="content-row">
<h2>Mais</h2>
<ul>
<li>
<a href="./education.html">
Formação
</a>
</li>
<li>
<a href="https://kai-dev-portfolio.vercel.app">
Portfólio
</a>
</li>
<li>
<a href="./contact.html">
Contato
</a>
</li>
<li>
<a href="./about.html">
Sobre
</a>
</li>
</ul>
</div>
</section>
</article>
</main>
<div class="footer-placeholder"></div>
</body>
</html>
Nome do arquivo: about.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sobre Mim</title>
<link rel="stylesheet" href="../styles/about.css">
<script src="../scripts/getNavBar.js"></script>
</head>
<body>
<header>
</header>
<div class="container">

<div class="section">
<h2>Apresentação</h2>
<p>
Olá! Meu nome é Kaique Ricardo de Melo, tenho 19 anos e sou desen-
volvedor full stack especializado em Javascript.
Atualmente trabalho como freelancer e tenho experiência em criar
diversos projetos, como aplicações de gerenciamento de estoque e
sites de documentação. Sou apaixonado por tecnologia e sempre
busco novas oportunidades para me aprimorar e colaborar
com empresas que valorizam a inovação.
</p>
</div>


<h2>Minha História na Tecnologia</h2>
<p>
Minha jornada na tecnologia começou aos 12 anos, quando ganhei meu
primeiro computador. Logo me apaixonei por um jogo chamado "Minecraft", mas
jogar não era suficiente para mim. Eu queria entender como as coisas funciona-
vam dentro do jogo e, assim, fui introduzido ao mundo dos mods. Não demorou
muito para que eu me divertisse mais criando modificações em Java para o jogo
do que realmente jogando.
</p>
<p>
Com o tempo, desenvolvi um interesse crescente pelo desenvolvi-
mento de jogos. Comecei a criar projetos básicos no RPG Maker, que utilizava
uma linguagem chamada "Ruby Game Scripting System". Esse período foi muito
formativo e despertou em mim a vontade de me tornar um desenvolvedor de jogos.
</p>
<p>
No entanto, após meu computador parar de funcionar, acabei me
afastando do mundo da programação por alguns anos. Foi só em 2022 que retomei
minha paixão, ao iniciar um curso técnico integrado ao ensino médio. Nesse
curso, fui introduzido ao desenvolvimento web, uma área que rapidamente captu-
rou minha atenção e na qual decidi me especializar.
</p>
<p>
Depois de um ano no curso, decidi continuar meus estudos de forma
autodidata, buscando aprofundar meus conhecimentos e habilidades. Recente-
mente, entrei no curso de Análise e Desenvolvimento de Sistemas na Uninter,
onde continuo aprimorando minhas competências.
</p>
<p>
Atualmente, estou focado no desenvolvimento web, combinando meus
estudos na Uninter com projetos práticos que me permitem aplicar e expandir o
que aprendo.
</p>
</div>


<h2>Habilidades</h2>
<ul class="skills-list">
<li>JavaScript</li>
<li>React</li>
<li>Node.js</li>
<li>Express</li>
<li>MongoDB</li>
<li>MySql</li>
<li>Next.js</li>
<li>Nest.js</li>
<li>Integração de API</li>
</ul>
</div>


<h2>Hobbies</h2>
<ul class="hobbies-list">
<li>Musculação</li>
<li>Leitura</li>
<li>Programação</li>
</ul>
</div>
</div>
<div class="footer-placeholder">
</div>
</body>
</html>
Nome do arquivo: contact.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contato</title>
<link rel="stylesheet" href="../styles/contact.css">
<link rel="stylesheet" href="../styles//global.css">
<script src="../scripts/sendEmail.js"></script>
<script src="../scripts/getNavBar.js"></script>
</head>
<body>
<h1>Entre em Contato</h1>
<form>
<label class="normal-label">
<span>Nome</span>
<input id="name" type="text" placeholder="Seu Nome...">
</label>
<span>Email</span>
<input id="email" type="email" placeholder="Seu E-Mail...">
</label>
<span>Mensagem</span>
<textarea id="message" placeholder="Sua mensagem..."></texta-
rea>
</label>
<label class="checkbox-row">
<input id="checkbox" type="checkbox" value="false">
<span>Confirmar Envio?</span>
</label>
<button id="send-btn">Enviar</button>
</form>
</div>
<div id="pop-up" class="pop-up">

<div class="pop-up-content">
<span class="close-btn">×</span>
<h2>Sua Mensagem:</h2>
<p>Nome: <span id="name-popup"></span></p>
<p>E-Mail <span id="email-popup"></span></p>
<p>Message: <span id="message-popup"></span></p>
<p>Mensagem enviada com sucesso!</p>

<button class="confirm-btn">Ok</button>
</div>
</div>
</body>
</html>
Nome do arquivo: education.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Formação</title>
<link rel="stylesheet" href="../styles/education.css">
<script defer src="../scripts/getNavBar.js"></script>
</head>
<body>
<h1>Minhas Formações</h1>
<div class="formation-list">
<div class="formation-item">
<h2>Assistente Técnico em Informática para a Internet</h2>
<p>Curso técnico atrelado ao ensino médio em parceria com a <a
href="https://www.fiec.com.br/site/index.do">Fiec</a>.</p>
</div>
<h2>Análise e Desenvolvimento de Sistemas</h2>
<h5>Em Andamento</h5>
<p>Curso superior EAD de tecnólogo em Análise e Desenvolvimento de
Sistemas, pela <a href="https://www.uninter.com/">Uninter</a>.</p>
</div>
</div>
<h1>Cursos</h1>
<div class="formation-list">
<h2>React do Zero ao Avançado - Udemy</h2>
<h5><a href="https://www.udemy.com/certificate/UC-0568323e-83ad-
456f-96a4-e0aae53f6002">Cerificado</a></h5>
<p>Hooks, Router, Redux, Api e projeto em React.</p>
</div>
<h2>NestJs Fundamentos - Udemy</h2>
<h5><a href="https://www.udemy.com/certificate/UC-bd92534a-9743-
457c-bbe4-07ac7d89b9bd/">Certificado</a></h5>
<p>Criação de uma API completa em NestJs, com autenticação, per-
missões de usuário, prisma ORM e TypeORM.</p>
</div>
<h2>NLW Expert trilha de Node.js - Rocketseat</h2>
<h5><a href="https://app.rocketseat.com.br/certificates/8d3e7088-
e3ec-4430-8d11-409b468267c6">Certificado</a></h5>
<p>Desenvolvimento de uma aplicação back-end em Node.js, aplicação
dos conceitos de API REST, utilizando TypeScript, Fastify como framework, in-
tegração do Prisma ORM, Docker para lidar com serviços de PostgreSQL e Redis,
Zod para validação de dados e WebSocket para comunicação real-time.</p>
</div>
<h2>NLW Expert trilha de React - Rocketseat</h2>
<h5><a href="https://app.rocketseat.com.br/certificates/20bd55fe-
1a76-4369-a6a9-2f8832272dd4">Certificado</a></h5>
<p>Desenvolvimento de uma aplicação front-end em ReactJS, aplica-
ção dos conceitos de Propriedades, Estados e Componentes, tipagem com Types-
cript, tooling com Vite, interface responsiva com TailwindCSS, uso de APIs da
Web como Web Storage e Web Speech.</p>
</div>
</div>
<div class="footer-placeholder">
</div>
</body>
</html>
Nome do arquivo: footer.html

<footer>
<p>© 2024 Kaique Ricardo de Melo - Todos os direitos reservados</p>
</footer>
Nome do arquivo: nav.html
<nav class="nav-container">
<h3>
<a href="/pages/index.html">
<span>Kaique <b>Melo</b></span>
</a>
</h3>
<ul class="list-container">
<li>
<a href="../pages/education.html">
Formação
</a>
</li>
<li>
<a href="https://kai-dev-portfolio.vercel.app">
Portfólio
</a>
</li>
<li>
<a href="../pages/contact.html">
Contato
</a>
</li>
<li>
<a href="../pages/about.html">
Sobre
</a>
</li>
</ul>
</nav>
Nome do arquivo: global. css
* {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.nav-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #131212;
}
.nav-container h3 {
margin: 10px;
}
.nav-container ul {
display: flex;
gap: 10px;
margin: 20px;
list-style: none;
}
.nav-container a {
text-decoration: none;
color: #fefefe;
}
.nav-container a:hover {
color: #fefefe86;
}
footer {
color: white;
text-align: center;
padding: 1rem 0;
bottom: 0;
width: 100%;
}
/* Mobile */
@media screen and (max-width: 600px) {

.nav-container {
justify-content: center;
}
.nav-container h3{
margin: 2px;
}
.nav-container ul {
margin: 20px 10px;
gap: 5px;
font-size: 17px;
}
Nome do arquivo: about.css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
header {
color: white;
padding: 1.5rem 0;
text-align: center;
}
.container {
max-width: 1100px;
margin: 20px auto;
padding: 0 20px;
}
h1, h2 {
color: #333;
margin-bottom: 20px;
text-align: center;
}
p {
text-align: justify;
}
.profile-picture {
text-align: center;
}
.profile-picture img {
border-radius: 50%;
max-width: 150px;
}
.section {
}
.skills-list, .hobbies-list {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.skills-list li, .hobbies-list li {

background-color: #4CAF50;
color: white;
padding: 10px 15px;
border-radius: 5px;
}
Nome do arquivo: contact.css
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
gap: 1rem;
}
span {
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input[type="text"],
input[type="email"],
textarea {
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
color: #333;
width: 100%;
}
textarea {
resize: vertical;
}
input[type="checkbox"] {
margin-right: 10px;
cursor: pointer;
}
button {
padding: 12px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
}
button:hover {
background-color: #0056b3;
}
.container {
background-color: #ffffff;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: auto;
width: 100%;
}
.nav-placeholder {
width: 100%;
display: block;
}
.normal-label {
display: flex;
}
.checkbox-row {
display: flex;
gap: 10px;
}
.checkbox-row span {
margin-bottom: 0;
}
/* Pop-up */
.pop-up {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
padding: 20px;
}
.pop-up-content {
padding: 20px;
border-radius: 8px;
text-align: center;
max-width: 400px;
width: 100%;
position: relative;
overflow-wrap: break-word;
word-wrap: break-word;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
color: #333;
}
.close-btn:hover {
color: #ff0000;
}
.confirm-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
}
.confirm-btn:hover {
background-color: #0056b3;
}
/* Mobile */

.container {
padding: 10px 0px;
border-radius: 8px;
gap: 10px;
max-width: 500px;
margin: auto;
width: 100%;
}
.pop-up {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
padding: 0;
}
}
Nome do arquivo: education.css

body {
margin: 0;
padding: 0;
color: #333;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 0 15px;
}
h1 {
text-align: center;
color: #4CAF50;
}
.formation-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.formation-item {
background-color: white;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
width: 300px;
text-align: center;
}
.formation-item h2 {
margin-top: 0;
font-size: 1.5rem;
color: #333;
}
.formation-item p {
font-size: 1rem;
}
Nome do arquivo: home.css

.home-container {
margin: 3rem auto;
display: flex;
min-height: 80vh;
}
.home-container article {
display: flex;
flex-direction: row;
max-width: 850px;
width: 100%;
margin: 0 auto;
}
.home-container article img {

border: solid .2px black;
margin: auto 20px;
}
.home-container article h1 {
font-size: 20px;
text-decoration: underline;
}
.home-container article h3 {
font-size: 14px;
}
.home-container p {
font-size: 14px;
}
.content-row {
display: flex;
border: 0;
border-radius: 5px;
background-color: rgb(187, 162, 19);
text-align: center;
margin: .5rem;
padding: .5rem 0 .5rem 0;
}
.content-row ul {
display: flex;
list-style: none;
gap: 1rem;
}
.content-row ul li {
cursor: pointer;
}
.content-row ul li a {
text-decoration: none;
color: #000000;
}
.content-row ul li:hover {
text-decoration: underline;
}
/* Mobile */

.home-container article {
max-width: 373px;
width: 100%;
}
.home-container img {
max-width: 373px;
width: 100%;
}
}
Nome do arquivo: getFooter.js

document.addEventListener("DOMContentLoaded", function () {
fetch('../components/footer.html')
.then(response => response.text())
.then(data => {
document.querySelector('.footer-placeholder').innerHTML = data;
console.log(data)
})
.catch(error => console.error('Error loading footer:', error));
});
Nome do arquivo: getNavBar.js
document.addEventListener("DOMContentLoaded", function () {
fetch('../components/nav.html')
.then(response => response.text())
.then(data => {
document.querySelector('.nav-placeholder').innerHTML = data;
console.log(data)
})
.catch(error => console.error('Error loading navbar:', error));
});
Nome do arquivo: sendEmail.js

document.addEventListener('DOMContentLoaded', () => {
const popUp = document.getElementById('pop-up');
const sendBtn = document.getElementById('send-btn');
const closeBtn = document.querySelector('.close-btn');
const confirmBtn = document.querySelector('.confirm-btn');
const nameInput = document.querySelector("#name");

const emailInput = document.querySelector("#email");
const messageInput = document.querySelector("#message");
const checkBox = document.querySelector("#checkbox");
const namePopUp = document.querySelector("#name-popup");
const emailPopUp = document.querySelector("#email-popup");
const messagePopUp = document.querySelector("#message-popup");
sendBtn.addEventListener('click', (event) => {

event.preventDefault();
if (!checkBox.checked) {
alert('Por favor, confirme o envio marcando a caixa de seleção.');
return;
}
popUp.style.display = 'flex';
namePopUp.innerText = nameInput.value;
emailPopUp.innerText = emailInput.value;
messagePopUp.innerText = messageInput.value;
});
closeBtn.addEventListener('click', () => {
popUp.style.display = 'none';
});
confirmBtn.addEventListener('click', () => {
});
window.addEventListener('click', (event) => {

if (event.target == popUp) {
}
});
});
3. COLOCAR IMAGEM DO CÓDIGO EM EXECUÇÃO (index)

4. Colocar endereço onde publicou o site
Site: Home (kaiquemelo.netlify.app)

Open Source: KaiD3v/UninterPortfolio (github.com)

Modelo de Entrega Do Trabalho - VF

Enviado por

Direitos autorais:

Formatos disponíveis

Modelo de Entrega Do Trabalho - VF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Modelo de Entrega Do Trabalho - VF

Enviado por

Direitos autorais:

Formatos disponíveis

CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER

ESCOLA SUPERIOR POLITÉCNICA

2. COLOCAR NOME DOS ARQUIVOS

Nome do arquivo: about.html

Nome do arquivo: contact.html

<div id="pop-up" class="pop-up">

<p>Mensagem enviada com sucesso!</p>

Nome do arquivo: education.html

Nome do arquivo: footer.html

Nome do arquivo: global. css

@media screen and (max-width: 600px) {

Nome do arquivo: about.css

.skills-list li, .hobbies-list li {

@media screen and (max-width: 600px) {

Nome do arquivo: education.css

Nome do arquivo: home.css

.home-container article img {

@media screen and (max-width: 600px) {

Nome do arquivo: getFooter.js

Nome do arquivo: sendEmail.js

const nameInput = document.querySelector("#name");

sendBtn.addEventListener('click', (event) => {

window.addEventListener('click', (event) => {

3. COLOCAR IMAGEM DO CÓDIGO EM EXECUÇÃO (index)

Site: Home (kaiquemelo.netlify.app)

Você também pode gostar