Skip to content
OverviewSolutions
10
Comments
13
P
Luis Vera
@LuisVera1

All comments

  • Aadarsh Vikram Singh•20
    @aadarshvikram00Submitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I am getting used to it by practising the newbie project on HTML and CSS.

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

    I have faced an encounter regarding the image size and flexbox condition.

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

    The project was easy but due to confusion from my side regarding the image and other things. It put me on more time than required.

    Responsive profile card by using the HTML5 and CSS3

    1
    Luis Vera•240
    @LuisVera1Posted 1 day ago

    Hi Aadarsh Vikram Singh

    Your solution looks great!, however, to improve the semantics of your HTML, here are some suggestions.

    --- Use the appropriate HTML element

    • Use the <main> to wrap all the content instead of a <div> element
    • Use a list for the links
    <ul>
   <li><a>Link1</a></li>
   <li><a>Link2</a></li>
</ul>

    --- Css

    • Be careful with the aspect ratio of your image, your original 605x1280 image will be distorted to fit in 100x100.

    For an example check out the following link: Social-links-basic

    Hope this is helpful 👍🏻

    Keep up the good work!

    0
  • Jakelliott98•10
    @Jakelliott98Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I manage to complete the project to what I would say is very similar to the original version. Most of the concepts I have completed before so it was more for learning how to use frontend mentor.

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

    In terms of the coding it was more one learning markdown as it was first time writing a readme file. Additionally, spacing is one thing I can struggle with like getting the relationships between different elements right.

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

    Opinions on my code and if there is cleaner or better ways to write similar code. Also keen to see other peoples codes for the same project as I have never done something like this before.

    Social links profile page

    1
    Luis Vera•240
    @LuisVera1Posted 1 day ago

    Hi @Jakelliott98

    Your solution looks great!, It's almost pixel perfect!

    However, to improve the semantics of your HTML, here are some suggestions.

    --- Use the appropriate HTML element

    • Use the <main> to wrap all the content instead of a <div> element.
    • Use <ul> for a list of links.
    • Use <a> for links.

    For an example check out the following link: Social-links-basic

    Hope this is helpful 👍🏻

    Keep up the good work!

    Marked as helpful
    0
  • Pathfinder132•30
    @Pathfinder132Submitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    Im slowly starting to get the hang of CSS layout and website responsiveness, with time I'll be able to get really good at this. I don't want to use any help next time and do everything on my own.

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

    i faced challenges of making the p elements "boxed" and even issues with layout but that's all.

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

    dynamic responsiveness ( mobile and desktop ) and the flow of the website etc

    ProfileDesign

    1
    Luis Vera•240
    @LuisVera1Posted 1 day ago

    Hi Pathfinder132

    Your solution looks great! However, to improve the semantics of your HTML, here are some suggestions.

    --- Use the appropriate HTML element

    • Use <a> for links
    • Use a <li> element inside a <ul> element
    • Don't forget to add a title to your page <title>Social links</title>

    --- Css

    Be careful with relative units, the following property does not work correctly in landscape mode.

    .box {
   height: 70dvh;
}

    Check out the following link: Social-links-basic

    Hope this is helpful!

    Keep up the good work!

    0
  • Luis Vera•240
    @LuisVera1Posted 8 months ago

    Hi @Tashh93

    First of all, I recommend you write some comment in your solution, if you have questions is the right place to expose them.

    Second, the correct link to your solution is this: Social-links,

    Finally, here are some suggestions.

    • Use <a> for links.
    • It is not necessary to apply styles to the <html> selector, you can do that in <body>
    • Use flexbox to center the card, don't use margins or padding, it won't work on many screen sizes.

    Check out the following link: Social-links and then base

    Hope this is helpful!

    Good work!

    Marked as helpful
    1
  • Hacklie•80
    @HacklieSubmitted 8 months ago
    What challenges did you encounter, and how did you overcome them?

    The barely visible border at the corners in the summary took longer than expected.

    There is also an error message in the console: "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec."

    I haven't found a solution for this, but that's not too bad, because loading the data from the json still works. And in real life you would rather get the data from an API and not from a local json file.

    Frontend Mentor | Results summary component

    3
    Luis Vera•240
    @LuisVera1Posted 8 months ago

    Hi, something wrong with the last comment 🤭

    The error is in the line 14 in your html

    < script type= "module" src= "./data.json">< /script >

    You can also get the data with 'fetch', so it doesn't matter if the data is local or comes from an API, your project is ready!

    Good job!, greetings.

    0
  • Hacklie•80
    @HacklieSubmitted 8 months ago
    What challenges did you encounter, and how did you overcome them?

    The barely visible border at the corners in the summary took longer than expected.

    There is also an error message in the console: "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/json". Strict MIME type checking is enforced for module scripts per HTML spec."

    I haven't found a solution for this, but that's not too bad, because loading the data from the json still works. And in real life you would rather get the data from an API and not from a local json file.

    Frontend Mentor | Results summary component

    3
    Luis Vera•240
    @LuisVera1Posted 8 months ago

    @Hacklie

    Your solution looks great! However, here are some suggestions.

    --- Use the appropriate HTML element

    • Use the <main> to wrap all the content instead of a <div> element.
    • Your html has a lot of commented code, if this is not necessary, better delete it.

    --- Css

    • The names of the classes are very large, for example:

    results-summary__summary-div-category, you can use summary-category instead.

    And as for your error, it is caused by this line in your html

    `

    Marked as helpful
    1
  • Raphaelavazq•30
    @RaphaelavazqSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    While working on this project, I significantly improved my understanding of responsive design, especially using Flexbox.

    This project also reinforced the importance of mobile-first design and how to effectively use media queries to adapt the layout for larger screens.

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

    was more difficult to understand media queries

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

    I had some issues with my GitHub Pages site because my CSS seems to not be applied . I got a solution using cloudflare

    QR Code Component Using HTML & CSS Flexbox

    2
    Luis Vera•240
    @LuisVera1Posted 8 months ago

    Hi @Raphaelavazq

    Your solution looks great! However, here are some suggestions.

    • Using '!important' is not recommended, you can use the developer tools in Chrome to see which element is inheriting styles from.
    • Flexbox is the better way to center an element, avoid using margin and padding to do this, it can be very complicated 🤯

    For a better explanation you can check this link, QR-code and this QR-base

    Hope this is helpful, if it is, don't forget to mark it, thank you

    Keep up the good work!

    0
  • Rodrigo Rodriguez•10
    @Rod-RodriguezF-28Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    estoy orgulloso de mi primer proyecto

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

    no sabia muy bien darle el formato a la imagen y lo supere investigando en internet

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

    en la estructura html

    página de qr con flex

    2
    Luis Vera•240
    @LuisVera1Posted 8 months ago

    Hola @Rod-RodriguezF-28

    ¡Tu solución se ve muy bien!, aqui te dejo algunos consejos para mejorar la semántica.

    --- Html

    • Usa la etiqueta <main> para envolver todo el contenido en lugar de la etiqueta <div>
    • Usa primero la etiqueta <h1> y después <h2> y asi, hasta el <h6>, y en ese orden.
    • Los <br> que tienes dentro del titulo y del párrafo no son necesarios, estos se ajustan segun el tamaño del contenedor.

    ---Css

    • en tu .card puedes usar la propiedad padding para darle espacio entre el contenido y el borde y asi no necesitas el .container-card
    • A la imagen te recomiendo ponerle un width de 100%, este tomará el 100% del elemento padre, si este reduce su tamaño la imagen tambien se reducirá, lo que ayuda al diseño responsivo.

    Revisa este link: QR-base

    Espero esto te sea útil, y si lo es no olvides marcarlo.

    Muy buen trabajo, ¡sigue asi!

    Marked as helpful
    0
  • Michael Cook•60
    @MikeCook9994Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I was actually able to accomplish more than I expected without having to consult tutorials to review layout. As far as I can tell, the CSS is pretty minimal and I imagine it would be hard to argue that this is being accomplished in any sort of a hacky way.

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

    Center elements vertically because I couldn't remember how flex-box worked. Additionally, I struggled with making the layout respond to screen-sizes properly because I was initially using a max-width property to constrain the size of the image.

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

    There are a lot of pixel units declared in the CSS and I'm not sure that's the proper way to do things. I stuck with pixels because it was the easiest way to match the presented design as closely as possible, but I'm curious if others are able to accomplish the same with less rigid measurement units.

    Vanilla html/css QR-Code

    2
    Luis Vera•240
    @LuisVera1Posted 8 months ago

    Hi @MikeCook9994

    Your solution looks great! however, here are some suggestions.

    --- Css

    • Variables must be defined in the :root element.
    • Use rem to set font-size.
    • You could use classes instead of applying styles directly to elements.

    Check out the following link: Qr-component

    Hope this is helpful, if it is, don't forget to mark it, thank you

    Keep up the good work!

    0
  • GeovannaV•10
    @GeovannaVSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Me orgulho do meu CSS, por que mesmo que eu sei só o basico dele eu já consigo fazer alguma coisa, mas ainda sim preciso melhorar muito, não só o CSS mas sim também o HTML, aprender a otimizar mais eles.

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

    O meu maior desafio foi centralizar as divs e separar elas

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

    Eu gostaria de ajuda em aprender a otimizar mais o meu CSS e ajeitar as minhas divs

    Solução HTML e CSS

    1
    Luis Vera•240
    @LuisVera1Posted 8 months ago

    **Hi GeovannaV **

    Your solution looks great! However, to improve the semantics of your HTML, here are some suggestions.

    --- Use the appropriate HTML element

    • Use the <main> to wrap all the content instead of a <div> element
    • Use <a> for links
    • All content must be in an html element, for example, the text London, United Kingdom could be in a <p>

    --- Css

    • Your css file looks good, but I recommend using padding in your .box, instead of using margin in elements, it is easy to work with padding

    Check out the following link: Social-links and then basic

    Hope this is helpful, if it is, don't forget to mark it, thank you

    Keep up the good work!

    0
  • Daniel•10
    @DanielNevadoKSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of finnishing the project, and would have taken more time to ad the circles

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

    Adding the circels

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

    I would like to know if anyone added the oval circels and how they did to make them work, was it with z-index or somthing else?

    QR Code card for desktop

    1
    Luis Vera•240
    @LuisVera1Posted 8 months ago

    Hi Daniel

    Your solution looks very good, but I don't understand, which circles?.

    I see you are using react, in this case, you don't need to edit in yout index.html, your code must be in the App.jsx

    keep up the good work!

    0
  • The Braudalf•50
    @thebraudalfSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Firstly, I completed this challenge. And next i will try complete other challenge.

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

    The biggest challenge in this project was giving proper margin between card and web page.

    Social Links Profile using CSS Flexbox

    2
    Luis Vera•240
    @LuisVera1Posted 8 months ago

    Hey thebraudalf

    Your solution looks great! To improve the semantics of your HTML, here are some suggestions

    --- Use the appropriate HTML element

    Use the <main> to wrap all the content instead a <div> element

    --- Css

    To center the card you could use flexbox

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

    About the resolution, I think it's 1440px x 960px

    Check out the following link: Social-links

    Hope that's helpful!

    Keep the good work!

    0