Week 1 : Website creation

During this week I learned basic codeing to complete the website page from the beginig, learning about Git and Vision. Giving my best to follow all the process and provide documentation with steps of how I creat my first repository

Basic concepts to start

• 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:

1. 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.


2. 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.


3. 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.




4. 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
5. 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.

6. 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.


7. 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"

8. 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).

9. 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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
7. 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.
8. 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.