Smart Livestock Management
Smart Livestock Management
I learned the importance of documentation, how to use GitLab and Git Bash, and gave myself a refresher on how to use HTML and CSS this week. On Wednesday, we discussed documentation and the importance of doing tasks in small sequential chunks. We were given the example of making sure a pre-made simple sensor works, then a more advanced one, and finally if a student-made advanced sensor works in a project. I taught myself HTML and CSS in high school and made a website for which I received a Gold Award. I took a look at some of the code from my old website to give myself a refresher. Finally, I finished the sketches for my final project, which you can find in the 'Final Project' tab. You can find some of my notes on Git Bash to the right on this webpage. But how did we get Git working? First, as a windows user, I installed Git Bash. Then, I added my Git username and configured my email for uploading using the following 2 commands:
SETUP GIT (to do only the first time)
Install Git
GitBash for windows users Gitbash
Open command line for MacOSX user(Git is usually preinstalled on Mac and Linux.) command line
Add your Git username and set your email
git config –-global user.name “YOUR_USERNAME”
Configure you email address for uploading
git config -–global user.email “jSmith@mail.com”
Check if you have an SSH KEY already
cat ~/.ssh/id_rsa.pub (If you see a long string starting with ssh-rsa, you can skip the ssh-keygen step)
Generate your SSH key
ssh-keygen -t rsa -C "$your_email"
Now let´s see your keygen
cat ~/.ssh/id_rsa.pub
Copy your key
Windows: clip < ~/.ssh/id_rsa.pub Mac:pbcopy < ~/.ssh/id_rsa.pub Linux xclip -sel clip < ~/.ssh/id_rsa.pub
Finally add the copied key to GIT on the web version
Video on how to do it
COPY YOUR ACADEMY PERSONAL REPO.
Navigate to the folder where you want to put or create your repo. If you don´t know how to follow this guide
We recommend to create it in the desktop so you don´t have to dive into million of folders each time
Clone your student repository
git clone git@git.fabacademy.org:fabacademy2017/yourlabname/yourstudentnumber.git
UPLOAD YOUR REPO ONLINE.
Add the new files you added to git
git add index.html to upload file by file
git add . to upload all the files at once
To download the last copy from the repository
git pull (for downloading the last copy of the repository)
To have a working copy of your repo
git merge (to have a working copy)
Now name your update, so you know what you changed with this push.
git commit -m ‘change you did’
Upload to the Repository
git push
For the homepage of my Smart Livestock Management website, I implemented a hero image section using a div with the class .hero-image. In the CSS, I styled this element by applying a background-image property along with a linear-gradient overlay to darken the image slightly and improve text legibility. To ensure the hero section adapted well to different screen sizes, I set the background-position to center, used background-size: cover, and applied background-repeat: no-repeat to maintain a clean appearance. Inside the hero image container, I placed a div with the class .hero-text, which contains the main tagline and description. I used absolute positioning with top: 50%, left: 50%, and transform: translate(-50%, -50%) to perfectly center the text regardless of viewport size. I also added media queries to adjust the font size of the hero text based on screen width, improving accessibility and responsiveness across devices.
To control layout across the homepage and documentation pages, I built a custom responsive 12-column grid system entirely in CSS. I created individual classes named .col-1 through .col-12, with each one representing a fraction of the full width (for example, .col-3 is 25%, .col-9 is 75%). This allowed me to create a flexible layout structure where I could position side navigation menus, documentation content, and other elements in precise portions of the page. On the homepage, I used .col-3 for the sidebar navigation and .col-9 for the main project description and introductory content. On documentation pages like week01.html, I used a combination of .col-11 and .col-s-12 to ensure the main content area spans almost the full page on large screens and automatically switches to full width on smaller screens.
To make the layout mobile-responsive, I wrote media queries that target screen widths below 768px and 600px. Within these breakpoints, I override the width of all column classes to 100%, allowing each section to stack vertically and remain readable on phones and tablets. I also adjusted navigation behavior and dropdown menus to better suit touch interfaces. This grid system ensures that my site maintains structural consistency while adapting to different devices, and it gave me full control over positioning without relying on external frameworks like Bootstrap.