A little bit of drama

I did not have previous experience in web design and programming, nor any idea of ​​the related concepts. When a colleage (Diego Meoño) explained in a general way the workflow, only two words remained in my mind: Gitkraken and Bootstrap (besides Git, that had been explained in the class). In this first week, I focused my effort on understand the concepts, manipulate the systems, and create a web page from the scratch, or in any case do something different to the default web page. I did not want to use the default page that had been assigned to me because it seemed very confusing. After several hours watching tutorials on YouTube and manipulating the Gitlab , writing in html and css in Sublime Text and using the Bootstrap framework (in order to build up my web page) I found the greatest difficulties in:

• Understand the workflow and the concepts: I did not finish to understand what to do first, what to do next. I spent a lot of time trying to understand each concept and how the concepts relate to each other. For example, I saw a complete course on advanced use Bootstrap, but then I found out that I could enter the page and copy the commands directly.

• Use of the Gitkraken client and upload files to Gitlab: First I did not understand why I needed a client or an additional system to Gitlab, I did not understand what it was to work locally and remotely, nor did I understand the importance of this practice. Then at the time of starting the html files that I had armed, I made my first attempts to upload them to the Git. Here I did not understand if I should use: Open, Clone or Init.In the beginning, I always used Init, and doing this I managed to successfully upload my page to the Github, of course, I delayed looking for the "extra" file I needed, which was the "readme". I had spent most of the week learning the web environment, to program in Sublime Text and the rest of things, I felt quite simple and had saved the last day to organize what I had learned, build my website and upload it to Gitlab, but I found a big problem, and that was the time I tried to upload my files to Gitlab, this for some reason it rejected them, I always did it using the "Init" of Gitkraken and copying the support files (readme, .yml, etc) but always it rejected them, and I spent several hours of frustration, I asked my colleagues for help via WhatsApp but they could not help me, since I was unable to identify the error. Finally, after a lot of trying, it occurred to me to clone a file that was hanging and paste my code on top, and this worked out.

• Last minute errors: When I had managed to upload my website, one day before delivery, I saw that the color did not load (I had created a style with CSS), that is, the page was black and white, despite that when I had done the test of the web in local, it worked with everything and the style. I was looking for what error I had been able to commit for hours, and at dawn I gave up, but it turned out that, the next day, already in the Fab Lab, when I opened my page, the style was loaded. On the other hand, you could not see the images you had uploaded, if you could see them locally, but not in the Gitlab publication. A friend (Renzo Chirinos) made me notice that I had written (in the code in local) jpg with lowercase, and the file was in capital letters.

Make a web without so much drama

Supplies

• Programming languages
  • HTML: To give structure to the web page.
  • CSS:To style the web page
• Softwares:
  • Sublime Text: Free software, text editor. Here the code is written, according to the chosen programming language (HTML, CSS, and others). To define the language used, the file with the corresponding extension is saved
  • Gitkraken: Free software (non commercial use), Git "client". This tool allows you to manage the repository (in this case Gitlab, provided by the Fab Academy). That is, the changes you make to your web page locally are "pushed" into the repository.
• Complements:
  • Emmet: It is useful when writing HTML, it has pre-loaded commands, among other things.
  • Adobe Color: This web page has a palette for color combos and his RGB codes. It is helpful to decide the CSS color of the web.
  • Bootstrap: Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

Make the web page and push it to Gitlab

To upload the page to Gitlab, I simply downloaded an example from Gitlab and save into a file (locally). This example has all the files required to publish to Gitlab webpage. In the video I explain how to do a simple web with support for Gitlab, some CSS and HTML commands, integrating the Bootstrap, color, font (use Google Fonts), the use of Emmet plugin (put command and push tab for finish the command).
The valuable thing about this point is to identify what the header of the HTML code should be so that it links correctly with the Gitlab, the rest of the files and the root folder will be cloned, later, from the default web provided by the Fab Academy.

Once the web page is ready (with the files to work in the Gitlab) I made the link between the Gitkraken and the Gitlab, this is necessary so that you can push the local files to the web, and then go managing the changes , from the local to the remote. The following is a simple and great tutorial for make the link between the repository and the client.

Local to remote

Finally, I cloned the repository provided by the fab academy and saved it in a path on my computer, this is mainly to define in which local path the root file will be found, on which it will later work. Once the route was defined, I deleted all the files it contained and placed the files I had generated (simple gitlab page).


At the end of the video, we explain how to push a change from the Gitkraken to the Gitlab.