Home About Projects Final Project
Martins Krebs - Fab Academy 2018

- MĀRTIŅŠ KRĒBS -

Fab Academy - 2018

Week 2: Project Management

Description:

Tasks:
- Build a personal site describing you and your final project.
- Upload to the class archives.
- Develop Git Profile and upload first entries to Git.

Building a Personal Website

Before starting to build a Website, I had to learn both the HTML and CSS languages. I watched the the incredibly informative video from Fab Academy 2015. Through this video, I was introduced to the w3schools webpage; a simple and intuitive resource for web design I used throughout making this site. HTML is formed from different congruent elements, represented by tags, that describe the structure of Web pages and thier elements.

  • Establishing the type of document <!DOCTYPE>
  • Root element of the Web page <html>
  • Information of the document <head>
  • <body> is the element that contains all the contents of the HTML document visible to the visitor/viewer.
  • The majority of the time, when you open a tag in HTML <p> you have to close it with a twin tag prefaced with a "/" </p>

    I started creating my page through the Brackets program. Once installed, I began writing as I watched and followed along with the video; First, starting with the basic structure of an HTML (Doctype, html, head, titles and body), and slowly including more and more as the video progressed.


    CSS: Giving HTML some style

    CSS is a style sheet language that describes how the HTML elements are going to look to the viewer of the site. To modify an aspect of the page you've created, you can either add and attach a <style> tag to each and every element in your HTML, or create an external stylesheet that will modify all your files at the same time. This second option is much easier and more efficient. CSS works with selectors that refer to the HTML elements that you want to modify. We have different types:

    What I Struggled With

    During this process, I struggled with many different aspects. I have never done any coding of any kind prior to this, and the tasks seemed daunting at first. With the help from previous Fab Academy video walk-throughs, and by checking the documentation in w3schools website, I was able to solve most issues I came across. Things I had the most trouble with were:

  • Wrapping my head around the logic behind the code and why things were in the order they were in
  • Understanding what CSS was and how it interacted with html
  • Breaking down what elements others used on their websites to get desired effects

  • Working through a -Git- tutorial

    Step 1: Download GIT
    Step 2: GIT Tutorial

    Going through the GIT tutorial, it all looked like another language that is even harder to understand than html was. Looking for a previous Fab Academy video on it, I started looking through 2016 and here's what I found:

  • Video from 2016
  • Also this walk-through website.

  • Once Git was downloaded, I found the Git program file and opened Git Bash.

  • Generated a new SSH-Key using PuTTYgen
  • Enter for location to store file
  • Enter a unique passcode
  • Show public key: cat ~/.ssh/id_rsa.pub
  • Copy key: clip ~/.ssh/id_rsa.pub
  • Go to Fab Academy GitLab
  • Use your log in
  • Add your SSH Key in "profile settings" on the left hand side; Name your key
  • Go back to Git Bash
  • Clone the repository: git clone
    git@git.fabacademy.org/fabacademy2018/fablablccc.git
  • Find repository where you saved it in
    Ex: C:\Users\Martins\Desktop\Git FLA\FabLabLCCC\students\389
  • Drag all your webpage files and referenced materials into this folder
  • All files (html) should be in that folder (in the index)
  • Css, images & js folders should all be here
  • Go back to Git Bash and enter: cd fablablccc
  • git add .
  • git commit –m test
  • git push
  • Enter your passphrase to complete the push

  • [When working with multiple people in the same archive (if you have other classmates in your lab) you will need to use git pull (to become the branch master again) and then git push to post to the repository]