---
# System prepended metadata

title: 'Week 01: Mini Project (My First Page)'

---

# Week 01: Mini Project (My First Page)

### ==To Do List==
- [x] **Planning**
    - [x] Set Goal 

      > To update and modernise existing professional portfolio for personal career marketing, social connections for possible collaborations and a space for personal expression.
    - [x] Define Audience
      > Headhunters, clients, other designers or artists for possible collaboration
- [x] **Webpage Layout**
    - [x] Webpage Sketch

      > Site architecture sketched on iPad first before diving into Codepen 
      > ![](https://i.imgur.com/mz7Hhh9.png)


- [x] **Coding**
    - [x] Identify Containers
      > Initially planned to use 6 containers - but as I was refining the site design, I realised that it makes more sense to highlight some areas - which lead me to using Jumbotron. 
      
      > To be honest,I've messed up my page more than twice which led me to recreating the entire page twice. **I had a hard time understanding the default setting of Bootstrap which led me to be unhappy with the margins and paddings of sections when I checked it using the Inspect function under Debug view.**
      
      > I also had a hard time applying background color on the container itself as it leaves the left and right border white despite defining the background color. So the workaround I had to do was to use Jumbotron. **Is there another way to do this?**
    - [x] Set Up Columns (Nested Columns for Different Sections)
      > This was really confusing. I had a clear section and containers defined in my head but translating it to code was a bit confusing. I new I wanted to have a section where it has a title and content (with multiple columns). I initially thought that stacking them is the only option to go - but as I read further on the Bootstrap documentation - they presented another way to do it and that is by using Nested Columns. 
      
      > I had to sharpen my focus, though, on the details to make sure that I inserted the codes in the proper place to create nested columns within each sections. 
    - [x] Research on Bootstrap function - compare to page needs 
      > Througout this project, I had to heavily rely on the Bootstrap documentation. I also find some tutorials on Youtube really helpful in times that I almost want to pull my hair out! :v:
    - [x] Set up page framework
      > This is where it really came together. After reading the Bootstrap documentation, watching Youtube tutorials, and identifying the functions/codes I need to create the page - I had most of what I need to start building my page on CodePen.:writing_hand: 
    - [x] CSS Styling (Classes/IDs)
      > Formatting CSS was quite challenging not in coding but in keeping it tidy throughout the sheet! I had to recheck when I finished the entire page to make sure everything is tidy and properly formatted. 
- [x] **Content**
    - [x] Fill in section contents
- [x] **Design**
    - [x] Choose colors
    - [x] Set up image host for images
      > For this project, I used [imgbb](https://imgbb.com/) as the image host for the images on my page
    - [x] Upload video on YT (to embed)
    - [x] Social media links (links in HTML, styling on CSS)
- [x] **Check codes before submitting**



---

### ==Things to Improve==
- [ ] One major improvement is to add a gallery of images to showcase previous work
- [ ] Another point of improvement is the consistency of padding/margin throughout the page (using the Inspect function on Debug mode)
- [ ] Another alignment to fix is for the section 'What I've Done So far' - Not too sure why the images and texts are misaligned

==Question to Ask Jin==
- [ ] Is there a "perfect" way to code? (The context is I realised that at times, there are several ways to code yet still attain what we visually want to achieve in a page or section. Is there a "right way" to code - or as long as it works and it shows what we want, it's okay?