Hi, I'm a full-stack developer with 3 years of experience in JavaScript/TypeScript, React, Angular, Node.js, and Python. I love building both web apps and physical projects. I'm dedicated to choosing the best tools for each job, constantly learning, and delivering high-quality, effective solutions.
I feel like I wrote a lot of code with this project, I'm sure a lot more than necessary. I have plans to go back and heavily refactor my code as best as I can to adhere to better standards. There is a lot in here that is repeated, so centralizing certain pages/components/styling to cut down on project size is in the plans.
There isn't anything that I really need help with, but if you have any suggestions or ideas then feel free to leave a comment!
Most proud of Javascript, especially adding validation and calculations
What challenges did you encounter, and how did you overcome them?Validating inputs
What specific areas of your project would you like help with?Semantic html and refactoring JavaScript
You are on the right path. It's mobile responsive, which is good.
You just need to go in and make some styling edits to better match the design. Things that should be changed just from glancing:
grid-template-columns: repeat(3, 1fr);.
What challenges did you encounter, and how did you overcome them?Javascript codes...
What specific areas of your project would you like help with?.
Good work! I would just remove the huge block of commented out code that you left in there from when you hard-coded the values
This looks great! you did a great job making everything pretty much picture perfect. I would make a couple of edits to the tablet view at 768px but there was no design for that so I did that part last as well. Keep up the good work!
Hi Savvas, your project looks good! A couple things I noticed:
I noticed that you used the svg icons as img tags which is the same way I did it. As I'm sure you noticed, if you do that then there is no way to change the fill color to be white for the arrow icon svg. I found a way that worked for me in changing the color. You can apply a filter to the img tag and achieve the color change that way. So it would look something like this:
.icon {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(224deg) brightness(200%) contrast(102%);
}
I would also suggest creating a separate document for you css styles, just to keep things decluttered as you get into projects with more content.
Keep up the good work!
My first javascript project on front end mentor. pretty happy with how it came out and better understanding the interactions between HTML CSS and javascript
What challenges did you encounter, and how did you overcome them?The biggest challenges were getting the footer to change when a user clicked the button. I just wasn't sure what the best way to do this was, and I'm curious about other solutions.
What specific areas of your project would you like help with?I would like help with how to better do the styling for the share-links for both mobile and desktop.
I think your project looks great. I don't really have too much to say about it. One thing I will note, if you want to clean up your html a little bit, you can have the svgs themselves all saved separately and then you can access them through img tags by referencing them in the src. It makes changing the fill color a little more cumbersome, but it's not too bad.
Keep up the good work!
I'm proud that I made my product preview card look good on different screen sizes. Next time, I want to take on more challenging designs that work well on any device.
What challenges did you encounter, and how did you overcome them?I faced challenges in ensuring my product preview card looked good across all screen sizes. Using CSS Flexbox and media queries, I structured the layout flexibly and applied specific styles for different screens, achieving a responsive design.
Hi Abdullah, your project looks good. Frontend Mentor is making me leave feedback here as part of the learning path but I don't really have any feedback to give, everything looks pretty good to me. Only thing I noticed was that you used a lot of hard-coded px values for sizing of things, this is fine for something small like this but I would ideally in the future use % or vw units for box/container sizing as that makes it a bit more responsive without having to do extra work like playing around with and setting the specific pixel size everywhere.
