Week 1 is all about setting up your website, getting used to git and setting up everything for 17 weeks of documentation
. First steps first .
First step was checking git version on my mac OS. You can do the same by pasting this code on your terminal↴
git --version
As a complete newbie aka "dummie" this tutorial is one of the best, i highly recommend understanding the basics by watching this video
https://www.youtube.com/watch?v=mJ-qvsxPHpY&pp=ygUPZ2l0IGZvciBkdW1taWVz2AbeBg%3D%3D
On macOS, many development tools aren’t included by default. Homebrew simplifies installing and managing these tools from the terminal, making it easier to set up and maintain a consistent development environment during Fab Academy.
Installing homebrew on mac OS. simple copy paste the code given below on your terminal↴
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
After pasting the code on your terminal it should look something like this.
The terminal will ask for your system passcode to install WHICH wont be visible. make sure you make no typos. (⸝⸝> ᴗ•⸝⸝)
Using brew to install git latest version
brew install git
.Next was pyhton installation🐍.
My first trouble was python commands and pip commands not working on my terminal as seen below.
But another command ↴ , Seemed to work,
python3 -m pip list
The problem-I Suspected that my python was not on path. meaning commands werent accesible on my terminal. I Proceeded to ask CHAT GPT and followed its response on my terminal
Choosing which file to save.
It asked me to enter a passphrase for this file.(you wont be able to see these numbers as well). i entered a passphrase. but now at every commit & push, vscode asks me for my passphrase. save yourself some hassle just press ENTER.
.Connecting git lab to your local editor📝.
login to git labs using your fablabs id, go to profile.
go to SSH keys, on the left column
Add and generate an ssh key.
Nomenclature is important. skip it and your repent it (×_×)
Copy you git clone id.
Open integrated terminal on your preffered editor (here- VScode) and use this command followed your clone id.
git clone (paste clone id)
Your VS code should now look something like this.
.Playing with HTML.
W3 schools is an awesome awesome resource to play aropund with html and css.
In it you have multiple options to choose from, categorized according to function or style you desire.
You can select which one and start editing code and seeing the edited result in your browser itself.
first i changd the existing layout with a background gradient representing DAWN TO DUSK
Then i started messing around by adding a glass layout(apple style). to the website.
The result after some tweaking was such.
what is "!important"
I relaised that my changes to navbar colour were not reflecting on my page,
Upon some pondering i relised i hade multiple navbar{} commands in my style.css
in code,(html) your last written line is the ONLY VALID line. so if you have overlaping functions, the second funcytion will be given presedence.
!important, can be used to give presedence to that particular line, despite overlap, ALTHOUGH. this isnt proffesional, keep your code neat.
After tidying up the code.
.COMPRESS DEM IMAGES (ﾒ﹏ﾒ).
XN convert is a brilliant app to batch convert/compress/name your pics
https://www.xnview.com/en/xnconvert/
Add your filesselect your output location, file type and file nomenclatureGo to settings and tweak quality as per requirement─── ⋆⋅☆⋅⋆ ──VOILA─── ⋆⋅☆⋅⋆ ──
.Finding my own style.
Now all remaining was to find my own rhythmUsing ai i created funcytions to make creative copyable blocks, note blocks and moreBeforeAfter
commit and push changes every now and then, dont let it pile up
you do not need to commit &/or push everytime, you can save and check locally by opening your html file from your finder(if mac) or library(if windows) and then push every now and then.
