#100DaysOfCode - jpzs444

[jpzs444]

Share your progress and tweet link:

• Day 1 tweet
  • https://twitter.com/jpzs444/status/1421785590798852102
• Description
  • I just started #100DaysOfCode by solving a FEM challenge (Fylo Landing Page). I haven't touched its CSS yet but I'm already done with the HTML. Also, I'll do my best to stick to project-based learning while I'm still thinking of a final project for SurPath Hub's #100DaysOfCode challenge in order to improve my frontend (web) skills!
• Resources you used:
  • VS Code, Google Chrome (+ DevTools), Figma

[jpzs444]

• Day 2 tweet
  • https://twitter.com/jpzs444/status/1422223427797065730
• Description
  • Made some progress on the FEM challenge, but my solution is still far from finished. + Learned a few things about SCSS, I shall try it after this landing page.
• Resources you used:
  • VS Code, Google Chrome (+ DevTools), Figma

[jpzs444]

• Day 3 tweet
  • https://twitter.com/jpzs444/status/1422567460411039745
• Description
  • Same challenge. The layout for mobile size is almost done! I only need to work on the footer, background, and the position of the CTA section. + It's my first time applying position absolute & relative to a project.
• Resources you used:
  • VS Code, Google Chrome (+ DevTools), Figma, Stack Overflow, W3Schools

[jpzs444]

• Day 4 tweet
  • https://twitter.com/jpzs444/status/1422905319324147719
• Description
  • Done with the layout for mobile size. I will finish the entire thing tomorrow and try to use min, max, and clamp (CSS).
• Resources you used:
  • VS Code, Google Chrome (+ DevTools), Figma, Stack Overflow

[jpzs444]

• Day 5 tweet
  • https://twitter.com/jpzs444/status/1423298944994406405
• Description
  • Found several issues with my HTML when I was working on the layout (desktop size), I forgot to add [important] containers that can safely have a max-width. + I still have a hard time dealing with responsive images.
• Resources you used:
  • VS Code, Google Chrome (+ DevTools), Figma, Stack Overflow, W3Schools, MDN Web Docs, YouTube

[jpzs444]

• Day 6 tweet
  • https://twitter.com/jpzs444/status/1423672460616949760
• Description
  • Used VS Code for at least 5 hours to finalize the layouts for both mobile (340px) and desktop (1440px) sizes. IT IS difficult to create web pages with a single CSS file so I will take my time to finally learn SCSS.
• Resources you used:
  • VS Code, Google Chrome (+ DevTools), Figma, Stack Overflow

[jpzs444]

• Day 7 tweet
  • https://twitter.com/jpzs444/status/1423990262154420225
• Description
  • I refactored my solution (code) to the FEM challenge by removing unnecessary lines, making comments less confusing, and converting px to em and rem units (except for border and border-radius).
• Resources you used:
  • VS Code, Google Chrome (+ DevTools)

[jpzs444]

• Day 8 tweet
  • https://twitter.com/jpzs444/status/1424351062174048261
• Description
  • Started another FEM challenge (Order Summary Component: https://frontendmentor.io/challenges/order-summary-component-QlPmajDUj) to practice the basics of SASS/SCSS. At first, I was actually aiming for the accordion one to also develop my JS skills; however, I might get burned out from learning many things all at the same time (esp our first semester starts tomorrow). I will have to assess this week's academic workload first.
• Resources you used:
  • VS Code, YouTube, GitHub

[jpzs444]

• Day 9 tweet
  • https://twitter.com/jpzs444/status/1424709615892062216
• Description
  • Learned many things about SCSS (e.g., mixin, function, include, use, forward, and map-get), organizing SCSS files, and applying Parcel (bundler) to a workflow. + So glad there were no errors while I was using CLI.
• Resources you used:
  • VS Code, Google Chrome (+ DevTools), YouTube

[jpzs444]

• Day 10 tweet
  • https://twitter.com/jpzs444/status/1425080069051936768
• Description
  • Right after finishing the HTML of the FEM challenge (Order Summary Component), our place had multiple (unexpected) power interruptions which made it hard for me to continue. Frustrated, but will work on it tomorrow.
• Resources you used:
  • VS Code, Google Chrome (+ DevTools)

[jpzs444]

• Day 11 tweet
  • https://twitter.com/jpzs444/status/1425474307161956358
• Description
  • Didn't have enough time to code today, but I already added the global styles and utils for the FEM challenge (Order Summary Component).
• Resources you used:
  • VS Code, Google Chrome (+ DevTools), YouTube

[jpzs444]

• Day 12 tweet
  • https://twitter.com/jpzs444/status/1425818844526829584
• Description
  • Watched several videos and read some blogs and documentation to learn more about the features of Sass.
• Resources you used:
  • YouTube, Blogs, Sass Documentation

[jpzs444]

• Day 13 tweet
  • https://twitter.com/jpzs444/status/1426160546093539340
• Description
  • Took a much-needed rest day.

[jpzs444]

• Day 14 tweet
  • https://twitter.com/jpzs444/status/1426578680965320709
• Description
  • Started late but I'm almost done with the styles for mobile size. I'm still getting used to the syntax of SCSS, but it's fun playing with it! I'm already a fan of Sass (nesting) + BEM naming convention.
• Resources you used:
  • VS Code, Firefox (+ Developer Tools), Figma, YouTube

[jpzs444]

• Day 15 tweet
  • https://twitter.com/jpzs444/status/1426896242374692866
• Description
  • Finished the FEM challenge (Order Summary Component). I might use this repository once I get the time to study CSS animations/transitions.
• Resources you used:
  • VS Code, Firefox (+ Developer Tools), Figma