Skip to content
OverviewSolutions
2
Comments
4

idev_cloud

@CodeNautique60 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Submitted 3 days ago

    blog-preview-card

    • HTML
    • CSS
    0

    I tried mobile-first workflow but I didn't have the same result as the design.

    So I did the desktop-first workflow to have the same result. I tried clamp function but I don't understant the viewport width.

    So I used rem units.

  • Submitted 16 days ago

    qr-code component-main

    • HTML
    • CSS
    1

Latest comments

  • P
    idev_cloud•60
    @CodeNautiquePosted 2 days ago

    Hi,

    If you want to stick to the design, you should use flexbox to center the card in the middle of the page.

    In the main element :

    display: flex; justify-content: center; align-items: center;

    Marked as helpful
    0
  • Matilda•50
    @Til-daSubmitted 14 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that i could figure out the size of the QR-code picture and also place it in the right place. Also glad i wrote the code by myself.

    What i would do differently:

    • To list out the elements
    • Write the whole HTML out before i start designing
    • Pick the fonts and colors.
    What challenges did you encounter, and how did you overcome them?

    The challenges i encountered are: Sizing of the card div, sizing of the QR-code picture, placing the card div at the center.

    How i went about it:

    • Tried using Justify-content, Justify-items, Justify-self
    • Asked ChatGPT for help at some point.
    What specific areas of your project would you like help with?
    • The placing of a div
    • Website transitioning

    HTML, CSS for structure and styling, google fonts and VS code editor

    2
    P
    idev_cloud•60
    @CodeNautiquePosted 6 days ago

    Hi,

    Here a tips for sizing the QR-code picture :

    First: Create the content like you did in the HTML file. Second: Add the width and the height of you content in the CSS file. Third: Add a display: flex; and a flex-direction: column; the QR-code picture will be in the content because you did a div who is a parent.

    You don't need to add a class to your images here because you don't have lot of picture.

    Marked as helpful
    0
  • aagah20•30
    @aagah20Submitted 9 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of making it all my myself and using Flexbox. Next time i would focus on making it using more Flexbox.

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

    I had a problem making the main container in the center so used margin auto on left and right and some on top. But later i remebered about flexbox justify and align so i would use it the next time.

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

    I had a problem with responsiveness so would like to learn more about it.

    Responsive QR Code

    #pure-css#web-components
    1
    P
    idev_cloud•60
    @CodeNautiquePosted 6 days ago

    Hello,

    For responsiveness, try to start with the mobile-first development. The main tag is a semantic element, it's better to use a div tag because is used as a container for HTML elements.

    0
  • P
    idev_cloud•60
    @CodeNautiquePosted 16 days ago

    Hello,

    I think you should do add in your HTML File :

    <div class="card"> <main> <div class="qrcode"> <img src="/images/image-qr-code.png" alt="QR Code"> </div> <div class="text"> <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </main> </div>

    Like that you can have your big card. You can remove main element but I think is better to use for SEO.

    0