Skip to content
OverviewSolutions
5
Comments
4
Akri
@akri-dev

All comments

  • Akri•120
    @akri-dev

    make sure your links for attribution are readable in color

    Marked as helpful
  • Akri•120
    @akri-dev

    try using calc() to scale/resize fonts and width & height. It'll be smoother

    calc(20px + (4 * ((100vw - 375px) / (1440 - 375))))

    my min-width is 375px

    my max-width is 1440px

    for min-width, my target font would be 20px

    for max-width, my target font would be 24px

    Marked as helpful
  • P
    Christian•230
    @ChrisFloresM
    What are you most proud of, and what would you do differently next time?

    I was able to practice some HTML and CSS basics

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

    Defining a correct html structure for each component, taken into account the layout strategies to use to achive the design as close as possible.

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

    Code organization and html structure, in case something can be improved.

    Blog preview card using html and css

    1
    Akri•120
    @akri-dev

    For better html structure and code organization, learn Bootstrap

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

    I was pretty happy with how quickly I finished the HTML and CSS basics.

    I would've studied the Figma file earlier on if I could do it again.

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

    Getting the sizing of the containers correct and entering/spacing the image. I looked deeper into the Figma file

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

    What code to use at different times to centre images, text etc. I am not always sure when or how to use flex box as well.

    QR code component (HTML & CSS)

    1
    Akri•120
    @akri-dev

    Make sure to rename your README-template.md to README.md in Github

    You can remove all of this from your index.html

      <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>