Skip to content

1. State of the art,project management and documentation

This week marks the start of my Fabricademy adventure. It began with setting up my digital space using GitLab a process that challenged me to think like a coder while embracing the creative possibilities. From configuring the site to documenting my work, every step has been a new discovery. I’m building the foundation for a journey filled with experimentation, growth, and a lot of learning.

Building Your Fabricademy Website!

My Journey Begins Building My Digital Canvas

This website is my little corner of creativity, where I get to share my journey through Fabricademy. It’s not just about projects and assignments; it’s about capturing my growth and the excitement of learning something new every day.

It looks like I’ll be sticking with this website for the next six months or maybe longer! Who knows where this path will lead us? I can’t wait to fill this space with my experiences and all the fun moments along the way

Accessing Your Class Website: The Beginning of Your Digital Journey

First things first let’s bring your class website to life! This is where your journey begins, and trust me, it’s easier than it sounds. Let’s get that virtual space ready for action!

  • Copy the code for your class website (you’ll get this from the course).

describe what you see in this image

  • Download GitLab (for syncing your website) and Visual Studio Code (VSC, where the magic happens).

describe what you see in this image

describe what you see in this image

  • Create a cozy home for your website on your computer.

  • Name the folder “website” so you know where it lives.

describe what you see in this image

  • Open Git and use this command to bring your website to life:
   git clone [Your Website URL]

describe what you see in this image

Boom! This will create a shiny new folder with your website name inside it. Now, crack open VSC and open that folder.

describe what you see in this image

File Organization: Keep it Neat, Keep it Sweet!

Imagine your website as a well organized wardrobe you’ve got sections for every outfit. Keeping things tidy from the start will make life a lot easier when your site is packed with content!

  • Make sure to save your work frequently (Ctrl + S).
  • Organize your files into different categories. Each section (images, assignments, projects, stylesheets) should have its own folder.
  • For example, create folders like Week 1 Assignments or Week 5 Images. It’s like giving each part of your journey its own special home!

describe what you see in this image

Markdown Magic: Writing and Styling Made Easy!

Ready to get creative with your website?

Fabricademy uses Markdown to help you write and style your content quickly and easily. It’s like painting with words, but with a few extra tricks!

  • Use # for the main title of your page (think of it as your website’s headline).

  • Use ## for subheadings (this can be the sections, like "Assignments" or "Projects")

  • Want to add even more layers? Add more # symbols to break it down further (e.g., ### for even smaller subcategories).

  • Keep the body text simple no extra symbols needed, just start typing away!

  • And oh! Don’t forget to leave one space between your title and the body. Clean and crisp.

Committing and Pushing: The “Save” Button for Your Website

Every time you make changes to your website, you’ll want to commit (save) those updates and then push them live. It’s like pressing a magic button that uploads your latest masterpiece for the world to see!

  • When you’re done editing, click the source control icon (it looks like a little tree branch).
  • Type a name for your update (e.g., “change 1” or “fixed layout”).
  • Click Commit and then Push. This syncs your website to the internet so others can see your work.
  • You can even watch the progress on

    GitLab it’ll show a cool blue progress bar while it’s working its magic!

describe what you see in this image

GitLab One-Time Setup: Introducing Yourself to the System

Before we dive too deep, GitLab needs to know who you are. Think of this as your digital introduction so that every change you make is credited to you.

  • Open GitLab and run these commands to set up your name and email:
   git config --global user.name “Your Name”

   git config --global user.email “your_email@example.com”

And there you go! Now every edit you make is personally stamped with your name.

Markdown Basics: Jazzing Up Your Text

Want to make your text pop? Here’s how you can spice things up with Markdown:

  • Bold Text: Wrap your text in two asterisks like this: **Bold Text**
  • Italics: Use one asterisk like this: *Italic Text*
  • Bullet Points: Simply add a * or a - before each item in your list

Markdown is super easy once you get the hang of it! And if you ever need help, this

Markdown Cheat Sheet is your best friend

Adding Images: Bring Your Site to Life with Pictures

Pictures are worth a thousand words, right? Adding images will make your website feel alive and exciting, but there’s a trick to keeping them organized and looking sharp.

  • Upload your images to the images folder.

  • Use simple names for your images like image01.jpeg, image02.jpeg.

Tip
  1. No spaces or capital letters, please!
  2. Make sure they’re compressed to 70KB or less so they load quickly.

Here’s how you add images in Markdown

![alt text](path_to_image)

Tools

Linking Text: Connect Your Words to the Web

  • To link text to a website or image, use this format: 
    [text](URL)

Now you can send your readers exactly where they need to go!

Folder Navigation: Keeping Your Paths Clear

Sometimes you’ll need to link to files that are stored in different folders. Here’s how to navigate between your directories like a pro:

  • To link to files outside your current folder, use this format:
 ![](../path_to_file)
Tip
  1. The two dots mean "go up one level" to find the file. If you're inside the main folder (e.g., docs) no need to go up!

CSS Customization: Make Your Website Uniquely Yours!

Now it’s time to add some personality! Want to change the fonts, colors, or install cool plugins? This is where you can really make your website shine. PS: I know what it is capable of but still didnt quite tried it for real!

  • All your customizations happen in the mkdocs.yml file.
  • Remove the # to activate certain features and start playing with the look and feel of your site.
Need some help?!!!

Check out these resources:

Facing the Coding Challenge: My Honest Experience

Alright, let's be real for a second,learning to code when you’ve never done it before can feel like trying to solve a puzzle with missing pieces! At first, it felt like staring at a foreign language, full of symbols and rules that seemed impossible to figure out. I’d be lying if I said I didn’t feel lost or frustrated sometimes.

But, like anything new, it just took some patience and a willingness to break things down into smaller, bite sized pieces. I reminded myself that every new skill starts with confusion, and bit by bit, things started to click. The more I practiced, the more everything came into focus. Now, those once intimidating lines of code feel like creative building blocks, and I’m even starting to enjoy the process! It’s been tough, but the sense of achievement makes it all worth it.

So, if you're also struggling with something new, take it from me stick with it. You’ve got this!