Skip to content
OverviewSolutions
9
Comments
19
Leo
@Souicia

All comments

  • Jacob Seymour•50
    @JacwilalaseySubmitted about 2 years ago

    Second challenge completed! (sort of)

    I have 3 questions;

    • When resizing the screen down to mobile, the sub containers all spill over their content e.g. the text and buttons spill out the bottom, how do I manage this?

    • Also when resizing, the sub containers stack from a row, to two on top and one on bottom before going into a full column, how do I avoid this?

    • How to I get border-radius to work on only the 4 corners? each time I added it in, it would curve all 4 corners of each sub container.

    Thanks everyone! Jac

    Responsive 3 Column Card Component

    5
    Leo•440
    @SouiciaPosted about 2 years ago

    Hello Jacob,

    Congratulation on finishing this design.

    Because there was a lot of possible improvements to your original code, I forked your entire project (which created a repository of your project onto my account), here's the link: https://github.com/Souicia/3-col-car-component-improvement

    Now to answer your specific questions. While @AtulKumar0001 answered correctly on the third question and with good details, I will explain the two first.

    The simplest answer to first question is to simply use height: auto on your .container-sub. This will automatically fit all the content inside the container.

    The answer to your second question is to avoid flex-wrap. Flex-wrap will make the containers jump to a new line if the space of the parent container becomes too small for all of them to fit.

    For the third question, read Atul answer.

    For more improvements, check my fork of your project and compare my code with yours. If you have any questions, please feel free to reply to this message.

    I wish you a great day :)

    Marked as helpful
    2
  • Leo•440
    @SouiciaPosted about 2 years ago

    Hello Jean Claude,

    Congratulation on finishing the calculator app. That's a pretty amazing feat! And everything works as intended and is comfortable to use.

    I just found few ways to possibly make it better. Maybe use cursor: pointer on the buttons of the calculator. And concerning the calculator screen, you could add overflow-y: scroll so that when someone like me write 3 lines of calculations, we can scroll back up to look at the numbers. Also customizing the scrollbar that will appear may be a good idea as the default one is pretty huge. For a challenge (and if possible (I declare challenges of my own, when I can't even make this challenge :D)) the scrollbar could have different colors based on the theme you choose. One last thing, when I write 999999.....999 on your calculator, it feels like there is no padding-left and the number does not break line. So, I can't count how many digits :D.

    Anyway, congratulation again! And have a great day :)

    Marked as helpful
    0
  • Alberto Mtz•20
    @Eltunas170Submitted about 2 years ago

    1.- Do you think it is necessary to be practicing tools like Tailwind/Botstrap or continue using only css for the following challenges?

    2.- What html tags would you say are necessary for good SEO practices?

    3.- Is the MediaQuery better to put in its own css page?

    Thank you for all the feedback and comments you can give me. :D

    Product preview card component - HTML, CSS

    2
    Leo•440
    @SouiciaPosted about 2 years ago

    Hello Alberto,

    Congratulation on finishing your first design, it looks quiet neat and responsive.

    1. It entirely depends on your CSS skills. Before exploring CSS frameworks (Tailwind/Bootstrap) you need to have solid CSS skills. This will help you understand those frameworks much better and faster. If you have solid CSS skills (completing junior CSS challenge would be a great test), then sure, you can start by completing easier challenge using those frameworks.

    2. The most important tags for SEO are header, nav, main, section, footer, aside, and maybe article. I am sure there are plenty of more tags and tricks to know (which I don't), but those would be a good start. For instance, your second part with the writing on your challenge could be a section instead of a div. Using header tags are also recommended, and you did that with your h1.

    3. Media queries always need to be below and in the same file as the classes you are targeting. Otherwise, they won't apply. They are two ways to write media queries, either a long one with everything you want to change, or one for each section of your website. What you choose to adopt does not really matter, but if you want my grain of salt, I find that for smaller challenges I prefer a long one, and when you have many sections spread through multiple files (for instance: one file for header, one for main, and one for footer), I find many media queries are more readable than one huge one.

    Congrats again your first challenge, have a great day! :)

    Marked as helpful
    2
  • Kaman Diwash Shrestha•20
    @KamanDShresthaSubmitted about 2 years ago

    Regarding the responsiveness, how much is my solution responsive? How can I learn to build a better responsive webpages and web applications? Are there any resources that could help me learn that?

    Also, how could I make my code better ? Is the way that I use the div tags correct? What's the proper usage of div tags in real-world applications?

    QR code using HTML and CSS flex

    3
    Leo•440
    @SouiciaPosted about 2 years ago

    Hello Kaman,

    Congratulation on finishing your first design!

    While this challenge can't make full use of CSS responsiveness, the fact that your design stays in the middle of the page when resizing proves that it does have the necessary responsiveness. So congratulation on that!

    To learn about CSS (responsiveness, media queries and later on, animation and the rest), they are a lot of resources on YouTube! FreeCodeCamp just released a full CSS tutorial of 11 hours! https://www.youtube.com/watch?v=OXGznpKZ_sA&t=1s&ab_channel=freeCodeCamp.org You can only watch the part you want to learn about, but you can't learn and review too much CSS haha! If you are more interested in smaller tutorials, you can check Kevin Powell, Web Dev Simplified, and others on YouTube that make smaller, more topic focused tutorials.

    Other than that, the CSS is pretty spot-on. The HTML could use a better tag usage however. You will want to use the main tag over the main part of your website, so it should be <main class="mainContent">...</main> and use a <h1> tag for your main title. Then, I also invite you to learn about the following tags: <header>, <nav>, <section>, <aside>, and some more. Following some project tutorials on YouTube should help you with those.

    If you have any questions, please reply me, otherwise I wish you a great day! :)

    1
  • Leonel•160
    @leonellv94Submitted about 2 years ago

    What did you find difficult while building the project?

    I got a lot of trouble making the screen size and it's conversation, and had to use a bit of margin to put them where they should be, i'd appreciate any feedback on that.

    HTM, CSS, CSS Grid, Flexbox

    1
    Leo•440
    @SouiciaPosted about 2 years ago

    Hello Leonel,

    Congratulation on finishing the design.

    You have quiet a few problems with the design. It's not responsive, and it's not adapted to any screen sizes, but potentially the one you coded on. Now, how to remedy that? I strongly invite you to learn about responsive CSS, which is what makes CSS come alive. There are plenty, plenty, plenty of amazing CSS tutorials on YouTube, in fact, the beautiful, and amazing FreeCodeCamp just released one yesterday: https://www.youtube.com/watch?v=OXGznpKZ_sA&ab_channel=freeCodeCamp.org. It's 11 hours long, but after that! After that! Calling you the king of CSS would be an understatement. Now some pointers to help you: do not redeclare the width of the body, otherwise you'll make the body static, which is definitely not what you want. In the body, declare margin: 0. This will avoid those spaces around your design. Use width: 100%, and then set your min and max width. That's your first lesson in responsive design. Declaring width 100% is important, because then the children of that div, will know what size to be if you use % on their widths, which will make the children responsive too. Learn about media queries as well. This will make your design change depending on screen sizes.

    All in all, your design is good, however, there are many improvement points, which I invite to work on after you learn responsive designs, % usage, media queries, and plenty more goodies. Have a great day! :)

    Marked as helpful
    1
  • Leo•440
    @SouiciaPosted about 2 years ago

    Hello Stalin,

    Congratulations on completing this challenge! It looks really great and is responsive.

    There are some parts that could be slightly improved. First of all, you could have declared font-family 'Inter' in the :root pseudo, that would have made your CSS DRYer. If you need to change font-family further down the line, just redeclare font-family with another one on the class. Also, I think you should have customized your information container with a display flex, that would have enabled you to use the gap property and remove the amount of margins you declare. Continuing on that, you could have used margin: 0 auto to center the div, calc function on width to give it padding on the side. That would have enable you to delete your paddings on the children. Another thing, if there is only 2 elements within a div, for instance your information-container and the picture container within your main, I would use flexbox, not grid. Then you can just change the way elements are displayed with flex-direction, I believe it makes it easier. Last point, you may want to play with min and max width, to make it a bit more responsive to screen sizes, but that's just a bonus.

    All in all, your solution is concise, nicely written and works well, so once more, congratulation! Have a great day! :)

    Marked as helpful
    0
  • Mandar Gade•10
    @mandargade001Submitted over 2 years ago

    how to get the product images fixed on the left side? also could not get the rounded corners on one side?

    I am unsure about the images part rest is doable.

    how to make the design responsive for multiple devices?

    where to start first when you are designing something?

    Responsive product card challenge

    1
    Leo•440
    @SouiciaPosted over 2 years ago

    Hello Mandar,

    Even though, there are many problems, congratulation on finishing your first challenge, we all start somewhere.

    Now, I won't go through everything, but rather, I'll give you a good path to start completing those challenges correctly.

    First of all, you definitely need to learn display: flex, and display: grid. Those are more than crucial to web development, and are probably used in 100% of website. So, head over to YouTube and learn those well and how to implement them efficiently. You can learn from Kevin Powell, Web Dev Simplified, or even from full HTML/CSS tutorial with projects. All those are useful.

    For rounded corners, when you have an image, and a container, you need to apply border-radius on both of those elements, so both of them have rounded corners with the same value.

    To make responsive design to multiple devices, you need to learn about media queries: @media. Same story, head over to YouTube and learn those.

    When you start challenges like this, at least for me, I look at the main-container first, and organize the layout. So for this challenge, there is one main-container, and that container is divided in two parts, the image, and the information. Then I would decide which type of display to use, for this one I used grid. Then, I would look at the sub-containers, mostly for the information, and how to structure them to fit the design. For this challenge, for the information, I put all the information in a container with display: flex and styled it to the design. Anyway, to first start a challenge, you need to know how to break it apart, and then analyze what CSS properties you would need to reassemble it. It sounds hard, but with experience and those simplified design, a quick glance and you can know what you will use.

    I hope you understood what I explained, if not, please write a reply, otherwise, I wish you a great day:).

    Marked as helpful
    2
  • Alexander Morse•610
    @SakeranSubmitted over 2 years ago

    This project hurt. It took me two months of development time and two different frontend stacks to complete, running into countless roadblocks, false starts, and mis-implementations the whole way through. The README in the source elaborates more on what problems I ended up facing and how I solved (or failed to solve) them.

    Memory Game with Svelte, TailwindCSS

    1
    Leo•440
    @SouiciaPosted over 2 years ago

    Hello Alexander,

    I am not here to help you elaborate on this project, cause that's waaaayyy beyond me. Just learned localStorage on JS yesterday, and have problems with that, so yeah :D.

    But I wanted to congratulate you on this project. Your final design looks amazing, the transitions are smooth, and your website is beautiful. I farmed some 4x4 grid cause it is pretty fun to play and run smoothly :D.

    Anyway, keep up on making such challenge successful, it inspires the community and newbies like me to thrive forward. Have a great day :)

    1
  • Leo•440
    @SouiciaPosted over 2 years ago

    Hello Joao (sorry for missing accent on the A),

    First of all, congratulation on finishing the design.

    Instead of using border around the profile image, use padding, and then set background-color to white. This will avoid small gaps between border and image that show the background color.

    Another thing, if you wrote profile > * {background-color: white), you do need to declare the same background-color in the .bottom-half class. Also, you forgot to add a small opacity to the <hr> tag to follow the design, but that's just small details, or you can use hsla for color to set opacity as well.

    Have a great day :)

    Marked as helpful
    0
  • Leo•440
    @SouiciaPosted over 2 years ago

    Hello David,

    Congratulation on finishing the design, you did great! However, there are improvement parts.

    First of all, to center your <div class="card">, while using margin: x auto; would work, it is not the best solution. Most often you would see margin: 0 auto, but that's to center horizontally. If you want to center both horizontally and vertically you can use position: fixed; top: 50%, left: 50%; transform: translate(-50%, -50%). Now the position fixed is a good trick, but on an actual website, it would be annoying, as it would make the entire design fixed to the screen, those on a scrollable website it won't look good. So, I invite you to practice with position: relative instead and change the second value of the translate property to positive and give it the value you want.

    For your <div class="order"> I commend you for using flexbox, which was the correct way, however you wasted the strong potential of flexbox by using position absolute on the tags inside the order div. To get the design layout, delete all the positions and instead of justify-content: center on the order div, use justify-content: space-around. Then, wrap the <p class="order_plan"> and the <p class="order_price"> inside a div. Then style the newly created div and the image with a margin-left. Also, you can use line-height on the created div, to make the plan and price a bit further apart.

    Some more tips: Have a consistent way to name your div's classes, using both underscores, and (-) <-- this symbol (no clue how to call it), is not a good practice, the most common way, I think is to join words with -, so order-plan, order-price.

    Use the tag <main> on your main part of your website, so for card class, use <main class="card">. On big websites, it helps with readability and organization. You can also use nav tag for headers, and section tag for sections, though in this challenge, you do not need those.

    If you don't understand something, feel free to reply me, otherwise, have a great day :)

    Marked as helpful
    1
  • Antony Saka•10
    @TonySakaSubmitted over 2 years ago

    I found it difficult to keep a bold font on the name of the perfume and the price tag. When I added the font weight it would change and then go back to normal. meaning my reference style is over-ridden I guess I just can't seem to figure it out even after tweaking with it. Not sure if the font links could be a factor.

    Product preview page using html/css

    1
    Leo•440
    @SouiciaPosted over 2 years ago

    Hello Antony,

    Your font-weights were not applied, because you did not use google fonts properly. In the style-guide.ms, there are links to the correct font-family, and the weights are written just below. Once in the google font website, you need to select the correct style to apply and then link them or import them. So for Montserrat, you need 500, and 700, so select those two styles and import them onto your project. Then, use the CSS rules to specify the family code, which is given on the website right under the link or import box, and use this code to declare the font-family, not your own code. Then you will be able to change the font-weights.

    I hope I helped you, if you don't understand something, please reply me. Otherwise, have a good day :).

    0
  • Brian Schooler•440
    @superschoolerSubmitted over 2 years ago

    I couldn't get the small white edge around the border under the guy's head to go away. Any suggestions?

    Profile Card Component

    2
    Leo•440
    @SouiciaPosted over 2 years ago

    Hello Brian,

    Congratulation on finishing the design!

    I did not find the white edge you mentioned in your question, however, talking about the profile picture, because you used border around the image, if we resize the screen, we can see some of the background color in between the border and the image. To avoid this, you can remove the border, and add padding instead. Just add padding 4px, or use em as you did in your code, and set the background-color to white. That should solve the problem.

    Another thing, do not use <hr>, we can see a small overflow on the right of the main-container, due to hr overflowing. Maybe if you hide overflow on the container, that may solve it. Another solution would be instead of hr, use a div, and give the attributes of border: 1px solid color, width: 100%, and use some margin-top. Also, use opacity on the border to follow the challenge design to make the border less dark.

    If I did not mention the problem you add, feel free to reply to this message, and tell me more precisely which problem you want to solve. I may be able to help you ^.^. Otherwise, have a good day :)

    Marked as helpful
    0