Skip to content
OverviewSolutions
9
Comments
8

Juan Trujillo

@jdtb4Barcelona180 points

Frontend Dev in progress. 👨‍💻

Latest solutions

View more solutions

Latest comments

  • Juan Trujillo•180
    @jdtb4

    Good job, your desing looks really good. Just one thing, try to make the desing fit on others screens sizes.

  • Juan Trujillo•180
    @jdtb4

    Hi, you did a very good work in this challenge, congratulations!

  • vijay1maroju•30
    @vijay1maroju
    What are you most proud of, and what would you do differently next time?

    I feel good that I started using CSS grid and flexbox now.

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

    I faced challenges with media queries, I tried my best to make the mobile version look better, but I don't know if it is as good, I think I did quite good in desktop version.

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

    I would like to improve with media queries, dealing with image resizing and image replacement in media queries.

    Responsive landing page for Product Preview Card.

    1
    Juan Trujillo•180
    @jdtb4

    Hi, first of all congratulations, you finished the challenge.

    • Change the grid-template to grid-template-columns: repeat(2, 1fr); that would fix the error in the grid.
    • Use margin: 10% auto; to center the card.
    • Add border: none in the button to remove the border black.
    • border-radius: 15px; will round the corners of the card.
  • EggBacon•60
    @Kabadon
    What specific areas of your project would you like help with?

    Feedbacks are open! I'm having trouble with the paragraph, responsiveness between phone and desktop layout. If possible, please suggest me on how to make a cleaner CSS code. Thank you ^^

    (Need Feedbacks) Html & CSS, Recipe page

    1
    Juan Trujillo•180
    @jdtb4

    Hi!, first of all congratulation, you have finished the challenge.

    The desing is so good but it looks a little smaller.

    • Try to use semantic HTML, this will help you make the code more understandable and reusable.
    • Change the size of the font font-size: 16px.
    • Add a line-height: 1.5 on the body;
    • Remove all widths in px, that gives a component a fixed size, we want it grow and shrink according to the screen size.
    • Remove the padding in the mainpage and try to add it in the different components of the recipe, it will solve the width of the img on the mobile screen.
    Marked as helpful
  • Juan Trujillo•180
    @jdtb4

    Hello Austine, first off all goob job, you finished the challenge.

    Your design looks so good, the transition you added when the cursor hover the buttons made it looks more profesional.

    I only recomend you to try to use more semantic HTML to structure the code, that will make your code cleaner and readable.

    Marked as helpful
  • André•80
    @psandre
    What are you most proud of, and what would you do differently next time?

    As descobertas sobre diretórios, subdiretório, caminhos relativos e caminhos absolutos

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

    tive dificuldade em encontrar o caminho do arquivo de imagem e ícone, dentro do git para exibição no https://psandre.github.io/blog-preview-card-main/.

    Declarando sem o (.) não aparecia as imagens <img src="/assets/images/csshtml.png" alt="imgpc" class="imgpc" >

    Declarando como (.) aparecia as imagens <img src="./assets/images/csshtml.png" alt="imgpc" class="imgpc" >

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

    A princípio eu não encontrei a imagem original do card, sendo assim substitui por outra imagem, acabei gostando e mantendo a então imagem. No entanto, minha dúvida seria esta.

    HTML CSS

    3
    Juan Trujillo•180
    @jdtb4

    Hi Andre 👋, first of all good job, you finished the challenge.

    Your code is good but it would better if you use semantic Html.

    I use a extension in my VS code editor that make easier to find the route to the files, is Path Intellisense, it would help you with the image. You only need to write "./" and navigate in to the folders.

    In this challenges you have to be as more faithful to the design as possible.

    • Add more radius on the card, like 20px
    • Change the px for rem in the font-size propperty
    • Use h2:hover to change the background color when the cursor hovers the tittle
    • Try to use the weights in the fonts: 500, 800 in the font-weight insted of bold.
    • On the body add min-height: 100vh and gap: 20px that separates the card from the top and add space between the body and the footer.
    Marked as helpful
View more comments