Skip to content
OverviewSolutions
22
Comments
9
P
Qendresa Braha
@HiQendresa

All comments

  • amoeba25•50
    @amoeba25Submitted about 1 year ago

    My approach

    Picked up another easy looking challenge which did not have a lot of issues. I was going to use grid for this but realised midway that block level elements do the trick with good padding and margin rules. I still need to figure out how to margin and padding is going to work when we are switching view. For this one, I went from desktop to mobile instead of the other way around.

    Some questions and notes I had for the community:

    1. Is this approach feasible? I need to figure out how do people work with their margins and padding while designing things.
    2. I'll pick a bit more difficult next project to understand the usage of grid and get better at responsiveness in general.
    3. Need to figure out why my firefox dev console shows a different view compared to when I actually use my phone to see it.

    Responsive product page using GRID

    3
    Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hi @amoeba25. 👋

    Congratulation on finishing this challenge 🎉 . Remember, we all face challenges when learning something new, and you're doing great!

    I wanted to share a few tips that might make things a bit easier for you. 



    HTML Structure : 


    - Use Semantic Elements: Choose semantic HTML5 elements (like <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) to convey the meaning of different parts of your page. This improves accessibility and makes your code more readable.

    - Div as a Generic Container:

    • Use a <div> element instead of <section> if the purpose is simply to group content within a card component. <div> is a generic container that doesn't carry any specific semantic meaning, making it versatile for grouping elements.

    - Article or Div for Card Content:

    • If the content inside the card has a more independent or self-contained meaning, you might consider using an <article> or another <div> element for the card content.

    - Consider File Organization:

    • Separate Concerns:
      • If your project is expanding, consider separating your HTML, CSS, and JS into distinct directories. This separation makes it easier to locate and manage files as your project grows.
      • In your project repository are a lot of unneeded files! 


    - Flexbox Tips: 


    Start Simple: Begin with basic layouts to get a feel for how Flexbox works. A row or column layout is a great starting point.

    Master Flex Properties: Focus on understanding properties like flex-direction, justify-content, and align-items. These are the building blocks of Flexbox layouts. Flex Containers vs. Items: Clarify the difference between properties that apply to the container (display: flex;) and those that apply to the items within (flex-grow, flex-shrink, flex-basis).

    The more you use them, the more comfortable you'll become.

    Don't hesitate to use online resources like MDN Web Docs or CSS-Tricks for quick reference and examples.

    Also you can find the answers to your questions here:

    Creating squishy padding and margin that adapt to the viewport

    5 simple tips to making responsive layouts the easy way

    Learn flexbox the easy way

    Happy coding! 🚀

    1
  • voffee•70
    @voffeeSubmitted about 1 year ago

    Please give me feedback, I am really unsure about the mobile view.

    Any feedback about accessibility is also appreciated, I will try my best to fix those issues as I care about user experience for ALL kinds of users.

    I can accept harsh feedback.

    Thanks!

    • Voffee

    Statistics Preview Component

    1
    Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hi @voffee 👋

    Congratulation on finishing this challenge 🎉 You did very well 👏🏻

    I noticed you've been working with Flexbox and Grid CSS, and I wanted to share a few tips that might make things a bit easier for you. Remember, we all face challenges when learning something new, and you're doing great!

    Flexbox Tips: Start Simple: Begin with basic layouts to get a feel for how Flexbox works. A row or column layout is a great starting point.

    Master Flex Properties: Focus on understanding properties like flex-direction, justify-content, and align-items. These are the building blocks of Flexbox layouts.

    Flex Containers vs. Items: Clarify the difference between properties that apply to the container (display: flex;) and those that apply to the items within (flex-grow, flex-shrink, flex-basis). The more you use them, the more comfortable you'll become.

    Don't hesitate to use online resources like MDN Web Docs or CSS-Tricks for quick reference and examples.

    Here is one link of Kevin Powell, explaning the Flexbox and grid:

    link to learn flexbox

    Happy coding! 🚀

    1
  • Grunt395•40
    @Grunt395Submitted about 1 year ago

    I used Flexbox for the first time in this project and struggled to center the main content of the page. Is there a best way to center the content with or without Flexbox?

    This project involved a desktop and a mobile image included. I ended up displaying both images at the same time on the page, but would hide one of them using display: none; for the respective layout. Is there a better way to display either the desktop or mobile image without having to manually hide one of them?

    Product Preview Card with HTML and CSS

    4
    Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hi @Grunt395 👋

    Congratulation on finishing this challenge, you did great👏🏻

    CSS Flexbox is great tool used in web development to create responsive and flexible layouts. 🚀

    You can learn more about it in this link

    Here are some suggestions to help improve your code:

    • It is not a very good idea to apply styles directly to the <body> selector because it is straightforward. Styles applied to the <body> selector can impact the entire page, making it suitable for setting background colors, fonts, and other global design choices. In this case you have only one container but in cases where there are more components in the page you will need to be more selective.

    So the selector body should be more general like this e.g:

    body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; overflow-x: hidden; max-width: 1440px; position: relative; }

    • A crucial element is missing in your code, which should always be included, whether it's a component or a full website, it is the main element. Its presence is essential for maintaining good semantics and accessibility, as it assists in identifying the primary content of your site.

    • You can set the content inside the <main></main> and give a max-width to the container.

    <body> <main> <div class="container"></div> </main></body>

    • To center the content, there are a lot of ways to do that. .parent-container { display: flex; justify-content: center; align-items: center; } or you can use ** margin: 0 auto;*** another way is using position absolute to the container.

    Wish you good luck! Happy Coding 😊

    Marked as helpful
    1
  • KingMisach•20
    @KingMisachSubmitted about 1 year ago

    I had fun working on this page, had a chance to implement using bits of bootstrap. I found difficulties positioning the bootstrap buttons so i just decided to wrap them in divs and give them classes. I am still learning and any feedback will be highly appreciated,

    HTML,CSS and Bootstrap

    3
    Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hi @KingMisach

    Congratulation on finishing this challenge 👏🏻

    You can see the Bootstrap documentation here: https://getbootstrap.com/docs/5.3/getting-started/introduction/ or you can watch this tutorial: https://www.youtube.com/watch?v=-qfEOE4vtxE

    Another tip for you: I would suggest you to learn CSS Flexbox or CSS Grid. I found them very helpful to create responsive and flexible layouts.

    Here you can learn for both of them:

    1. https://css-tricks.com/snippets/css/complete-guide-grid/
    2. https://css-tricks.com/posters-for-css-flexbox-and-css-grid/
    3. https://www.youtube.com/watch?v=3elGSZSWTbM

    Happy Coding 😊

    Marked as helpful
    0
  • Zoriko81•20
    @Zoriko81Submitted about 1 year ago

    Don't hesitate to make some comment to my code, i would highly appreciate !

    I didn't understood why we have some hsl color value, but we need to ass transparency to it. So i guess we should use hsla, or is there any way to add alpha to existing hsl color ?

    And if you have any tip for json integration , it would be so nice. I search on the web, and don't know where to start for such a simple integration.

    And finally i managed to add white stuff in the blue box border, but i guess it isn"t the good way.

    As you can see, i need to to progress a lot, so, some review would be so helpfull to me !

    Results summary with flex + hsla

    1
    Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hi @Zoriko81

    Congratulation on finishing this challenge 👏🏻 You did great 🎉

    To add transparency to an HSL color, you should indeed use HSLA, which stands for HSL with Alpha.

    As for the JSON Data, I suggest you to start learning Javascript, using Javascript you will be able to fetch the data and manipulate with them.

    Here is a simple start on learning JavaScript Json: https://www.w3schools.com/js/js_json.asp also read the documentation here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

    Wish you luck on the other challenges!

    Happy Coding 🚀

    0
  • Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hi @DanyelleQuickster

    Congratulation on finishing this challenge 👏🏻 I hope you are having fun doing these challenges 😊

    I want to help you learn the Flexbox in a better way, so I am leaving you the link of a very helpful tutorial so you can improve you skills using flexbox! Here is the link: https://www.youtube.com/watch?v=u044iM9xsWU

    Happy Coding 🚀

    Marked as helpful
    0
  • Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hi @ShayonKundu congratulation on finishing this challenge 👏🏻

    Here is a tip for you: you can improve your work just by practicing it, challenging yourself everyday with new things.

    Also you can improve by watching others coding, go find online courses or youtuber that explains coding.

    Here are two links I think will be helpful to you:

    1. https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw
    2. https://www.youtube.com/watch?v=Nh0DpOlq2fY&list=PLJefabc5iiBPw0PiZsioWUKWLK3XhoAip

    Happy Coding 😊

    Marked as helpful
    1
  • Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hi, I hope you are having fun while doing these challenges 😊

    First congratulations on finishing this challenge you did so well 🎉

    As a tip I would suggest you to learn one of CSS Preprocessors 🚀

    Using CSS Preprocessors: CSS preprocessors like Sass and Less allow you to write more concise and organized code. They support variables, nesting, and functions, which can significantly reduce the amount of repetitive code. For example, you can define colors as variables and reuse them throughout your stylesheet, making it easier to maintain and update your styles.

    Here is a link of Kevin Powell where he explains tips for Sass https://www.youtube.com/watch?v=7b_q5NV4bUc

    Please continue watching all of his videos, he is one of my favorite youtuber and is very helpful.

    Happy Coding 😊

    Marked as helpful
    2
  • Qendresa Braha•350
    @HiQendresaPosted about 1 year ago

    Hello,

    Congratulations on completing the solution! It's looking great 👏🏻.

    I did notice that the image is missing thought 😅, and it seems like it might not be included in your project folder. You can add the image to your project folder and include the path to it!

    I appreciate your efforts, and I wish you the best of luck with your project.

    Thank you!

    Marked as helpful
    0