- HTML
HTML, short for HyperText Markup Language, serves as the fundamental foundation of a website,
providing the organization and significance of its content.
Example
- CSS
CSS defines the visual layout
CSS stands for Cascading Style Sheets.
It's a style sheet language used to describe the presentation of a document written in a markup language like HTML.
CSS separates the content of a webpage from its design and layout, allowing to control aspects such as fonts, colors,
spacing, and positioning. It's essential for creating visually appealing and well-organized websites
Example
- Java Script
JavaScript determines the interactive behavior of web pages.
It is a language primarily used to create dynamic content on websites.
Mostly works as a space to add functionalities such as animations, user interactions, form validation, and much more.
Example
- Terminal
Terminal as a use refers to interacting with a computer's operating system through a text-based interface, typically using a
program called a terminal emulator. Like a time line of your progress.
Display of Mac Terminal
Display of Git Bash
Display of Command Pompt
- GitLab
GitLab is a web-based DevOps platform that provides Git repository management,
continuous integration/continuous deployment (CI/CD) pipelines, issue tracking,
and collaboration tools for software development teams.
- Visual Code
Visual Studio is an integrated development environment (IDE) created by Microsoft,
primarily used for software development. It supports various programming languages
and offers features such as code editing, debugging, version control integration, and collaboration tools.
Introduction of git
- git init
Meaning: Initializes a new Git repository in the current directory.
Example
- git clone [repository URL]
Meaning: Copies an existing Git repository from a remote source to your local machine.
Example
- git add [file] or git add
Meaning: Adds changes in the specified file(s) to the staging area for the next commit. The . option adds all changes.
Example
- git commit -m "commit message"
Meaning: Records changes to the repository with a descriptive message summarizing the changes made..
Example
- git status
Meaning: Shows the current status of the working directory and staging area. It displays which changes are staged, unstaged, or untracked..
Example
- git push
Meaning: Uploads local repository content to a remote repositoryExample.
Example
Step by Step Guide:
- Download Git and Install:
- Visit the official Git website (Git) and download the version of Git compatible with your operating system.
- After that download Visual software(VisualStudio) and download the version compatible with your operating system.
- Follow the installation instructions provided for your operating system.
- Set Up GitHub Account:
- First I sign up for a GitHub account at GIT.
- Once registered, I log in to my account.
- And download the pretemplate.
- Open Terminal (or Command Prompt on Windows):
- Launch the terminal application. On macOS, you can find Terminal in Applications > or use the default terminal emulator.
- On Windows,use Git Bash, which comes bundled with the Git installation but I personally used Command Promts due its simmilar to Terminal.
Initial Template Setup
With a solid understanding of HTML and CSS, I was ready to tackle the project. Prof. Rafael provided a template that served as my starting point. The template can be found in the following link.
Figure 06. Creation of the local folder where the repository will be cloned into:
To start uploading things into my repository, first I needed to establish my username and email adress that were provided by FabAcademy. This step is essential since without the username and password Git won't be able to push and commit any changes I've made.
Figure 07. Commands to establish username and email adress
To work on the template we must clone the source code of the project on our local machine with the next command:
Figure 08. Command to clone the template into our repo
- Clone the Repository:
- Once I downloded the sorce code i went to a directory where I store the project files. Then i used the
cd command.
- I also tried to clone the repository from GitHub using the
git clone command followed by the repository URL. For example:
git clone https://github.com/username/repository-name.git
- Then replace the
username with my GitHub username and repository-name with the name of the repository you want to clone.
- And with the starting code also change my name among other things
- Edit Characteristics:
- Open the
index.html file in your text editor.
- Add HTML markup to create the structure of your web page.
- Customize the content and styling of your page using HTML and CSS.
- Create the Weeks:
- Then I had to navigate the cloned repository directory using the
cd command.
- And in the Explorer I selected a new file
week#.html I edited the index touch week#.html.
- Save Changes and Commit:
- Save the changes to the
index.html and in all the pages created
- In terminal, I used the
git status command to view the changes I've made.
- Add the modified file to the staging area using the
git add command:
git add index.html
- Commit the changes to local repository with a descriptive message:
git commit -m "firstcommit""secondcommit"thirdcommit"
- Push Changes to GitHub:
- Push your committed changes to the GitHub repository using the
git push command:
git push origin main
- Replace
main with the name of the branch you're working on (e.g., master or main).
- Verify Changes on GitHub:
- Affter all that go to the link of the original page to verigy all the changes *I had some issues with the push specificly with some images*.
Review Version Control if necesary
Version control is a system that manages changes to files over time. It allows you to track modifications to your code, documents, or any other files, preserving a history of all changes made. This history includes who made each change, when it was made, and what exactly was changed. Version control is essential for collaborative projects, enabling multiple people to work on the same files simultaneously without fear of conflicts or loss of work. It also provides mechanisms for reverting files back to previous states, comparing different versions, and branching out new features or experiments while keeping the main project stable.
How to Use Version Control:
- Choose a Version Control System: First, you need to select a version control system that suits your needs. Git, SVN, Mercurial, and others each have their own strengths and weaknesses.
- Set Up a Repository: In most version control systems, you start by creating a repository, which is a centralized location where all your files and their versions will be stored. This can be done locally on your computer or on a remote server, depending on the system you're using.
- Add Files to the Repository: Once your repository is set up, you add the files you want to track to it. This is typically done by "committing" the files to the repository, which creates an initial version.
- Make Changes and Commit: As you work on your files, you make changes to them. After completing a set of changes, you "commit" those changes to the repository. Each commit represents a snapshot of the files at a particular point in time, along with a description of the changes made.
- View History and Diffs: You can view the history of your files to see all the changes that have been made over time. You can also compare different versions of files to see what exactly changed between them.
- Branching and Merging: Version control systems often allow you to create branches, which are separate lines of development. You can work on new features or experiments in a branch without affecting the main project. When you're ready, you can merge your changes back into the main project.
- Collaboration: Version control enables collaboration among team members. Multiple people can work on the same files simultaneously, and the system will manage conflicts and ensure that everyone's changes are incorporated correctly.
- Reverting Changes: If you need to undo a set of changes, you can revert back to a previous version of the files. This is particularly useful if you discover a bug introduced in a recent change.
- Before and after:
- This is how the template locked, then how this is how it is so far.
