Totally git!

Hey, girl! So, you're diving into the whole GitLab thing for the first time, and you want to share your fabulous webpage with the world? Amazing! Here's the lowdown in a way that's as chill as your favorite playlist

Get That GitLab Party Started

Log into your GitLab account – it's like your backstage pass to the coding world.

Hit the '+' sign in the top menu and choose "New project." Give your project a cool name, some deets, and decide if it's gonna be a private VIP party or open to everyone. Click "Create project." (In this case Fab Academy gave me my repository with a fab account they provided me)

SignInFab

Set Up Your Local Squad (aka Git)

Open your terminal (don't worry, it's just like a cooler version of texting).

Type in these lines to tell Git who you are:

Firststep

Kickstart the Jam

Navigate to where your webpage files are in your terminal. Use cd to move around like a pro.

Now, let's start the party:

Secondstep

Copy the fancy GitLab URL they gave you (it's like the location of your online party).

Connect the Local and Online Vibes

Paste that URL into your terminal like it's the hottest gossip:

Thirdstep

And then shout:

Fourthstep

Show Off Your Webpage Swag

Drop your webpage file into the mix:

sassylastcode

Head back to GitLab – your webpage is now stealing the spotlight in your repository.

Mic Drop – You Did It! 🎤

Go to your GitLab page, find your index.html, and click on it. Your webpage is now live, girl! Now, you've created your first GitLab repository, uploaded your fab webpage, and you're officially the DJ of your coding party. Keep rocking those commits, and remember, the coding world is your runway! 🚀💻✨

My 🌸✨sassy✨🌸 cheat sheet:

Feel free to take a look so you can understand it better.

Step by step

Girl, so if you want to add files into your new Git repository remember to:

  • Use the git add command to add the files you want to push into the staging area. You can add specific files or add all files using a wildcard "."
    • primera
  • Once the files are added to the staging area, you need to commit them to the local repository with a descriptive message using the git commit command:
    • segunda
  • If you haven't linked your local repository to a remote repository yet, you need to do so using the git remote add command. Replace with a name for your remote repository and with the URL of your remote repository.
    • tercera
  • Finally, use the git push command to push your committed changes from the local repository to the remote repository:
    • cuarta

    Replace with the name of your remote repository (e.g., origin), and with the name of the branch you want to push your changes to (e.g., main).


Reference links

Ok super pretty but... How did you do your website?

Get a cool Template

So if your teacher/instructor is cool enough, your school probably hooked you up with a cool template in a ZIP file. Download it and unzip it on your computer (This was my case). So I´m gonna drop the repository where all of this beautiful explanation and template came from, feel free to take a look:

  • GitLab Rafa

    • Check Out the File Structure

    • Once you unzip the template, take a peek inside. You'll find HTML files, CSS stylesheets, and maybe some JavaScript files.
    • There might also be folders for images, fonts, and other stuff.

    Customize Your Template

    • Open up the main HTML file in your favorite text editor (I like and use Visual Studio Code, but you do you!).
    • Start poking around the HTML code. Look for sections like headers, footers, and navigation menus.
    • Feel free to tweak things! Change up the text, add some links, or swap out those stock images for some of your own.

    Tweak the Styles and Make It Your Own

    How? well let´s use bootstrap

    • First things first, let's get Bootstrap into your project. You can either download the Bootstrap files from their official website (https://getbootstrap.com/) or use a CDN (Content Delivery Network). For the CDN, just add this code in the section of your HTML file:

      • This line of code will link your project to Bootstrap's styles and scripts, allowing you to use Bootstrap's classes and components in your site.

    Rock those bootstrap classes

    • Bootstrap comes with a ton of pre-defined CSS classes that you can apply to your HTML elements to give them different styles and functionalities.
    • For example, you can use classes like container, row, and col to create a responsive grid layout.

      • This grid structure will split your page into two columns on medium and larger screens.

    Customize with Bootstrap Components

    • Bootstrap also offers a variety of ready-to-use components like navbars, buttons, cards, forms, and more.
    • You can add these components to your site by simply copying and pasting the code provided in the Bootstrap documentation and customizing it to fit your needs.

    Always remember to check out Bootstrap's official documentation for more details on using their classes, components, and advanced features. And don't be afraid to experiment and play around with different elements to create a unique and eye-catching website!✨

    • Use the git add command to add the files you want to push into the staging area. You can add specific files or add all files using a wildcard "."
      • primera
    • Once the files are added to the staging area, you need to commit them to the local repository with a descriptive message using the git commit command:

      • Remember, girl, this is your chance to show off your style and creativity. Have fun with it, and don't be afraid to experiment! You got thi girl! 🌟💻✨