1. Project management

In week one, our Our main objective is to assess progress, highlighting achievements and opportunities for growth, and sharing the knowledge gained. To achieve this, we'll use Git to showcase our work throughout the course and HTML with Visual Studio to code the website and create its content.

Somethings about Git

Have you heard about Git? It's awesome because it lets you collaborate with others by sharing your work and accessing a server remotely.

On their website, they describe that:

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

In simple terms, Git is a version control system that we will use to manage course content. So, we will manage the different pieces of information, and version control will save the history of the current files.

To use this, you just need to learn a few simple commands:

Command Description
git init Creates a new repository locally.
git clone It is to download a file, copy it or duplicate it.
git add [file] Include the file in your next commit.
git add . Used to add all the files inside a folder.
git commit It is used to package what has been done. And you can create a point on a line in your process.
git commit -m "[message]" Commit all the staged files.
git push Your local changes have been sent to the online repository.
git status Check the status of the current branch to see if it has been modified or needs an update.

When it comes to these guidelines, it is important to understand how to use them accurately. In my case, I followed these steps once I understood them:

  1. To begin, open Git CMD.
  2. Open the space in which you will work using the 'cd' command.
    • Note: I used the desktop of my computer.
  3. Navigate to the Fab Academy repository.
    • Note: A repository is a set of files with history. Is your current files and their history.
    • Important: If you don't have a repository, you can easily create one by using the command 'git init'.
  4. Clone the HTTPS.
    • To clone a repository in GitLab Fab Cloud, simply select 'Clone' and then choose 'Clone with HTTPS'. Copy the provided URL and use the command 'git clone' in Git to clone the repository.
  5. Open the cloned file using the 'cd' command.
  6. The next step is to open the cloned file.
    • Note: Open the file in your computer.
  7. Then, eliminate the predetermined files.
    • Note: Only if you use a template.
  8. Paste the template page archives that you have chosen.
  9. To attach all the files inside the folder, use the command 'git add .'
    • Note: Remember that add with two points it’s to add all the files.
  10. Then, name the commit using the command ‘git commit -m “Name”’.
    • Note: Make sure to choose a name that clearly describes the modifications that were implemented.
  11. Finally, execute the command 'git push' to reflect the changes in the cloud.

How to make a website and don’t die trying?

Breathe first and do not let so many codes stress you out. And begin with the start.

To develop my website, I use HTML and CSS with Visual Studio.

  • HTML is the most basic building block of the Web. It defines the meaning and structure of web content.
  • CSS is a stylesheet language used to describe the presentation of a document written in HTML. It describes how elements should be rendered on screen, on paper, in speech, or on other media
  • Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.

HTML tags

Openning tags Closing tags Description
< html > < / html > Start the website.
< head > < / head > Part that isn’t displayed in the web browser when the page is loaded.
< title > < / title > Metadata that represents the title of the overall HTML document.
< h# > < / h# > Represents a different level of content in the document.
< body > < / body > Part that is displayed in the web browser when the page is loaded.
< p > < / p > To wrap each paragraph.
< ul > < / ul > To make a list with bullets.
< ol > < / ol > To make a list with numbers.
< li > < / li > To enlist the content.
< img scr=” Name of image” alt=”Description of the image”> > ---- To insert an image.
< ! -- Comments -- > ---- To insert a comment. It not visible on the website, only in the code.
< a herf=”Link” > Text < / a > To insert a link that will open the same page.
< a herf=”Link” target="_blank" rel="noopener noreferrer" Text > < / a > To insert a link that will open the same page.

CSS tags

Tags Description
font-size Sets the font size.
width Sets the width of an element.
background-color Sets the color of an element's text and decorations.
border Set the border of an element.
transform You can rotate, scale, skew, or translate an element.
background-image Sets one or more background images for a specific item.

Another thing that you gave to know, when you want to apply a specific style to a series of elements, it's best to use a class to avoid any code conflicts. See the next example:

After understanding the basics, I used the phantom template of the HTML5 website that my instructor Rafa shared with me via a git repository. I downloaded the source code as a zip file onto my computer and customized the template to fit my personal style and work approach

So to accomplish this task, I just followed these simple steps:

  1. First, let's change the colors to make it more visually appealing.
  2. Next, let's include some images with a style class to make them stand out.
  3. We can use Snappify to generate a code and then paste it into your index code. This code will embed your visuals in a way that your viewers can easily copy code snippets or text.
  4. Let's transform the rectangle into a circle and replace the pictures of the firsts three weeks.. This is part of this week's assignments.
  5. I made some changes to the tags on my social media and communication channels.
  6. Additionally, I created some new tables to help explain some information more clearly.
  7. Finally, I added some essential information in new paragraphs.

The personalization task was quite challenging because I had a bit of a challenge locating the various styles within the lengthy CSS code, but it was all worth it in the end.

Advices

As a friend, I'd like to share some advice with you:

  • When modifying the code, make sure to review any changes carefully, especially in the CSS. Always double-check that you are modifying the correct section, as the code is extensive and contains multiple sections.
  • Check out these basic concepts and information on CSS first steps.
  • To quickly and efficiently locate specific parts of the code, you can use the Ctrl + F function. If you are more specific in your search, you will get faster and more precise results.
  • Be careful with commits, see in your Git Lab Fab Cloud if the push has been saved to the cloud.
    • After you commit and push, please make sure to verify your internet connection. It's crucial in this case.
  • Just remember to be patient and you'll make it through!

Conclusion

In conclusion, creating this website was a great experience! It reminded me of concepts I learned in high school and taught me new things about previously overlooked aspects.

I think this is a smart tool to archive the progress of a series of lessons that are nurtured over time. Maybe it’s hard to make the things in the way that you expected but anyone is born knowing or being an expert… or maybe yes … but the point is that we are learning great tools that will help us in the future.