Di pertemuan ke-lima ini, saya belajar banyak tentang section, article, footer, header, dan juga bar aside
dan untuk tugas kali ini saya membuat sebuah web menu restoran dengan hal2 yang saya pelajari
ini untuk tampilannya:
Source Code
Wednesday, 25 September 2024
Wednesday, 18 September 2024
Tugas Pertemuan 4
Trischan Mahdy Arangga
5053231024
Tugas Membuat Form Registrasi
Tampilan:
Link Website
Disini saya belajar untuk membuat form simple, dengan input radio, text, select, dan submit
Tugas Pertemuan #03
Trischan Mahdy Arangga
5053231024
Tugas Event Web dengan Tabel
Pertemuan 3:
Tampilan:
Disini saya belajar tentang membuat tabel yang berpenampilan bagus, juga menggunakan background image dan juga mengimplementasikan link pada button di "View Details"
Wednesday, 11 September 2024
Pemrograman Web #03
Trischan Mahdy Arangga
Kelas: Pemrograman Web (M)
NRP: 5053231024
Di post ini, saya akan memberi dokumentasi tugas Pemrograman Web #03 yaitu membuat dua table dengan tampilan berbeda, untuk yang pertama:
Dan untuk tabel yang kedua:
Dan ini source html dan css dari kedua tabel:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="tugas2.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<table class="table">
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Andi</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</div>
<div class="containerlogin">
<form action="" method="post">
<fieldset>
<legend>Login</legend>
<label for="usn">Username:</label>
<input type="text" id="usn" name="usn"><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"><br>
<input type="checkbox" id="chkbx" name="chkbx">
<label for="remember">Remember Me</label><br>
<input type="button" value="Login">
</fieldset>
</form>
</div>
<div class="containerproduk">
<table>
<tr>
<thead>
<th colspan="3">Produk Unggulan</th>
</thead>
</tr>
<tr>
<td rowspan="3"><img src="gambar/benihkode.png" alt=""></td>
<td>Nama</td>
<td>Benih Kode</td>
</tr>
<tr>
<td>Harga</td>
<td>Rp. 192.000</td>
</tr>
<tr>
<td>Fitur</td>
<td>
<ul>
<li>Dilengkapi Dokumentasi</li>
<li>Ukuran: 31MB</li>
<li>Masa Tanam: 6 Bulan</li>
<li>Lisensi: MIT</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
margin: auto;
}
th {
color: rgb(255, 255, 255);
background-color: rgb(35, 110, 207);
padding-top: 10px;
padding-bottom: 10px;
padding-inline: 50px;
}
td {
padding: 10px;
}
.containerlogin{
display: flex;
margin: auto;
justify-content: center;
width: 50%;
}
.containerlogin fieldset{
width: fit-content;
}
.containerlogin form{
padding: 5%;
}
.containerlogin label,input{
margin-block: 3%;
}
.containerproduk {
padding: 10px;
}
.containerproduk table{
width: fit-content;
border-collapse: separate;
height: fit-content;
}
.containerproduk table, th, td{
border: 1px solid black;
}
.containerproduk th{
background-color: yellow;
color: black;
}
dari kedua tugas tersebut, saya mempelajari banyak tentang tabel mulai dari header, row, column dan akhirnya data-data per-row nya. Saya juga mempelajari tentang merge dengan column dan juga merge dengan row, menggunakan colspan dan juga rowspan.
Tugas dalam page website:
Pemrograman Web #02
Trischan Mahdy Arangga
Kelas: Pemrograman Web (M)
NRP: 5053231024
Di post kali ini, saya melanjutkan pembelajaran saya dalam webdev secara sendiri, dikarenakan jadwal kuliah yang kosong, dan saya belajar tentang hal-hal dalam css
Wednesday, 4 September 2024
Pemrograman Web #1
Diawali dengan tugas yang kami dapatkan yaitu membuat website portofolio dan juga men-setup akun dan web blogspot ini.
Untuk dokumentasi source code dari web portofolio:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
</head>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,
wght@0,200..1000;1,200..1000&display=swap"
rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio Website</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="content">
<img class="avatar" src="pictures/ranggaz.jpeg" alt="avatar">
<div class="cintro">
<p><span >My name is...</span><br>Trischan Mahdy Arangga!</p>
</div>
<div class="cpara1">
<p>Im currently a software engineering student in
Institut Teknologi Sepuluh Nopember, located in Surabaya!
<br>
I am a student who is always eager to learn more about
IT in general,
ive indulged in a bit of game dev before this and
right now im really looking forward to learning
<span>HTML,CSS,JS
</span> for website development!
<br>
and so this is my <span>"Portfolio"</span> website,
down below you
will see some of my work in the past
year or so from college!
<br><br>
Before all of that, let me list my skills first:</p>
<div>
<ul>
<li>Fluent in English</li>
<li>Good at designing things
(mainly Photoshop)</li>
<li>Fast in making crucial decisions</li>
<li>Can adapt fast in a new group environment</li>
</ul>
<p>For collaborations, etc,
<br>
feel free to contact me!
<br>
<br>
<div class="socialmedias">
<p>Jl. Wisma Permai III No.11, RT.003/RW.05
(Indekos Bu Yuni 3)</p>
<p>trschnrangga@gmail.com</p>
<a href=
"https://www.instagram.com/trschnrangga/"
target="_blank">Instagram</a>
 <a href=
