@Tashh93
Submitted
@LuisVera1
@Tashh93
Submitted
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.
<a>
for links.<html>
selector, you can do that in <body>
Check out the following link: Social-links and then base
Hope this is helpful!
Good work!
Marked as helpful
@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.
@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
<main>
to wrap all the content instead of a <div>
element.--- Css
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
@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.
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!
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
<main>
para envolver todo el contenido en lugar de la etiqueta <div>
<h1>
y después <h2>
y asi, hasta el <h6>
, y en ese orden.<br>
que tienes dentro del titulo y del párrafo no son necesarios, estos se ajustan segun el tamaño del contenedor.---Css
.card
puedes usar la propiedad padding para darle espacio entre el contenido y el borde y asi no necesitas el .container-card
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
@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
:root
element.font-size
.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!
@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
<main>
to wrap all the content instead of a <div>
element<a>
for linksLondon, United Kingdom
could be in a <p>
--- Css
.box
, instead of using margin in elements, it is easy to work with paddingCheck 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!
@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!
@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!
@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
<main>
to wrap all the content instead a <div>
element<a>
for the links, for example, replace<div class="link">GitHub</div>
to
<a class="link">GitHub</a>
--- Css
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!