Assignments

The following tools were used to create the website:

  • Bootstrap as CSS framework
  • Visual Studio as a code editor
  • Live server as a plugin to show changes in real time.
  • To get started, we go to https://getbootstrap.com/ and click on the "Get Start" button. In order to use Bootstrap, all you have to do is import the initial template into our "Index.html" file.

    To avoid falling into bad practices before starting the project we study what sections we will have, in order to organize them, in our case everything that corresponds to images we have inside our "Assets" folder, the file "index.html" to be of public character for the correct "read" of our browser we leave it in the root folder. Once this is done, we copy the initial bootstrap template that we talked about earlier.

    Bootstrap is a framework that simplifies the part of the code because being based on components, it is simply enough that we copy, paste and edit the layout that we want to use.

    Once we have all the components copied and pasted into our editor, we will proceed to compile the code, within visua studio there is a plugin with which we can start a server on our preferred port and see the changes in real time.

    To install it we go to the visual studio extensions option and look for "Live server"

    We just have to click on it to install it, once installed we run it by clicking on the bottom right of our editor where it says "Go live" and automatically our server will turn on and run within our default browser.



    In this part I wanted to highlight the technical assistance of Patrick Rodriguez, bachelor's degree in systems engineering, frontend developer and outstanding student of Platzi, who guided me throughout this process with the basic concepts of everything that corresponds to the world of programming.

    Git is a version control computer system, which for this activity controls versions of Fab Academy computer deliverables such as programs, code, and our Web pages. The procedures performed by this student have been guided by Engineer Carlos Nina Ochoa, Fab Lab Tecsup Lima instructor in Peru. The first step has been to check my email inbox, where we have entered to confirm our account in Fab Lab IO.

    In Fab Lab IO, we already have an account pre-established by the Fab Academy, to reaffirm a new password we enter the option "Start Session" and then we enter "Forgot the password?", fill in the requested fields and you will arrive at our email the option to update a new password for our pre-existing Fab Lab IO account.

    Once our Fab Lab IO account is created, we enter the Git Lab Fab Cloud page, whose link is as follows: https://gitlab.fabcloud.org/

    In Git Lab Fab Cloud, we will enter our Git Lab account with the account previously created in Fab Lab IO, for them we enter the options as shown in the following images.

    Once our accounts have been created in Fab Lab IO and in Git Lab Fab Cloud, we proceed to download and install the Git software, the download will be made at the following link https://gitforwindows.org/ which is for the Windows operating system. We must also remember our user in Git Lab, since it will help us to link Git from our computer to Git Lab Fab Cloud.

    We got into Git Bash on our computer, which is part of the package that should have been installed from Git. In Git Bash we will do the procedures indicated in:

    http://pub.fabcloud.io/tutorials/week01_principles_practices_project_management/git_simple.html

    which are shown below in the images with the example of my performed procedures, Git Bash works as a command bar.

    We go to Preferences of our Git Lab Fab Cloud account, then we go to SSH Keys.

    In SSH Keys, we paste with CTRL+V the key that we just automatically copied from Git Bash with the previous commands.

    Our Fab Academy websites are connected to our Git Lab Fab Cloud account, so in order to modify our websites we must first clone our Git Lab Fab Cloud repository to our computers, the procedures in Git Lab Fab Cloud, Git Bash and our computers are shown below, we can see that with the "pwd" command in Git Bash it will indicate in which folder our repository will be cloned, it is this cloned repository that we can modify to have the web page we need, to later upload again to Git Lab Fab Cloud the new modified repository.

    Created the website in HTML through templates obtained freely as well as the respective technical assistance, for this student the files of the website have been copied to the cloned repository on my computer, deleting the other files except for those below are outlined in red.

    The commands to use in Git Bash to commit our new repository and push it to Git Lab Fab Cloud are as follows:

  • (ls) to determine the status of our repository.
  • (cd) to type the folder in which our new repository is located and thus convert it into master in the following processes.
  • (git status) to determine the current status of the repository on our computer.
  • (git add .) to add all the mods.
  • (git commit -m "Title of the commit in our repository") to generate the new commit with our repository.
  • (git push origin) to push our commit to our Git Lab Fab Cloud repository.
  • As the changes to this student's page progress, the changes and steps taken will be documented.