assignment 1.5

project management

Do a git tutorial

Sign the agreement and push it into your repo

This assignment has diferent parts

What's GIT

First things first GIT is a version control System design by linus torvalds.

version control it's like having a group of developers working on the same project from diferent devices at the same time and concentrated in one place and this place on the web have the history of the activity on each device.

a very over simplified analogy it's like having a group of workers writing a letter onthe same file in microsoft's onedrive service.

but here the site that concentrate all of the files of the project it's called repository "repo"

it operate within a "tree-like" structure with each branch having a diferent purpouse in the overall history in the project.

every developer can work in diferent branches at the same time and have diferent aproaches to solve the same issue. and can go back to the previous version if he decides to leave that branch and go back to the "master branch"

this is a little graphic on a explanation on how git works the green circles are the master branch. then the blue ones are one device in one side od the world and the orange is another branch created in on another point in th project history.

Back to the index

Do a git tutorial

I know Neil said just work trough a git tutorial and tell us about it but in my personal experiencie it was a really steep learning curve to begin with so i came with this step by step instructive that want to share. I installed Git bash on a Windows 10 computer so the instructions my change depending on the operative system you’re on.

  1. you will have to get installed git on your computer. You can go to git oficial site from HERE git oficial site then choose your OS.
  2. if you can read this i messed up

    This is the install package i choose.

  3. After finishing the installation process you want to créate your SSH.
  4. go to the directory were your key was stored
  5. Command: $ cd .ssh/
  6. show your key
  7. Command: $ cat
  8. copy your key to the clipboard
  9. Command: $ clip<
  10. on your web browser go to your gitlab account once you have maintainer Access granted by academany IT (check your e-mail to look for that)
  11. once inside your account got to your account setting on the right upper corner of the interface
  12. if you can read this i messed up
  13. go to the “SSH KEYS” button on the left side panel of the interface
  14. if you can read this i messed up
  15. right click and paste your clipboard on the “key” field.and then click on “add key” button
  16. if you can read this i messed up
  17. if done it right you will be directed to the fingerprint of your SSH key
  18. go back to git bash to clone your gitlab repository.
  19. Command: $ cd (to go back to the gitbash root directory)
  20. from your web browser again go to your gitlab account and on your repository make click on the clone with SSH button on the interface (this will ad something to your clipboard)
  21. if you can read this i messed up

  22. go back to git bash and clone the repo (this will créate a folder inside the directory your located on bash (as a tip you shuld créate the clone on the gitbash root folder and then on Windows créate a shortcut wherever you like to work on your file to upload)
  23. Command: $ git clone “here you pase whatever you copied to your clipboard on the previous step”right click and then paste

    if you can read this i messed up
  24. from your Windows explorer go to your cloned repository and créate a shortcut were you’ll be working during your fabacademy
  25. if you can read this i messed up
  26. make your first commit and push
  27. and then we are set to start uploading files to our repository, if done it right you should look at your pushed files like 1 or 2 minutes you only have to refresh your browser to see the files.
  28. Notes on yaml

    As you start pushing your files of your own web page you should erase the default template fabacademy gave you you should. This are the folders that your repo initially came with.

    if you can read this i messed up

    But in order to your web page be properly displayed on the oficial web on the academy you need a yaml file in my case i had some advice to do this.

    if you can read this i messed up

    On the left side you have the original yaml file that came with and on the right side you have the template on the new yaml file. It’s just a few instruction to grab all the files and display it publicly on the fabacademy website.

    HERE You can download my edition on the YAML file

    Back to the index

    How to do your first push on git

    the very first intro of GIT

    i'll try to do the very first tutorial on this repo of using GIT.

    this is my repo before i made the push

    first hit the win key and open a new git bash instance.

    type cd luis-hernandez

    this will change the directory you're at to the repo you just clone in the steps above.

    when you hit enter you'll see the line change to the direction you just did.

    if you type git status

    you'll see the documents that had suffered changes and are not updated to the repo.

    type git add [space] file_name [space] File_name

    so you can add one by one the files you need to update.

    another git statuswill show that you've added those files for commiting

    if you type git commit -m "comment"you can close de commit "-m" stands for "message" this means that anything onthes "" will be a comment this can help when you wanna know the changes pushed on the commit

    then type git push and if you don't have any error message this means that you can see you're update in arround 2-5 minutes on the web page.

    this is the pic i've just pushed.

    Back to the index

    1.2 make a sketch on your web page

    My web developer skills are still a work in progress but as an engineer i feel relativly comfortable arround programming languages. At first my friend and local instructor ivan suggested adobe muse because relativly easy to use GUI that software offers but it was quikly discarded due to it was unsupported to adobe on the 2019 version of their suite and in the university would have issues with licences. That’s why we tried to move to bluegriffon and open source software with a similar GUI to adobe’s muse but my greedy mind wanted a responsive menú on my web page and it was realy dificult for me to work with css and js in bluegriffon to be satisfied with the result so i have once more to move to another software so i came across brackets another open source Project not quite as user friendly as bluegriffon but it let me work with plain html,css,js and yml in the same interface that’s why i decided to dive further down in the rabit hole. i’m already learning html and other softwares on tutorials online.

    if you can read this i messed up

    i begin by doing a handmade graphic with some specs on what i wanted to include in my page.

    if you can read this i messed up

    Then used diferent web developemnt softwares.

    i've tried bluegriffon, dreamweaver, sublime.

    if you can read this i messed up

    but i've ended up using brackets.

    why brackets? since is a usefull open source software where you can made dynamic web pages and process a lot of file types in one software.

    if you can read this i messed up

    this is the GUI i must admit it's a little daunting for a noob but a lot of youtube tutorials and a lot of help from ivan hernandez.

    if you can read this i messed up

    using brackets you can even have some real-time feedback on the code you're writing.

    why i stop using java script

    This may read like a tantrum but.

    as i started the journey fabacademy in 2020 i began to idealize my web page in one way but the local reviews made me simpify my main menu an place a page for the assignments instead so.

    the menu bar on the top used to be a drop down clickable list. but now is a simple gray banner on the top with button and links

    with the last picture you can compare what used to be my menu and what acctually is.


    a little bit like a conclusion must add another cheat sheet but for HTML5 languge because that what i've been using.

    every tag used in this html has it's own attributes wich may vary depending on the tag in question.

    i also used a CSS file in my repo just to get a feel of how i use it in html but all of my tags are simples with default fonts families,colors and sizes just every now and then i use some green texts wich is just and html id="green" atribute to call to a comand on css which set the font color to green.

    this is how for example i call for a green text

    Back to the index

    Student agreement

    Back to the index

    Here you can download my student agreement from my repo Student agreement

    Back to the index

    GIT Cheat sheet

    Back to the index