Frontend Mentor | Kallyne Layane's profile

All comments

@pettikSubmitted 8 months ago

What are you most proud of, and what would you do differently next time?

I am most proud of: Successfully incorporating the ::before pseudo-element to position an image as a background in the template, which allowed me to fine-tune spacing and page dimensions.

What I would do differently next time: For future projects, I plan to explore using Tailwind CSS, a utility-first CSS framework that I'm currently learning. It offers streamlined styling and responsive design capabilities, which could enhance my development process.

What challenges did you encounter, and how did you overcome them?

When styling individual list items, I was unsure whether to style the `list-item` itself or the link inside the list-item element. Ultimately, I focused more on styling the `` link element, while keeping the list-item formatting consistent at the Unordered HTML List level.

What specific areas of your project would you like help with?

If I have chosen the correct naming of element classes and also whether the styling corresponds to the requirements.

pettik--social-links-profile

Kallyne Layane•70

@jsklcodesPosted 8 months ago

Hi, @pettik! 🙋‍♀️ Great job on your solution and the overall organization of the code!

I have a couple of suggestions for improvement:

While the naming of your classes is generally good, there's a minor inconsistency. In some classes, you've used a single underscore instead of the double underscore convention, like card_list instead of card__list. Double-check your class names to ensure they consistently adhere to the methodology you're using.
I noticed that you've defined <main class="card"></main>. It's worth noting that using the <main> tag with a class of "card" isn't recommended. Even though this project might only involve a card, the <main> tag should serve as a semantic wrapper for the main content of the page. If you were to add other cards or sections to the page, having multiple <main> tags wouldn't be appropriate, as they should only be used once per page.

Your CSS is well-structured, utilizing rems and custom properties, which is excellent! However, I have a couple of minor suggestions regarding your CSS file:

As this code doesn't require media queries to work properly, it's good practice to try to solve it without them. This can help you develop your skills and understand CSS better.
I noticed that you've used fixed width sizes for the card, which isn't recommended. Even if you were to use media queries and set fixed widths for different breakpoints, this approach could lead to potential issues. Instead, consider using a combination of width, max-width, and relative units to create a more flexible layout, eliminating the need for fixed sizes and media queries instead.

Have fun learning coding! ✨

Monika K•200

@Monika-2509Submitted 8 months ago

What are you most proud of, and what would you do differently next time?

With each creation, I find pride in my craftsmanship, a testament to dedication and creativity.

What challenges did you encounter, and how did you overcome them?

Nonetheless

What specific areas of your project would you like help with?

Mediaqueries

Blog-Preview-Card

Kallyne Layane•70

@jsklcodesPosted 8 months ago

Hello, Monika! Your solution is good in terms of layout. Well done! ✨😉 But there are a few improvements that could make it much better.

I noticed that you're using pixels to define your measurements, including to set the card size. This causes problems in terms of responsiveness, so prefer to use relative measures (%, rem, em, vh, vw), which will adapt. Make sure that whatever unit you use, you're using it in the right context and that it doesn't cause any issues.
I also noticed that your solution is a bit smaller than the design, some fonts are smaller or larger, the size of the box is a bit blurry and there's no border radius in the image. Not that these differences are crucial, you don't need to try to achieve pixel perfect or anything, as the main goal here is to improve the fundamentals. But it's a good opportunity to practice and hone your skills, not least because in a real project you'll have to follow the specifications of a design. Have you inspected the project file? If not, I suggest you take a look and check how the designer has spaced the layout, sized the font and other details.
On the HTML, I have two observations:

You have a container class to basically style the card, which is not very clear as there is no mention in the HTML that this snippet represents a card. When there is no semantic tag to represent something, express it with a descriptive class. In this situation, it could be something like <div class="card"></div> or <div class="preview-card"></div>. Use container to limit the width, handle with layout stuff.
Your code is a bit messy when it comes to indentation (as well as CSS). I suggest you install the Prettier extension (there is for several editors), which has several formatting options for you to configure, and it's simple, with a shortcut you have your code formatted. Also, many editors have their own formatter, just look for the keyboard shortcuts to find out how to format your code.

