Skip to content
OverviewSolutions
5
Comments
4
jotaprojects
@jotaprojects

All comments

  • Hillary Nyakundi•10
    @HillaryNyakundi
    What are you most proud of, and what would you do differently next time?

    I honed my design skills using css and HTML, It was fun designing a card, I learnt new tricks, I would plan better next time before execution and building.

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

    I faced challenges in designing the card for small (mobile) devices. I didn't overcome them in this project but maybe in the next project I will be able to solve them.

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

    I would like help in designing the card for small(mobile devices).

    QR code component

    #materialize-css
    1
    jotaprojects•100
    @jotaprojects

    Nice work!

    I got some tips for you. You can let the body element (with flex-box) center the card element instead of using position: absolute;. But there are always multiple ways of centering an element.

    I would also think about the image here. From what I saw you can remove the hard coded height and width and set only one max-width: 100%; on the image tag. I also removed height and max-width on the card element. This I would do to make it work with the content instead of follow the design.

    For me images are tricky to get responsive. I hope you test and try out!

  • PavvelD•40
    @PavvelD
    What specific areas of your project would you like help with?

    I would like to ask for help with my Javascript solution. I have done listening on "click" and "keydown" to show the answers. I made switching between questions with "ArrowDown" and "ArrowUp", and opening the answer with "Enter". I also added a border to the current question selected with the key. When I switch only in one direction everything is OK, but if I want to change the direction of switching, the first step goes in the opposite direction than it should, then it is OK.

    Please advise me what I could improve in my code, information on what I have done wrong. Thanks!

    FAQ according main

    1
    jotaprojects•100
    @jotaprojects

    I think you did really good job here. Giving the user a visual indicator what questions is active.

    From what I see the top image is not fully responsive. It stops on larger screens. i think you can use some background-size: contain; magic. Try it out and see what you get.

    For the JavaScript you can think of not dublicate code, the so called DRY, Don't Repeat Yourself. But I would focus on getting things to work before refactor.

    Keep up the good work!

  • Harsh Kumar Dwivedi•720
    @Harsh-Kumar-Dwivedi
    What are you most proud of, and what would you do differently next time?

    I am proud that I was able to build responsive webpage which is super close to the target design. From next time, I would take care of time invested in development properly because lack of a proper blueprint of development of given webpages consumes a lot of time, will try to build faster from next projects by following a structured plan.

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

    I encountered the challenge of building responsive design but was able to tackle it well with the help of Flexbox, Media Queries and Relative Measurement Units.

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

    Would love to know solutions to following problem:-

    How can I change src attribute value in `` element using only HTML & CSS for the purpose of displaying different images on different kinds of devices after giving it value once?

    Checkout my solution ! Feedbacks are welcome ! Stay Happy & Well ! Thanks !

    Responsive Product Preview Card Component Code

    2
    jotaprojects•100
    @jotaprojects

    Nice work! 👍

    For the image you can use the <picture> tag to handle the switching between desktop and mobile.

    For example

    <picture>
    <source srcset="image-desktop.png" media="(min-width: 800px)>
    <img src="image-mobile.png" alt="">
</picture>

    The picture tag is good to use when you have two different images to display in different mediaqueries.

    You can read more about it here https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

    Marked as helpful
  • Johannes Pries•80
    @Johannes-pries
    What are you most proud of, and what would you do differently next time?

    Hi I am Johannes and this is my solution on this challange.😊

    I had some problems with creating an solid line for the table. I also didn't know a better solution for the media querry.

    Any Feedback is welcome

    Responsive recipe page

    2
    jotaprojects•100
    @jotaprojects

    Great work with this!

    Tables can be a bit tricky. I would suggest try add border-collapse: collapse on your table and then you will get a solid line. By default a table has borders.

    Marked as helpful