# 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
> 

- [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?