#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

[jpzs444]

• Day 16 tweet
  • https://twitter.com/jpzs444/status/1427297682570190848
• Description
  • Started learning R (programming language) with RStudio as my IDE. I also fixed the issues of my solution to the previous FEM challenge, I forgot to replace the linked stylesheet in the HTML and the file path of the two (parcel-built) background images located in the dist folder.
• Resources you used:
  • VS Code, Firefox (+ Developer Tools), RStudio, YouTube

[jpzs444]

• Day 17 tweet
  • https://twitter.com/jpzs444/status/1427646384254197761
• Description
  • An unplanned rest day; it's just been one of those days.

[jpzs444]

• Day 18 tweet
  • https://twitter.com/jpzs444/status/1428012410594496519
• Description
  • Started learning transitions and animations in CSS. Apart from the animation property and @/keyframes rule, I will also study a bit more on the before and after pseudo-elements.
• Resources you used:
  • VS Code, Chrome (+ DevTools), Firefox (+ Developer Tools), YouTube, CodePen

[jpzs444]

• Day 19 tweet
  • https://twitter.com/jpzs444/status/1428367589743288329
• Description
  • Studied the before and after pseudo-elements and thought of ways on how to apply them as "design elements" for my future projects. I also started a new FEM challenge.
• Resources you used:
  • YouTube, CodePen

[jpzs444]

• Day 20 tweet
  • https://twitter.com/jpzs444/status/1428688735307067395
• Description
  • Continued studying the data types and structures (e.g., lists, matrices, arrays, data frames, and factors) of R. I also made some progress on the FEM challenge.
• Resources you used:
  • RStudio, VS Code, Chrome (+ DevTools), YouTube

[jpzs444]

• Day 21 tweet
  • https://twitter.com/jpzs444/status/1429110945997938691
• Description
  • Worked on the FEM challenge (Pod Request Access Landing Page). I 100% enjoy using SCSS since it makes my styles organized and easier to navigate.
• Resources you used:
  • VS Code, Firefox (+ Developer Tools)

[jpzs444]

• Day 22 tweet
  • https://twitter.com/jpzs444/status/1429454385340289024
• Description
  • Done with the styles for mobile screen size (375px). It took me almost an hour to make the background styles work the way I want them to; I found out that my header and divs only lacked "position: relative."
• Resources you used:
  • VS Code, Firefox (+ Developer Tools), W3Schools

[jpzs444]

• Day 23 tweet
  • https://twitter.com/jpzs444/status/1429832890565611520
• Description
  • Coded for about 10 minutes only to keep my streak going. Today's schedule was all intended for the online event of our university and for finalizing my homework.
• Resources you used:
  • VS Code, Firefox (+ Developer Tools)

[jpzs444]

• Day 24 tweet
  • https://twitter.com/jpzs444/status/1430201977103740930
• Description
  • Worked on the layout for tablet screen size. I'm still figuring out how to copy the design made by FEM.
• Resources you used:
  • VS Code, Firefox (+ Developer Tools)

[jpzs444]

• Day 25 tweet
  • https://twitter.com/jpzs444/status/1430516885611638786
• Description
  • Finished the styles for tablet screen size. The iPad Pro layout still looks off with the background image just sticking at the top right corner but I'll try to come up with a good solution.
• Resources you used:
  • VS Code, Firefox (+ Developer Tools)

[jpzs444]

• Day 26 tweet
  • https://twitter.com/jpzs444/status/1430922613673512960
• Description
  • Just a few more tweaks on the layout for desktop screen size and then I can start implementing the simple form validation in JS. It took me a while to remove the horizontal overflows (even though border-box is on).
• Resources you used:
  • VS Code, Firefox (+ Developer Tools)

[jpzs444]

• Day 27 tweet
  • https://twitter.com/jpzs444/status/1431270479562641413
• Description
  • Rest day.

[jpzs444]

• Day 28 tweet
  • https://twitter.com/jpzs444/status/1431550840939028486
• Description
  • Done with the FEM challenge (Pod Request Access Landing Page). The layout of the webpage in some screen sizes could still be improved, but I'll stick to the current appearance for now. It's my first time using CSS animations.
• Resources you used:
  • VS Code, Firefox (+ Developer Tools), Chrome (+ DevTools), W3Schools, w3resource, Stack Overflow, Animista

[jpzs444]

• Day 29 tweet
  • https://twitter.com/jpzs444/status/1431989635316477954
• Description
  • Reviewed the fundamentals of Git and GitHub. I will continue R and start JS DSA tomorrow.
• Resources you used:
  • GitHub Classroom

[jpzs444]

• Day 30 tweet
  • https://twitter.com/jpzs444/status/1432352276627132422
• Description
  • Learned how to use the functions of the "dplyr" package in manipulating and investigating datasets. I also found out that R's pipe operator (%>%) chains them w/o using variables. I just started FCC's JS course.
• Resources you used:
  • RStudio, YouTube, freeCodeCamp

[jpzs444]

• Day 31 tweet
  • https://twitter.com/jpzs444/status/1432677400739942408
• Description
  • Was introduced to the "ggplot2" package in R. I'm really fascinated by how graphs (e.g., line and bar) are generated from only a few (readable) lines of code. I made some progress on the FCC course.
• Resources you used:
  • RStudio, YouTube, freeCodeCamp

[jpzs444]

• Day 32 tweet
  • https://twitter.com/jpzs444/status/1433091823451344903
• Description
  • I'd been occupied with personal matters and academic requirements today, but I was still able to spend an hour to continue the freeCodeCamp course. I also thought of a profitable personal project during my break.
• Resources you used:
  • freeCodeCamp

[jpzs444]

• Day 33 tweet
  • https://twitter.com/jpzs444/status/1433464384831901699
• Description
  • Rest day. I took a break from coding to focus on my homework.

[jpzs444]

• Day 34 tweet
  • https://twitter.com/jpzs444/status/1433834706663993346
• Description
  • I only had about two hours to continue the freeCodeCamp course since there were multiple meetings today. I'm slowly getting used to the syntax of JS objects.
• Resources you used:
  • freeCodeCamp

[jpzs444]

• Day 35 tweet
  • https://twitter.com/jpzs444/status/1434172277579345922
• Description
  • Done with the basics of JS objects. Solving the Record Collection exercise was confusing, but it helped me identify my weaknesses in nested objects and arrays.
• Resources you used:
  • freeCodeCamp

[jpzs444]

• Day 36 tweet
  • https://twitter.com/jpzs444/status/1434502404804726784
• Description
  • Almost done with basic JS. I just have to look for other resources and exercises to better understand recursion.
• Resources you used:
  • freeCodeCamp

[jpzs444]

• Day 37 tweet
  • https://twitter.com/jpzs444/status/1434918248617693190
• Description
  • Rest day.