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.
how do i make a mobile vertion of this website??
The way I like to do it is by doing mobile version first. This is called Mobile First Methodology and is a pretty popular way to do web design/development. If using a web browser like chrome, you can right click and inspect the page, then click the icon beside Elements labeled 'Toggle Device Toolbar'. From there you can select a device to mimic so you can see what the page looks like on that device. I select a mobile device and create the website according to design specifications.
Once you are done with the page on a mobile device, you can make the screen bigger and use media query breakpoints to make changes to the styling allowing you to make the page look good for bigger screens. I've always found it easier to do it this way than to go from a bigger view to a smaller view.
Feel free to ask me any questions!
Replicated it pretty accurately!
What challenges did you encounter, and how did you overcome them?Making it responsive was pretty challenging!
What specific areas of your project would you like help with?Once the viewport width is less than the default card width for a certain degree, the card starts to overflow on the left side. How do I solve this problem?
Hi Gina! Your project looks good! I looked at your page and I don't think that's an issue you have to worry about. I didn't notice that happening until I reached under 200 px with the responsive web tool. I don't think that there are any devices out there that are that small. If you are wanting to resolve it, I would just set a breakpoint for the size you notice it happening at so like:
@media only screen and (max-width: 200px) {}
And just set your font size to be a little smaller, I would think that would work. But once again, I really don't think it's anything that you need to be too concerned with
