Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Dev Portfolio built with vanilla Js and scss

weixin 50

@twx0504

Desktop design screenshot for the Single-page developer portfolio coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone. Hope you guys are doing well! I have finally completed this challenge after two weeks of struggling. I believe this marks another milestone on my way to be the entry-level frontend developer and I must continue to work harder and conquer any challenges ahead.

What did you find difficult while building the project?

  • CSS I find making a website responsive across different screen size is very challenging. I built this project using mobile-first approach, but sometimes, I found my css is not working as expected. For example, I have faced a lot of alignment issues when I use position (relative and absolute), or overflowing issues, img is not resizing properly, horizontally scrollbar issues when elements is too large and exceed the width of container... There's so many issues but I just did a lot of trials and errors and overcame the obstacles.
  • Js I would like to ask community how do everyone write clean code. I found my code is repeating many times. If anyone is willing to share with me tips on how to write clean code, it is very much appreciated=)

Which areas of your code are you unsure of?

  1. CSS a. How to make a responsive font size according to screen size without using media query? b. Unsure of width, min-width, max-width things.
  • example 1: I would use the following css for img: width: 100%; max-width: xxxrem;
  • example 2: to set the min-width the body element can reach in media query width: 100%; min-width: 20rem;
  • I am not sure my use cases is correct, but I would like to hear from each of you regarding how do you put these property into practice.
  1. Js a. Are putting element into variable a good way to do? I find it convenient to store them into variables, before using them inside the "addEventListener" e.g., const projectGrid = document.querySelector('.js-projects__grid'); b. When defining a function, when do we need parameters? Sometimes, we can access the variables outside the function without passing them as argument during function call... c. how to write better conditionals?

Thank you=)

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord