Students Bootcamp

Introduction

During the first week, the course officially began, during which the main activities to be developed throughout the semester, the general schedule, and the weekly workflow were explained. The primary focus of this week was the development and editing of the personal website. For this purpose, students learned how to clone a base repository and edit it using Visual Studio Code. In addition, fundamental GitLab commands were introduced, enabling proper project management and version control. The following sections describe in a structured manner the activities carried out and the knowledge acquired.

Initial Website

It was explained that the development of the website would be based primarily on three languages: HTML, CSS, and JavaScript. HTML is a markup language used to structure the content of a webpage through opening and closing tags. CSS is a style language that allows defining the visual appearance of elements, such as colors, sizes, and positioning. Finally, JavaScript is a programming language that runs in the browser and enables actions and interactivity within the webpage. Initially, a base template hosted on GitLab was used as the starting point for the development of the personal website throughout the semester.

The following section presents two images showing the website before and after the implemented modifications. This process represented a significant challenge, as I had no prior experience in web development. Nevertheless, I greatly enjoyed learning and exploring new commands, which were progressively applied throughout the development of my website.

In order to edit this template, it was necessary to clone the repository and work locally using Visual Studio Code.

Repository Cloning Process

To carry out the repository cloning process, it was necessary to learn and use a set of basic Git commands:

The general procedure consisted of logging into GitLab, copying the repository cloning link, and opening a local folder in Visual Studio Code. Subsequently, the git clone command was executed in the integrated terminal along with the corresponding URL. Once the repository was cloned, the project folder was accessed and the necessary modifications were made. To reflect the changes on the live website, the commands git add, git commit, and git push were executed sequentially.

Step-by-step procedure:

Basic structure of page

Here is the base page folder and file:

Based on the visualized diagram, the main structure that the code should follow after being cloned can be observed (in this case, an additional HTML file named “student-agreement” was added). Each of these components is essential within the structure of a website, as they fulfill specific organizational and functional roles. Their main purposes are:

Folder

Files

Other Important Files

Learned Concepts

During this first week, several modifications considered fundamental for the initial development of the website were carried out. Learning basic Git parameters proved to be particularly relevant, as it established a solid foundation for the use of more advanced tools in the future. Since my academic background does not directly cover this type of content, this experience represented a meaningful and enriching learning process.

How to use CSS?!

While developing my website, I began experimenting with different commands, initially to become familiar with programming concepts, but also to explore tools that could be useful for the overall design of the page. It is essential to understand CSS, which is a language used to style web pages. Through CSS, I was able to implement several modifications that significantly improved the visual design of the website. First, within Visual Studio Code, I created a new file with the .css extension. To correctly write a CSS rule, a selector is defined, followed by opening curly braces in which declarations are placed. Each declaration consists of a property and its corresponding value. The following example corresponds to a declaration used to add blue content boxes in order to visually separate sections within the Student Agreement page.

            .rounded-box{
              border-radius: 25px;
              border: 2px solid #150a56;
              padding: 20px;
              width: 100%;
              height: 100%;
            }
        

In this way, the declarations defined within the .css file can be referenced and applied within .html files. A wide variety of properties can be used within CSS declarations. Among them, the most frequently applied during this project were:

Before further exploring these parameters, it was necessary to understand the basic structure of a webpage, which is divided into three main sections: header, body, and footer. The header typically contains the logo and main navigation; the body includes the main content; and the footer displays secondary or complementary information.

Additionally, fundamental HTML tags were reviewed, including:

Basic HTML file elements:

Additional HTML elements:

Examples of using HTML Elements

The next example corresponds to a portion of the code used in the .html file to program the navigation bar.

            div class="navbar"
              div class="navbar-inner"
                  a href="index.html">Home
                  a href="about.html">About me
                  a href="studentagreement.html">Student Agreement
                  a href="weekassignments.html">Weekly Assignments
                  a href="final-project.html">Final Project
              /div
            /div
        

Examples of using CSS Elements

In contrast, the styling and visual properties of the page were defined through declarations written in the .css file.

              .navbar {
                width: 100%;
                background-color: #081548;
                border-radius: 2px;
              }

              .navbar-inner {
                max-width: 1280px;
                margin: 0 auto;
                padding: 1% 0;
                display: flex;             
                justify-content: flex-end;  
             }
        

Main Changes on the Page

During the first week, the work focused on three fundamental aspects: content, the correct application of programming commands, and the overall design of the webpage.

The development process began with the creation of a preliminary sketch that defined the intended visual layout of the website. As the programming progressed, several changes were implemented based on aesthetic preferences and design improvements identified during development.

The first major modification carried out during the week was the design of the navigation bar, in which the following sections were integrated.

Regarding the design, a basic template provided by the course was initially used to understand fundamental commands. Subsequently, a more elaborate template with icons and graphical elements was implemented, enabling the exploration of additional commands. Prior to the final implementation, a conceptual sketch of the website was created. The selected color palette was based on dark blue tones, white, and gold, complemented with images and icons reflecting personal interests.

Subsequently, the focus shifted to the design of the main homepage. Finally, additional modifications were applied to the remaining sections of the website, primarily involving the inclusion of images, dynamic content boxes, color-coded tables, and highlighted sections to emphasize relevant information.