"https://www.linkedin.com/in/trischanma/"
target="_blank">LinkedIn</a>
</div>
</p>
</div>
<p class="clinks"><a href="resources/CV.pdf" target="_blank">
My CV</a></p>
</div>
<div class="projects">
<br><br>Projects/Designs:
<p>Click The Cat!</p>
<a href=
"https://github.com/trschnrangga/Whispers-Of-The-Void"
target="_blank">
<img class="cat" src="pictures/whispers.png"
alt="Whispers-Of-The-Void.png"></a>
</div>
</div>
<div class="image-container" id="scroll-container">
<img src="pictures/homuncbw.jpg" alt="">
<img src="pictures/homuncw.jpg" alt="">
<img src="pictures/durden.png" alt="">
<img src="pictures/bluelilyinv.jpg" alt="">
<img src="pictures/lilystock.jpg" alt="">
<img src="pictures/LIGHTOKUN1.jpg" alt="">
<img src="pictures/tylers.png" alt="">
<img src="pictures/indecisive.png" alt="">
</div>
<script src="smoothscroll.js"></script>
<script src="script.js"></script>
</body>
</html>
test.css
html, body {
scroll-behavior: smooth !important;
}
body {
background-color: rgb(44, 44, 44);
background-image: repeating-radial-gradient(circle, #ffffff,
c88bce 0%, #ffb2f7 10%);
background-size: 100% 55%;
background-repeat: no-repeat;
background-position: top;
height: 450px;
}
.content {
margin: auto;
width: 1200px;
}
.cintro {
color: rgb(242, 175, 223);
font-family: 'Nunito', sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-size: 50px;
font-style: italic;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
span {
color: rgb(255, 255, 255);
}
}
.cpara1 {
color: rgb(242, 175, 223);
font-family: 'Nunito', sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-size: 25px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-style: normal;
}
.cpara1 span {
font-style: italic;
font-weight: 700;
}
.avatar {
border-radius: 50%;
width: auto;
height: 300px;
border: 8px solid rgb(255, 161, 246);
box-shadow: 0 4px 50px 0px;
}
.projects {
color: rgb(242, 175, 223);
font-family: 'Nunito';
font-size: 25px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-weight: 700;
}
.projects a:link {
color:#ffffff;
}
.projects a:visited {
color:#ee7c9c;
}
.clinks a:link {
color: #ffffff;
}
.clinks a:visited {
color: #ffffff;
}
.clinks a:hover {
color: #f69797;
}
.pictures img{
height: 500px;
width: auto;
margin: 10px;
}
.socialmedias {
color: #ffffff;
}
.socialmedias p{
color: #ffffff;
}
.socialmedias a {
color: #ffffff;
}
.socialmedias a:hover{
color: #ee7c9c;
}
.image-container {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
padding: 10px;
scroll-behavior: smooth;
}
.image-container img{
max-width: auto;
height: 700px;
margin: 10px;
box-shadow: 0px 0px 15px 2px #000000;
display:flex;
transition: 1s ease-out;
}
.image-container img:hover {
transform: scale(1.05);
transition: transform 0.3s ease;
}
.cat {
height: 400px;
width: auto;
box-shadow: 0px 0px 20px 2px #000000;
transition: 0.1s ease-out;
}
.cat:hover {
transform: scale(1.05);
transition: transform 0.05s ease-in;
}
.image-container::-webkit-scrollbar {
height: 12px;
}
.image-container::-webkit-scrollbar-track {
background: rgba(68, 68, 68, 0);
}
.image-container::-webkit-scrollbar-thumb {
background-color: rgba(122, 122, 122, 0.283);
border-radius: 20px;
border: 3px solid rgba(0, 0, 0, 0);
}
script.js
const container = document.getElementById('scroll-container');
container.addEventListener('wheel', (event) => {
event.preventDefault();
container.scrollLeft += event.deltaY * 2;
});
container.addEventListener('wheel', (event) => {
event.preventDefault();
smoothScroll(container, event.deltaY);
});
function smoothScroll(element, delta) {
const duration = 1;
const start = element.scrollLeft;
const end = start + delta * 4;
const startTime = performance.now();
function scrollAnimation(currentTime) {
const elapsedTime = currentTime - startTime;
const progress = Math.min(elapsedTime / duration, 1);
element.scrollLeft = start + (end - start)
* easeInOutQuad(progress);
if (progress < 1) {
requestAnimationFrame(scrollAnimation);
}
}
requestAnimationFrame(scrollAnimation);
}
function easeInOutQuad(t) {
return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}
dan berikut file repo website saya di github:
Pemrograman Web #0
Perkenalan tentang pemrograman web mulai dari front end, backend, dan juga bagian ui/ux
Subscribe to:
Posts (Atom)
EAS PWEB
Pada Final Project kali ini, saya membuat semacam website mirip seperti wikipedia tentang game berjudul "Fisch", dimana nanti aka...
-
Pada tugas kali ini kita membuat sebuah sistem dengan CRUD, disini saya memilih sistem list mahasiswa/murid dan pegawai Link Source Code: ... -
Diawali dengan tugas yang kami dapatkan yaitu membuat website portofolio dan juga men-setup akun dan web blogspot ini. Untuk dokumenta...