One more thing: you don't need media queries for this challenge. But if that's a problem for you, and also about responsiveness in general, I have a recommendation: Kevin Powell's free course Conquering Responsive Layouts, which covers how the browser deals with responsiveness issues, relative units, media queries, flexbox and also has practical mini-challenges to learn about it.

Have a good coding journey! 🙋‍♀️

Marked as helpful

Linda Jensen•80

@lindajensenSubmitted 8 months ago

What are you most proud of, and what would you do differently next time?

This might sound silly, but i think the thing I'm most proud of is that I didn't give up. I've been in a place for a few weeks where things have been kind of hard and I don't get a lot of enjoyment out of anything. But I keep coding and I'm not giving up. When it comes to the actual code I think what I'm most proud of is centering a div (is that embarrassing?). I'm new to coding and I never seem to be able to figure that out without ChatGPT, but not this time. I figured it out by myself (there was some Googling involved).

I'm not sure if I was suppose to use media queries in this, but it didn't seem like it was needed. But if I was to redo it I'd probably pay more attention to that.

What challenges did you encounter, and how did you overcome them?

Centering a div. But I did not take the easy way out and ChatGPT'd it. Not that there's anything wrong with that, but for me what I've noticed is that when I just AI something it doesn't seem to stick. And I'm new to this so I need to find other solutions as well. I want to really learn this and so I can't just take the easy way out as soon as I get frustrated.

What specific areas of your project would you like help with?

I need help with how I get the padding (you know the white frame around the qr-code and text) even all the way around? I just couldn't figure it out. But then again, me and padding needs to get better acquainted with each other. So maybe you could help a gal out.
I also really want the question "Was I suppose to use media queries in this challenge?" answered. Because the site worked fine until around 318px in width so I'm thinking no. But what's your opinion?

QR Code Component using CSS Custom Properties

Kallyne Layane•70

@jsklcodesPosted 8 months ago

🙋‍♀️ Hi Linda! Based on your code and your problems with this challenge, I have a few suggestions for you:

The padding of the card should be the same at the top and sides, which will leave the frame around the image. It should be slightly larger at the bottom. The padding property is an abbreviation, you can define each of these spacings with a single padding property. So: padding: top right bottom left;. That's enough to solve your problem, but if you want to understand more about it, I suggest you read about how it works and the syntax of paddings in MDN.
It's not necessary to use media queries in this challenge; there are ways to make the width of an element responsive without using them, which is the case here. I recommend you take a look at width and max-width, which can be used together to do this.

✨ You can make some small improvements:

The title of the card should be a bit bigger, 22px.
I recommend you remove the attribution from your solution, as this will affect the alignment and comparison with the design. Leave an attribution in the README of the project.
There are some spacing differences compared to the design; resolving them will bring your solution closer. Did you consult the design in Figma or Sketch?
In the design, the card dimensions are 320x497, but you don't need to set fixed sizes to get this result. As you add the necessary spacing, it will be adjusted. Remember that the width can be obtained with what I said above (point 2).

📌 An extra tip: Try to use relative measurements, such as rem and em, rather than fixed ones, such as px. This will ensure a much more responsive solution and avoid some problems.

I'll also leave you with a great recommendation, which will help with basically everything I've talked about. Kevin Powell's Conquering Responsive Layouts free course, which focuses on responsiveness, how to use the right measures, how the browser handles it all. He breaks it down into 21 days, enough to be able to create responsive interfaces and understand how it works, bringing practical challenges to the concepts. It also covers media queries and Flexbox, as well as suggesting extra resources on the concepts.

If you need any more help, just let me know. Have a good learning!

Marked as helpful