Tasha Bradford• 30
@Tashh93
Submitted
P
Luis Vera
@LuisVera1
All comments
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- Use
- Hacklie• 80
@Hacklie
Submitted
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.
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
@Hacklie
Submitted
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.
@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 usesummary-categoryinstead.And as for your error, it is caused by this line in your html
`
Marked as helpful
1 - Use the
- Raphaelavazq• 30
@Raphaelavazq
Submitted
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
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 @Rod-RodriguezF-28
Submitted
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
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
.cardpuedes 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- Usa la etiqueta
- Michael Cook• 60
@MikeCook9994
Submitted
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.
Hi @MikeCook9994
Your solution looks great! however, here are some suggestions.
--- Css
- Variables must be defined in the
:rootelement. - 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 - Variables must be defined in the
- GeovannaV• 10
@GeovannaV
Submitted
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
**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 Kingdomcould 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 - Use the
- Daniel• 10
@DanielNevadoK
Submitted
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?
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
@thebraudalf
Submitted
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.
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 - David Cardozo• 80
@cardozo309
Submitted
What are you most proud of, and what would you do differently next time?
Da próxima vez quero me atentar a organizar mais o código.
What challenges did you encounter, and how did you overcome them?
Encontrei desafio em acertar a cor da letra verde, mas fui atrás de ferramentas que conseguem definir para mim.
What specific areas of your project would you like help with?
Gostaria do feedback geral onde posso melhorar.
Hey David
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 - Use
<a>for the links, for example, replace
<div class="link">GitHub</div>to
<a class="link">GitHub</a>--- Css
- To center the card you could use flexbox
display: flex; justify-content: center; align-items: center;You can center an element with margin, but only for the horizontal center. Finally, the green color is
hsl(75, 94%, 57%), which you can find in the style-guide.md file.Check out the following link: social-links
Hope that's helpful!
Keep the good work!
0 - Use the
