Skip to content
OverviewSolutions
22
Comments
9
P

Qendresa Braha

@HiQendresaKosovo350 points

Web Developer

Latest solutions

View more solutions

Latest comments

  • P
    Qendresa Braha•350
    @HiQendresa

    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! 🚀

  • P
    Qendresa Braha•350
    @HiQendresa

    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! 🚀

  • P
    Qendresa Braha•350
    @HiQendresa

    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
  • P
    Qendresa Braha•350
    @HiQendresa

    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
  • P
    Qendresa Braha•350
    @HiQendresa

    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 🚀

  • P
    Qendresa Braha•350
    @HiQendresa

    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
View more comments