I am a freelance web developer currently living between Birmingham, UK and Warsaw, Poland. I am always open to connect and to collaborate. Just drop me a message on any of the socials 👋
I’m currently learning...Currently just practicing building larger and more complex applications using React.js, Next.js, and TailwindCSS.
If anyone has experience or some words of wisdom for dealing with these kinds of pages where a lot of the layout consists of images then I'd love to hear from you.
Thank you all 😁
i am most proud of my javascript, it was difficult while writing the reload cart function but i was able to get it right.
What challenges did you encounter, and how did you overcome them?i was unable to write certain funtion, including the hover effect in the nav bar
Hi, great work with this project.
Just a few pointers:
I'd recommend representing the product as an array of objects rather than nested objects. This is because a typical API will use this pattern.
Rather than this
const products = { 1: { name: "Fall Limited Edition Sneakers", price: 125.0, image: "images/image-product-1.jpg", }, };
Like this
const products = [ { id: 1, name: "Fall Limited Edition Sneakers", price: 125.0, image: "images/image-product-1.jpg", } ];
You'll have an easier time searching and filtering this way in the future.
When you click the "Add to cart" button, only 1 product is added to the cart regardless of how many are selected using the above selector.
I've gone into your source code and got to the bottom of it. You're incrementing the quantity by 1 in the addToCart method. To fix this try:
function addToCart(key) { if (listCards[key] == null) { listCards[key] = { ...products[key], quantity: +quantityElement.textContent, }; } else { listCards[key].quantity += +quantityElement.textContent; } }
Hope this helps. Keep up the good work ☺️
I'd like some help with the theme switcher for the data in the Dashboard the first data stays as the light version and I don't know how to fix that.
Hi 👋
I've taken a look at your source code and narrowed it down.
The reason this weird behaviour is happening with the first element not changing colour in dark mode is to do with how you are using CSS selectors in your SASS.
Right now you have the following selector for selecting each of the cards individually in dark mode:
.fb-resume-data + .dark-cards-resume, .twitter-resume-data + .dark-cards-resume, .ig-resume-data + .dark-cards-resume { background-color: var(--Dark-Desaturated-Blue-card-bg); }
However, the + operator does not select an element which has both the class preceeding the + operator and that following the operator. Rather, this is the adjacent sibling selector. A more general example is:
a + b selects element b if and only if it is the immediate sibling that directly follows element a. It won't select any other b elements that are not directly preceded by a. In your case, this means all elements except the first are selected, because the first is not preceeded by any sibling.
Hope this makes sense, these selectors can be quite confusing.
To select an element that has both classes, you just need to concatenate the classes in the selector:
.fb-resume-data.dark-cards-resume, .twitter-resume-data.dark-cards-resume, .ig-resume-data.dark-cards-resume { background-color: var(--Dark-Desaturated-Blue-card-bg); }
Otherwise great work! Happy coding 😁
Hey, guess what? I just successfully tossed in some JavaScript for the first time! 😂 It looks like I've stumbled upon a new talent. Better start cranking out more JS projects, 'cause apparently, that's where my hidden genius lies! 🚀
What challenges did you encounter, and how did you overcome them?So, picture this: the first two hours of me diving into the wild world of JavaScript code hunting. Yeah, I know, pretty lame, right? But hey, gotta start somewhere! 😅
What specific areas of your project would you like help with?Sure thing! I'm open to suggestions, even if they're as welcome as a pineapple pizza at an Italian family reunion! 🍍🍕 But hey, variety is the spice of life, right?
Hi 👋
Great work with this project. It looks really great 😊
Just thought I'd share a slice of pineapple pizza 🍕😁
To improve the user experience you could introduce a expand/collapse animation on the toggles to remove this layout shift. You can refer to this codepen I've made if you're interested in how to do that!
Hope this helps! Keep up the good work 😁
The highlight of this project is using flexbox and minimal media query to make the page responsive. I designed for desktop first because the task looked a bit complex at the beginning.
What challenges did you encounter, and how did you overcome them?The biggest challenge was aligning the two middle vertical cards. It was dicey to manage because I kept them in a different container from the two cards on the side.
What specific areas of your project would you like help with?I would appreciate comments on any part of this project.
Hi 👋
Great work on this project!
It really looks great at both mobile and desktop layouts 😁
The main issue I see is with larger viewports. I think it would make sense to talk about the width and height of the cards separately.
Width:
Right now you are using a vw-based flex-basis to determine the width of the columns in your flex container. This is fine for standard viewports, but with wider viewports the cards grow indefinitely, leading to lots of empty space within the card. I would recommend adding a max-width with a fixed pixel value to each of the cards to stop this behaviour.
.card { flex-basis: 20vw; max-width: 300px; }
Height:
Something similar is happening with the height becase of the vh-based value for height. Although the problem is the same, the solution is not. generally, it is best practice to not apply a fixed-value height, because it can lead to content overflow, especially when our containers have dynamic content.
CSS is responsive by default and will determine the correct height for your component based on the size of the content, as well as padding, border etc, depending on the box-sizing property you use.
I would recommend to leave the default height: auto on your cards and use a padding-bottom to add the desired whitespace below the content.
Hope this helps! 😁
The challenges I encountered is how i should center my elements, and also how to make the qr responsive.
What specific areas of your project would you like help with?I would like to know if there is a better way to make the qr more responsive
Hi 👋
Great work with this component.
I can make a few comments regarding responsivity.
I'd recommend changing the way you're thinking about defining the width in the desktop view. From what I understand you're deciding on how you want the component to look at full width, which is approximately 15vw.
The problem with this is that at smaller viewports (approx width: 450px) the component ends up with a width of around 100px which really is too small.
You'd be better to use a much wider width for the component, let's say 90% and then add a max-width with a fixed-value for the larger screen size. That way you'll have a more appropriate width across a range of viewport widths.
.qrwrapper { width: 90%; max-width: 300px; }
Thanks
Hello, Frontend Mentor community 🙋♂️.
This is my solution ✅ for the Social Links Profile
This was a fun project, and I am thinking to include it in my future projects. I am currently working on my Frontend Developer Portfolio, So this gave me a good idea about some of the things that I want to add.
I had some trouble with resizing the image. So I would appreciate it if I get a feedback on that.
Follow me in my journey to finish all Free 🆓 and Free + challenges (61 left 🎯)! Gotta Catch ’Em All
That's all.
Have Fun Coding!
What specific areas of your project would you like help with?I would like help with the use of images in flexbox.
How should we define an image size in a flexbox, along with flexbox width.
Hi 👋
Great work with this!
I've cloned your repository and played around with the code a little. You're approach to styling the image and creating the layout is mostly just fine in my opinion.
Just a couple of minor points:
The <div> around the profile picture is kind of unnecessary. Wrapping the image and then adding a border-radius to the container leads to you needing to apply overflow: hidden on the container. You could actually remove this container and just apply the border-radius directly to the <img> element. That way you don't have to worry about overflow.
You're having some problems with the layout of the image because you are combining both fixed-value width and height with transform: scale() to define the size of the image. width and height are part of the box-model, and therefore inform the rest of the document where elements should be placed. transform: scale() is not. That means when you increase the size with the transform: scale() function, the image becomes bigger, but the space allocated for it does not increase. I'd recommend just using width and height exclusively and then adding a margin-bottom to the image to create space below.
Hope this helps 😁
