Skip to content
OverviewSolutions
31
Comments
12
Felice Nicolas Barcellona
@feliceNicolasBarcellona

All comments

  • Sherrisa Classon•80
    @SherrisaSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud that I inspected the project in Figma and obtained the exact dimensions for the component, the image, and the margins around the h2 and p elements.

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

    When I deployed the project using GitHub Pages, the image didn't render. My first hunch was that something was wrong with the file path. I started by moving the file out of the images folder so that I could use a simpler file path. I then tried moving the image back into the folder and setting the path back the way I originally had it but without the forward slash at the beginning. I pushed it to GitHub, and it worked.

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

    I want to try the project again using Next.js, Tailwind, and TypeScript.

    QR code component using Vanilla HTML & CSS

    1
    Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted about 1 month ago

    good job

    0
  • Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    excellent work.

    add pointer (css cursor:pointer) when you hover on interactive elements, and fix the color of social icons when you hover on them

    Marked as helpful
    0
  • Ignacio Spreafico•590
    @nachospreaficoSubmitted over 1 year ago

    I found really difficult to align the card to the center of the body for the desktop version, so the way I managed it is what I am most unsure of. Is it good practice to add display: grid to the body? Thanks in advance!

    QR Code Component

    3
    Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    try this

    @media only screen and (max-width: 1440px) body { background-color: #d5e1ef; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 98vh; /* padding-top: 4%; / / padding-bottom: 2%; */ }

    Marked as helpful
    0
  • Pralay Dutta Saw•10
    @Pralay19Submitted over 1 year ago
    1. I was a bit confused on how to bring the box to the center.
    2. I also struggled to align the components of the box.
    3. I am also unable to visualise the flexbox. Any advices please.

    CSS flexbox used for this solution

    2
    Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    congratulations on completing this challenge

    to fix the image apply a width of 100%

    1
  • Ismae1•20
    @Ismae1Submitted over 1 year ago

    This is my second challenge. Any feedback on my code would be great. I was trying to get my card to stay center when lower than 375px

    QR Code component

    2
    Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    if you'd like to take a look here https://www.frontendmentor.io/solutions/qrcodecomponentmain-p47hHnKHUD

    0
  • José Israel Santizo Santos•20
    @IsraelSantizo98Submitted over 1 year ago

    ¡Cualquier sugerencia es bienvenida! Y si me puedes ayudar en como colocar el color a la imagen, se los agradecería.

    Any feedback is welcome and appreciated! And if you can help me on how to add color to the image I would appreciate it.

    Stats-Preview-Card-Component-Main

    1
    Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    use filter to adjust the hue of the image https://developer.mozilla.org/en-US/docs/Web/CSS/filter

    0
  • Federico Salerno•210
    @Federico-SalernoSubmitted over 1 year ago

    Hello! I developed the challenge as faithfully as possible using only flexbox since I feel more comfortable with it. I didn't know where to place the h1 tag because the page doesn't have a prominent title, so that's my doubt. How can I comply with SEO rules without using an h1 tag, or how can I fulfill SEO rules in this case?

    Testimonials grid section main using only flexbox

    2
    Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    to center the grid add to the main tag

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

    Marked as helpful
    0
  • Wagon706•70
    @Wagon706Submitted over 1 year ago

    I found it a bit difficult to add padding to the card-text in the CSS for Mobile screen sizes because the text would not be stacked and the lines did not break or seem as the same in the desktop image for the challenge. Padding did not help breaking the lines appropriately, possible that Bootstrap was messing things up a tiny bit.

    I'm unsure of the part where I used media queries, I am not sure if it really helped to make it accessible for those two screen sizes (1440px, 375px).

    May someone please tell me on how I can improve my usage of media queries and to use better ways of positioning content i.e flexbox, css grid, etc. May someone please tell me on how I can u

    Order-Summary-Component Solution (HTML, CSS, BOOTSTRAP)

    1
    Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    preview site does not work, please fix it

    Marked as helpful
    0
  • Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    it seems that the font is not working as it should, try importing the font as suggested by google.

    In the 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:wght@400;700&display=swap" rel="stylesheet">

    or in the css file

    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

    0
  • hemanth33•20
    @hemanth33Submitted over 1 year ago

    1. How could I Improve the responsiveness of the page ?

    2. How can I reduce the lines of code to make it more compact ?

    3. What is the right approach to build this page ?

    QR-code Page Solution

    2
    Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    It is good practice to separate CSS code from HTML code (separation of concerns). Therefore, I recommend creating a file, for example, styles.css and moving all the CSS code there, and then linking it inside the head section ( https://www.w3schools.com/tags/tag_link.asp )

    for proper display of the image try removing the path preceding images from Web-Dev-Projects/images/image-qr-code.png to images/images-qr-code.png

    use @media only screen and (max-width: 768px) for mobile

    Marked as helpful
    0
  • Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    It is good practice to separate CSS code from HTML code (separation of concerns). Therefore, I recommend creating a file, for example, styles.css and moving all the CSS code there, and then linking it inside the head section.

    0
  • Felice Nicolas Barcellona•490
    @feliceNicolasBarcellonaPosted over 1 year ago

    thank you for the feedback

    0