Skip to content
OverviewSolutions
10
Comments
5
Nico Velasco
@Darionvr

All comments

  • cookie-monster01•110
    @cookie-monster01Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?
    1. I learnt about responsive font-sizes using clamp().
    2. I have also used, min(), max() and calc() on padding, margins and width.
    3. I think I have understood when to use em, rem, px and % - please correct me if I'm wrong.

    #What would I do differently?

    In my next project, I will use Bootstrap.

    What challenges did you encounter, and how did you overcome them?
    1. I started working on the project with Desktop screen size and soon realized I should try using Mobile-first workflow, after reading about Bootstrap.
    2. I learnt about responsive sizing of font, images, padding and margin.
    3. I used column gap to separate elements, but because the footer elements were not responsive, I realized that gap property does not shrink the gap between elements as we resize the webpage.
    What specific areas of your project would you like help with?
    1. I don't think I have understood correctly the use of min() and max() for responsive design, and whats the best practice.
    2. At 1200px, footer element .subscribe, shifts to the right edge. I do not understand how I could center the elements, I tried using margin: 0 auto to center the footer elements but did not work.
    3. My webpage had a horizontal scroll, and I couldn't understand what was causing the overflow. Although, I don't have that scroll on the live url, also, don't know why.

    Huddle Project using Mobile-first workflow

    2
    Nico Velasco•160
    @DarionvrPosted about 1 month ago

    Hi! I don’t have much practice giving feedback, I’m quite new at this, but I was looking at your page with the browser’s element inspector. It’s very useful when you want to discover what’s causing your page to have horizontal scroll. To see it yourself, open your page and right-click anywhere; you’ll see the ‘Inspect’ option. There, you’ll see all your code on one side, and as you hover over it, each area will be highlighted in a different color. This way, you can see which part is using more space, margin, padding, etc. In this case, the ‘convo’ section is taking up more than 100% of the page. Hope this helps!

    0
  • ANACAROLINEARAUJOO•10
    @ANACAROLINEARAUJOOSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Me orgulho de ter conseguido concluir o desafio e eu usaria novas tecnologias na próxima vez.

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

    Conseguir alinhar a imagem principal no centro, busquei mecanismos e fiz pesquisas de como eu poderia resolver aquele problema e consegui resolver ele com sucesso.

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

    Na parte do design, já que não tenho muita experiencia nisso.

    Card de aprendizado responsivo

    1
    Nico Velasco•160
    @DarionvrPosted about 2 months ago

    Wow 😮, you did a great job, even though it’s not the original design from the challenge. Make sure to try to replicate the original design so that you can practice how it would be to work for a client. In some cases, clients, designers, or teams will provide you with a mockup of how they want the web page to look, and you should follow it precisely if you want to do good work. It’s great to propose design changes, but always ensure you have the final approval from the client—unless you’re 100% in charge of the project!

    0
  • Nico Velasco•160
    @DarionvrPosted about 2 months ago

    Good job. Make sure to consider the order of files within your repository. For instance, place your CSS stylesheet inside a folder named ‘Styles,’ and ensure that images and other files are within a folder called ‘Assets.’ If you need further clarification, you can refer to this page https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files.

    I hope it's helpful! 😊

    0
  • Nico Velasco•160
    @DarionvrPosted about 2 months ago

    Your images cannot be seen ☹️I checked your HTML code and in each image line, you missed adding a dot. Your code is like this: ‘/assets/images…’ and it should be like this: ‘./assets/images…’. I hope this helps!

    0
  • Untest57•80
    @Untest57Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    It took too long, so next time I'll just implement the parts in the challenge without any additional work.

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

    • The task of making the a tag respond to the entire card.

      .card a.link::after {
  position: absolute;
  inset: 0;
  z-index: 1 !important;
  content: "";
}

    • Size does not match design file.

      As a result, the inline-flex parent was 3px larger.

      Solved as follows:

      .card .author {
  display: inline-flex;
  vertical-align: middle;
}

    Blog preview card - no media query

    1
    Nico Velasco•160
    @DarionvrPosted 2 months ago

    Awesome! It looks exactly like the original image. I saw your code and you used the h2 tag, but there is no h1. If I’m correct, those tags should be used in a sequential manner to avoid bad practices.

    Hope this article helps you :)

    https://medium.com/swlh/html-heading-tags-best-practices-78a85f63df47

    Marked as helpful
    1