Skip to content

#100DaysOfCode - jpzs444 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jpzs444 opened this issue Aug 2, 2021 · 36 comments
Open

#100DaysOfCode - jpzs444 #7

jpzs444 opened this issue Aug 2, 2021 · 36 comments
Labels
#100DaysOfCode Progress

Comments

@jpzs444
Copy link
Member

jpzs444 commented Aug 2, 2021 •
edited
Loading

Share your progress and tweet link:

  • Day 1 tweet
  • 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 jpzs444 added the #100DaysOfCode Progress label Aug 2, 2021
@jpzs444
Copy link
Member Author

jpzs444 commented Aug 2, 2021

  • Day 2 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 3, 2021

  • Day 3 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 4, 2021

  • Day 4 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 5, 2021 •
edited
Loading

  • Day 5 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 6, 2021

  • Day 6 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 7, 2021

  • Day 7 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 8, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Aug 9, 2021

  • Day 9 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 10, 2021

  • Day 10 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 11, 2021

  • Day 11 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 12, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Aug 13, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Aug 14, 2021

  • Day 14 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 15, 2021

  • Day 15 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 16, 2021

  • Day 16 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 17, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Aug 18, 2021

  • Day 18 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 19, 2021

  • Day 19 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 20, 2021

  • Day 20 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 21, 2021

  • Day 21 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 22, 2021

  • Day 22 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 23, 2021

  • Day 23 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 24, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Aug 25, 2021

  • Day 25 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 26, 2021

  • Day 26 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 27, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Aug 28, 2021

  • Day 28 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 29, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Aug 30, 2021

  • Day 30 tweet
  • 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
Copy link
Member Author

jpzs444 commented Aug 31, 2021

  • Day 31 tweet
  • 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
Copy link
Member Author

jpzs444 commented Sep 1, 2021

  • Day 32 tweet
  • 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
Copy link
Member Author

jpzs444 commented Sep 2, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Sep 3, 2021

  • Day 34 tweet
  • 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
Copy link
Member Author

jpzs444 commented Sep 5, 2021

  • Day 35 tweet
  • 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
Copy link
Member Author

jpzs444 commented Sep 5, 2021

@jpzs444
Copy link
Member Author

jpzs444 commented Sep 6, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
#100DaysOfCode Progress
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jpzs444