Patrick Dezséri - Fab Academy
1. Project management
Hero Shot of the Week
Summary
Never work with HTML format. So I started one of my favorite learning process. The Fuck Around & Find Out. Here you will see what I found out.
As you could have read in my about page, I already worked with mkdocs and markdown. This is why I wanted to challenged myself with HTML.
Work Process
Git
For Git, everything was already setup as I needed it for my work.
Even so, I had several discussion to see if I still needed to tell how it was setup and co. In the end I took the decision of just putting a link to a course that I followed in my studies that was based on FabAcademy.
My Git Doc
We were also shared this funny site (DanGit Git) while in the zoom call.
Setup for FabAcademy
When prompted to I followed the FabAc instructions for my Git page.
(I already use git and co for my daily work so I did not need to setup much)
Then I used VS Code to have an offline copy on my LapTop to work with. For that, I used the Open in VS Code HTTPS option in GitLab.
I run into a little problem where VSCode needed an email and user name info for Git to work. This was logical as my normal gitlab account is different from the FabAc gitlab account. I just typed the following into the VSCode Terminal:
git config --global user.email “you@example.com”
git config --global user.name “Your Name”
After I could pull & push without issues, I checked each pages found in my Git repository. Found some color changing brackets/places and immediately changed some colors. The results were... not gonna lie. Aesthetics isn't my forte... Than I went around changing all the Your Name (really good anime btw) to my name. I also search on how to add emoji to my text 😏 and found theses nice sites:
Than I installed some plugins on VSCode to have a live preview so I do not need to push to see what I have done. After that I started working on my page. Discovering and trying out stuff.
For the Page Design, (after Neil's 1st lesson) I went with this guys aesthetic advice.
Sorry for who ever posted this link while in the Zoom session. I couldn't find it who it was when I started working on my page.
I also enabled Copilot on my VSCode to help me with the code and writing. It can finish my sentences and give me suggestions on what to write next. It can also help with the formatting and HTML code.
Here is an example how Copilot helped me with the writing for my doc:
HTML
As I already use mkdocs and markdown for work I challenged myself to learn how to use HTML.
First step was to create my own CheatSheet
For my surprise, when creating a Steam Guide, it uses the same text code. (Thinking on it, it is logical but guess what. I never thought about it)
Most of the time when I search for somethings is for the style settings.
Creating a side bar navigation
I wanted to create a second nav bar on the side of the screen so I can organize my pages in main categories and than sub categories.
It is true that I could use a dropdown menu but I wanted to try it this way.
In the end I only copy-pasted an example code and poked around with it to see what changes, what I like etc.
After that, I needed to copy paste it to every other HTML file without breaking them 😅.
Sources that I used to try and make it:
Creating a sound button
For this I used ChatGPT (I wanted to try it out) The prompt was
`can you create an html code for a button that can play a sound when clicked`
The result:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Sound Button
< <body>
<!-- Button to Play Sound -->
<button id="playSoundButton">Play Sound
<!-- Audio File --> <audio id="sound" src="path-to-your-audio-file.mp3">
<script>
// Get the button and audio elements
const button = document.getElementById('playSoundButton');
const sound = document.getElementById('sound');
// Add event listener to play sound on button click
button.addEventListener('click', () => { sound.play();});
</script>
</body>
</html>
But for now it doesn't want to work and I have no clue why.
The audio is from here: sounds
Now it works.
Seems like it was a wrong path code.
You will need to find the sound button on your own.
It is my little easter egg.
Adding Spotify
For this one I just went to the spotify app, selected the music I wanted to share and copied the embed version of the link. Than I just resized the fidget that was generated.
Expand-Collapse
Knowing that I will be using codes and other secondary information, I was thinking how I could integrate them easily into my doc. I came up with 2 ideas. First is having more pages and just put links into the main page. The second was having collapsible sections.
Open Collapsible
I went with the second one as it is a more cleaner option. Here is the link that I used for it.
For the Code
<button type="button" class="collapsible">For the Code</button>
<div class="content2">
text
</div>
<script>
/*Collapsible*/
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
Bootstrap
To make my website more technology friendly (I do not know if it is the good words, but I try to make it more accessible on phones and co) I added Bootstrap.
I followed the instructions from the following website .
I then checked in firefox dev mode to see what the results were. (For instructions on how to do it in firefox.)
I can confidently say that even if my page readapts for user phone screen, it is not made for phones...
Failed Successfully Achieved!
Code Highlighter
Tried to add highlightjs to have colorized code from here. The small test did not work yet.
Will see later on if I have time why it did not. But I think tte pre is overwriting the colorization.
Image compression & Image Stuff
For image compression I an using Power Toys.
It is a multiple function tool for windows. One of its functionality is to resize images.
I was also told by Nicolas that when I send images form my phone to my PC via Signal, it compresses the image, so I do not need to recompress after ward.
I have found the following code to position my image on my about page.
For the Code
<style>
.container {
display: flex;
align-items: center;
justify-content: center
}
img {
max-width: 100%
}
.image {
flex-basis: 40%
}
</style>
<div class="container">
<div class="image">
<img src="../images/About/patrik.jpeg" alt="Photo of Patrick" width="90%"/>
</div>
<div>
<p>
text
</p>
</div>
</div>
Video Editing & Compression
For this I do not use anything yet.
Learning Outcome
So. What have I learned. HTML is not as complicated as I thought it would be and it is quite fun to use it.
I like discovering new things.
Assignment check
- read, sign the student/instructor/lab agreements,and commit to your repos
- work through a git tutorial
- I already knew git so I skipped this step
- build a personal site in the class archive
- you can already see it here
- describing you and your final project