This week all the research is about how to develop your own website and how to organize your time in this period to have a fluid learning. This website is the place where you can see all the development week by week, by other students, by teachers and by all those curious who want to take a look around here. Personally, I don't know anything about web pages, or <html>
language, but let's investigate!
I must thank Cristian Loayza for the great support provided this week, to help me understand in a dynamic way how all the elements of a website work.
π24th April
In the class each student has a user in the GitLab cloud of the Fab Academy. Each one must upload and update their own repository within the general repository. To achieve this weekly update, get my website scheduling, and make the connection to the GIT, I had to read about various concepts.
Web programming has several elements that I needed to understand before programming my website. I learned that it is like a layer cake, and you can create layer by layer that complement each other and give that special flavor and unique appearance to your cake.π°(Your website)
Here is a description of some important terms to know about the repository:
Cloud repositories:
Here are other important terms to know about the web:
In addition, code editors and libraries will be needed to customize your website:
As a first step, I connected the GitLab hosted repository of the FabAcademy with my local repository and visual studio code. I recommend writing the codes on the command lines rather than copying them. When you copy and paste sometimes some scripts are moved that you don't need and that's why the command doesn't work.
$ git config --global user.name "YOUR_USERNAME"
$ git config --global user.email "YOUR_EMAIL"
$ cat ~/.ssh/id_rsa.pub
$ ssh-keygen -t rsa -C "$your_email"
$ git clone git@gitlab.fabcloud.org: academany / fabacademy / 2021 / labs / nameoflab / students / name-name.git
Remember that you can check that your user is set, you retype the command in GitBash $ git config --global user.name
, press Enter and your name or username should appear.You can do the same to check that your email is set correctly. $ git config --global user.email
There are many code editors, development frameworks, and testing tools in this world. It's important to keep a few things in mind before writing the code for your website. This is why I planned all this a bit before I started.I made a color palette that I was going to use and created an account on the Miro board , which has been very useful for me to put all my notes week by week. These are the steps I followed to start editing my page:
git pull
git add .
git commit -m "change you did"
git push
All the previous steps serve to clone the folder of your web (or repository) hosted in the cloud on your computer and in this way, you can work on it locally. This is why, as you progress with your documentation, you must update your website, week after week, in your remote repository. Every time you update the information, it's compiled and finally displayed on your website. You can use the Git Bash command line or the Visual Studio Code command line itself. I used the second.
I changed my name on the first push and uploaded it to the repository to see if everything worked correctly. And it worked. π
Finally I looked for a Bootsrap template and started modifying it to style my page. I downloaded it from here. The most practical way I found to work was locally with VSC, so you can generate your templates and changes, save with Control S, and finally load the HTML document in your browser, to see how it looks.
-Thanks to Mayra, I discovered that there is the magic tool πInspectπ, on any website you are browsing. You just have to right click on any part of the page that you want to review. Or press Ctrl + Shift + I.
In the lines of code that will appear, you will be able to modify colors, text values, and commands and you will be able to see the preview of these changes. Don't worry, you won't really modify anything, once you update everything will return to normal in your browser.
-If you work with a Bootstrap-based template, I recommend that for any content that you want to add and don't know how, you visit the documentation tab of Bootstrap itself. First look for the version your template is built with, so that you get the correct tutorials. I used this guide
-I learned that working and organizing your HTML documents with the greatest possible care is very efficient when designing your website. I also recommend that you generate a template and based on that you can develop all the other weeks.
-It's very important at the beginning of this course that you order and clean your PC, because you will certainly need memory space. And you must also order your browsers and keep all your links at hand. For a more efficient work.
-The world of web design is very diverse and gigantic, I really enjoyed learning this week, but I am still a puppy on this subject. There is a lot of information on the web, and free courses you can learn from.