eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 13:54:25 +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 { & footer {
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
& ul { & ul {
padding: 0; padding: 0;
list-style: none; list-style: none;
@@ -83,18 +84,22 @@ article {
/* I realize how janky this is, but it works. */ /* I realize how janky this is, but it works. */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
& li { & li {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
& li:not(:has(+ li)) { & li:not(:has(+ li)) {
justify-content: center; justify-content: center;
} }
& li:has(+ li)::before { & li:has(+ li)::before {
content: ""; content: "";
} }
& li:has(+ li)::after { & li:has(+ li)::after {
content: "|"; content: "|";
} }

24
task_1_html_css/src/card.html
View File

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

27
task_1_html_css/src/contact.html
View File

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

40
task_1_html_css/src/index.html
View File

@@ -1,6 +1,7 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
@@ -10,8 +11,9 @@
<link href="card.css" rel="stylesheet" /> <link href="card.css" rel="stylesheet" />
<script src="./main.ts" type="module"></script> <script src="./main.ts" type="module"></script>
</head> </head>
<body>
<body>
<header> <header>
<h1>Open data explorer</h1> <h1>Open data explorer</h1>
<i class="fa fa-solid fa-user"></i> <i class="fa fa-solid fa-user"></i>
@@ -21,24 +23,16 @@
<section> <section>
<ul> <ul>
<li> <li>
<a href="/" title="Home" <a href="/" title="Home"><i class="fa-solid fa-home"></i> <span>Home</span></a>
><i class="fa-solid fa-home"></i> <span>Home</span></a
>
</li> </li>
<li> <li>
<a href="/" title="Dashboard" <a href="/" title="Dashboard"><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a>
><i class="fa-solid fa-dashboard"></i> <span>Dashboard</span></a
>
</li> </li>
<li> <li>
<a href="/" title="Profile" <a href="/" title="Profile"><i class="fa-solid fa-user"></i> <span>Profile</span></a>
><i class="fa-solid fa-user"></i> <span>Profile</span></a
>
</li> </li>
<li> <li>
<a href="./contact.html" title="Contact" <a href="./contact.html" title="Contact"><i class="fa-solid fa-message"></i> <span>Contact</span></a>
><i class="fa-solid fa-message"></i> <span>Contact</span></a
>
</li> </li>
</ul> </ul>
</section> </section>
@@ -56,10 +50,7 @@
<ol> <ol>
<li> <li>
Look at the Look at the
<a <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">mdn docs</a>
href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox"
>mdn docs</a
>
</li> </li>
<li>Start with the inner components.</li> <li>Start with the inner components.</li>
<li>Do not be afraid to nest flex boxes.</li> <li>Do not be afraid to nest flex boxes.</li>
@@ -73,14 +64,10 @@
</p> </p>
<ul> <ul>
<li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has</code></a>
><code>:has</code></a
>
</li> </li>
<li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not" <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:not"><code>:not</code></a>
><code>:not</code></a
>
</li> </li>
<li> <li>
Or try another approach, there are many ways in css to achieve the Or try another approach, there are many ways in css to achieve the
@@ -194,5 +181,6 @@
<footer> <footer>
<div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div> <div>Made with <i class="fa-solid fa-heart"></i> by David Sichau</div>
</footer> </footer>
</body> </body>
</html> </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 { form {
width: 80%; width: 80%;
} }
} }
@media screen and (width <= 700px) { @media screen and (width <=700px) {
/* new sidebar size for small display */ /* new sidebar size for small display */
body { body {
grid-template-columns: 12% 1fr; grid-template-columns: 12% 1fr;
} }
/* make text in sidebar vanish on small display */ /* make text in sidebar vanish on small display */
body > section > ul > li > a > span { body>section>ul>li>a>span {
display: none; display: none;
} }
form { form {
width: 100%; width: 100%;
} }
@@ -58,22 +61,25 @@ ul {
background-color: rgb(187, 149, 233) background-color: rgb(187, 149, 233)
} }
body > main > form { body>main>form {
& ul { & ul {
display: grid; display: grid;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-auto-flow: row; grid-auto-flow: row;
& li { & li {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 1rem; margin: 1rem;
& h2 { & h2 {
font-size: large; font-size: large;
color: cornflowerblue; color: cornflowerblue;
font-weight: normal; font-weight: normal;
} }
& input { & input {
padding: 5px; padding: 5px;
border-width: 2px; border-width: 2px;
@@ -81,6 +87,7 @@ body > main > form {
border-color: rgb(219, 207, 207); border-color: rgb(219, 207, 207);
border-radius: 5px; border-radius: 5px;
} }
& button { & button {
width: 10rem; width: 10rem;
margin: 5px; margin: 5px;
@@ -88,6 +95,7 @@ body > main > form {
border: none; border: none;
border-radius: 10px; border-radius: 10px;
} }
& div { & div {
padding: 0.5rem; padding: 0.5rem;
} }
@@ -96,7 +104,7 @@ body > main > form {
} }
body > section { body>section {
border-right: 1px solid var(--border-color); border-right: 1px solid var(--border-color);
grid-area: sidebar; grid-area: sidebar;
@@ -109,18 +117,19 @@ body > section {
padding: 0.5rem; padding: 0.5rem;
} }
& li > a { & li>a {
color: #999; color: #999;
font-size: 14px; font-size: 14px;
text-decoration: none; text-decoration: none;
} }
& li > a:hover {
& li>a:hover {
color: black; color: black;
} }
} }
} }
body > header { body>header {
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
grid-area: header; grid-area: header;
@@ -135,13 +144,14 @@ body > header {
margin: 0; margin: 0;
flex-grow: 1; flex-grow: 1;
} }
/* icons */ /* icons */
& i { & i {
padding: 0.25rem; padding: 0.25rem;
} }
} }
body > main { body>main {
grid-area: main; grid-area: main;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -157,7 +167,7 @@ body > main {
overflow-y: scroll; overflow-y: scroll;
} }
body > footer { body>footer {
grid-area: footer; grid-area: footer;
padding: 0.5rem; padding: 0.5rem;
display: flex; 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": { "devDependencies": {
"prettier": "^3.0.1", "prettier": "^3.0.1",
"typescript": "^5.1.6", "typescript": "^5.1.6",
"vite": "^4.4.9" "vite": "^7.1.9"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2", "@fortawesome/fontawesome-free": "^6.4.2",

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

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