eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 05:44:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Format

Browse Source
This commit is contained in:
Janis Hutz
2025-10-07 18:12:58 +02:00
parent 24258962c4
commit 8c095cb3fc
9 changed files with 1369 additions and 872 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
task_1_html_css/src/card.css
View File

@@ -76,6 +76,7 @@ article {
& footer {
border-top: 1px solid var(--border-color);
& ul {
padding: 0;
list-style: none;
@@ -83,18 +84,22 @@ article {
/* I realize how janky this is, but it works. */
display: flex;
justify-content: space-between;
& li {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
& li:not(:has(+ li)) {
justify-content: center;
}
& li:has(+ li)::before {
content: "";
}
& li:has(+ li)::after {
content: "|";
}

24
task_1_html_css/src/card.html
View File

@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
@@ -8,8 +9,9 @@
<link href="card.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script>
</head>
<body class="card-body">
</head>
<body class="card-body">
<article>
<header>
<h1>How to start?</h1>
@@ -21,10 +23,7 @@
<ol>
<li>
Look at the
<a
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"
>mdn docs</a
>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">mdn docs</a>
</li>
<li>Start with the inner components.</li>
<li>Do not be afraid to nest flex boxes.</li>
@@ -38,14 +37,10 @@
</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
><code>:has</code></a
>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has</code></a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
><code>:not</code></a
>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"><code>:not</code></a>
</li>
<li>
Or try another approach, there are many ways in css to achieve the
@@ -142,5 +137,6 @@
</ul>
</footer>
</article>
</body>
</body>
</html>

27
task_1_html_css/src/contact.html
View File

@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
@@ -9,8 +10,9 @@
<link href="layout.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script>
</head>
<body>
</head>
<body>
<header>
<h1>Contact</h1>
</header>
@@ -18,24 +20,16 @@
<section>
<ul>
<li>
<a href="/" title="Home"
><i class="fa-solid fa-home"></i> <span>Home</span></a
>
<a href="/" title="Home"><i class="fa-solid fa-home"></i> <span>Home</span></a>
</li>
<li>
<a href="/" title="Dashboard"
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a
>
<a href="/" title="Dashboard"><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a>
</li>
<li>
<a href="/" title="Profile"
><i class="fa-solid fa-user"></i> <span>Profile</span></a
>
<a href="/" title="Profile"><i class="fa-solid fa-user"></i> <span>Profile</span></a>
</li>
<li>
<a href="./contact.html" title="Contact"
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
<a href="./contact.html" title="Contact"><i class="fa-solid fa-message"></i> <span>Contact</span></a>
</li>
</ul>
</section>
@@ -94,5 +88,6 @@
<footer>
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer>
</body>
</body>
</html>

40
task_1_html_css/src/index.html
View File

@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
@@ -10,8 +11,9 @@
<link href="card.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script>
</head>
<body>
</head>
<body>
<header>
<h1>Open data explorer</h1>
<i class="fa fa-solid fa-user"></i>
@@ -21,24 +23,16 @@
<section>
<ul>
<li>
<a href="/" title="Home"
><i class="fa-solid fa-home"></i> <span>Home</span></a
>
<a href="/" title="Home"><i class="fa-solid fa-home"></i> <span>Home</span></a>
</li>
<li>
<a href="/" title="Dashboard"
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a
>
<a href="/" title="Dashboard"><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a>
</li>
<li>
<a href="/" title="Profile"
><i class="fa-solid fa-user"></i> <span>Profile</span></a
>
<a href="/" title="Profile"><i class="fa-solid fa-user"></i> <span>Profile</span></a>
</li>
<li>
<a href="./contact.html" title="Contact"
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
<a href="./contact.html" title="Contact"><i class="fa-solid fa-message"></i> <span>Contact</span></a>
</li>
</ul>
</section>
@@ -56,10 +50,7 @@
<ol>
<li>
Look at the
<a
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"
>mdn docs</a
>
<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">mdn docs</a>
</li>
<li>Start with the inner components.</li>
<li>Do not be afraid to nest flex boxes.</li>
@@ -73,14 +64,10 @@
</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"
><code>:has</code></a
>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has</code></a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"
><code>:not</code></a
>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"><code>:not</code></a>
</li>
<li>
Or try another approach, there are many ways in css to achieve the
@@ -194,5 +181,6 @@
<footer>
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer>
</body>
</body>
</html>

30
task_1_html_css/src/layout.css
View File

@@ -28,21 +28,24 @@ ul {
}
}
@media screen and (width <= 1000px) {
@media screen and (width <=1000px) {
form {
width: 80%;
}
}
@media screen and (width <= 700px) {
@media screen and (width <=700px) {
/* new sidebar size for small display */
body {
grid-template-columns: 12% 1fr;
}
/* make text in sidebar vanish on small display */
body > section > ul > li > a > span {
body>section>ul>li>a>span {
display: none;
}
form {
width: 100%;
}
@@ -58,22 +61,25 @@ ul {
background-color: rgb(187, 149, 233)
}
body > main > form {
body>main>form {
& ul {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-auto-flow: row;
& li {
display: flex;
flex-direction: column;
margin: 1rem;
& h2 {
font-size: large;
color: cornflowerblue;
font-weight: normal;
}
& input {
padding: 5px;
border-width: 2px;
@@ -81,6 +87,7 @@ body > main > form {
border-color: rgb(219, 207, 207);
border-radius: 5px;
}
& button {
width: 10rem;
margin: 5px;
@@ -88,6 +95,7 @@ body > main > form {
border: none;
border-radius: 10px;
}
& div {
padding: 0.5rem;
}
@@ -96,7 +104,7 @@ body > main > form {
}
body > section {
body>section {
border-right: 1px solid var(--border-color);
grid-area: sidebar;
@@ -109,18 +117,19 @@ body > section {
padding: 0.5rem;
}
& li > a {
& li>a {
color: #999;
font-size: 14px;
text-decoration: none;
}
& li > a:hover {
& li>a:hover {
color: black;
}
}
}
body > header {
body>header {
border-bottom: 1px solid var(--border-color);
grid-area: header;
@@ -135,13 +144,14 @@ body > header {
margin: 0;
flex-grow: 1;
}
/* icons */
& i {
padding: 0.25rem;
}
}
body > main {
body>main {
grid-area: main;
display: flex;
flex-wrap: wrap;
@@ -157,7 +167,7 @@ body > main {
overflow-y: scroll;
}
body > footer {
body>footer {
grid-area: footer;
padding: 0.5rem;
display: flex;

1074
task_1_html_css/src/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
task_1_html_css/src/package.json
View File

@@ -11,7 +11,7 @@
"devDependencies": {
"prettier": "^3.0.1",
"typescript": "^5.1.6",
"vite": "^4.4.9"
"vite": "^7.1.9"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",

3
task_1_html_css/src/vite.config.js
View File

@@ -1,7 +1,6 @@
export default {
'server': {
'host': '0.0.0.0',
'port': 5173,
'port': 8080,
},
};