I wrote a minimal CSS confing, but the .card class is a little bloated.
What challenges did you encounter, and how did you overcome them?Working with composition and variants.
Looks good! Just double check the spacing between the elements
Being able to complete it in a reasonable time
What challenges did you encounter, and how did you overcome them?Learning how to use HTML tables
What specific areas of your project would you like help with?Any general advice
Great job!
The only noticeable thing missing is the bold text for the preparation time, but it looks solid!
I will use this part of the project as a template for my portfolio to show my social media platform links.
What challenges did you encounter, and how did you overcome them?I learned a good practice for button links.
What specific areas of your project would you like help with?I learned a good practice for button links.
Good stuff, Rohit!
Don't forget to add the hover effect to the links
a:hover {
background-color: green;
}
Getting there!
Feedback:
Don't forget to center the box in the screen, you can do this by using flexbox attributes and adding padding.
For the links, you added a div class called "links". Because they will be links, you should use anchors for your links, not divs, so instead of
<div class="links">GitHub</div> you should use:
<div id="links">
<a href="#" class="social-links" >GitHub </a>
<a href="#" class="social-links" >Frontend Mentor </a>
<a href="#" class="social-links" >LinkedIn </a>
<a href="#" class="social-links" >Twitter </a>
<a href="#" class="social-links" >Instagram </a>
</div>
And take it from there :)
Me gustó poder aplicar mis conocimientos y seguir mejorando mis habilidades como desarrollador frontend. Por último, lo personalicé con mi información para incluir este proyecto en mi portafolio, lo cual me emociona mucho.
What challenges did you encounter, and how did you overcome them?Al comenzar a aplicar los estilos, estaba un poco dudoso sobre cómo empezar, pero finalmente fui avanzando paso a paso y no encontré ninguna dificultad.
What specific areas of your project would you like help with?En todas las áreas, estoy abierto a cualquier comentario, ayuda o crítica constructiva que pueda recibir.
Great job!
I was stuck on the links section because I was using a list instead of just links, your code helped me fix it, thank you!
Note: Adding a small 0.3s transition for the hover makes the ui looks smoother, give it a shot :)
.linkButton:hover { transition: background-color 0.3s; }
aprendi a centralizrar mais facil
What challenges did you encounter, and how did you overcome them?nenhum
What specific areas of your project would you like help with?css html
It's always good to use the Figma Dev tool to confirm the padding and dimensions of the asset.
The structure is almost there, but it needs polishing.
If you can review the font styles and padding, it will look better!
But good start.
I'm really proud that I got the font working (but only on chrome).
What challenges did you encounter, and how did you overcome them?I use Firefox as a default browser, and it took me ... a while to realize that the font only works on Chrome. Made me realize how much stepping back from your code for a bit helps.
What specific areas of your project would you like help with?I'd like help with getting the font to work on Firefox, and with getting the QR component to center itself with different page sizes.
Also any general coding style tips are appreciated.
Hello, there!
Good job finishing your first challenge, I just did a quick review on your code and I think I found the reason why the font only works on Chrome.
For simplicity purposes, next time you identify a Google Font it's always easier to go into Google Fonts and look for it, in this case: https://fonts.google.com/specimen/Outfit
Once you find it, click "Get Font" and then you can get the code to embed it into your HTML or CSS, and then you can make a call to it in your stylesheet.
For centering your document, use the Flexbox, if you want to learn how to use it I would highly recommend you to play this game: https://flexboxzombies.com/p/flexbox-zombies
I want to be able to finish way faster than I did. I want to get better at doing the responsive design.
What challenges did you encounter, and how did you overcome them?media query is hard. I don't know which to put in a div and what to keep outside of a div.
What specific areas of your project would you like help with?cleaner code, how to finish quicker
Good stuff!
I'm not sure if you are already using the Dev version of Figma but it helps a lot.
I don't know if my code is the cleanest version or if there are unnecessary things in there that I can take out
What challenges did you encounter, and how did you overcome them?Flexbox is still hard at times. I also didn't know how to see the exact padding and spacing between items or font sizes and whatnot. I'm not too familiar with figma. I eyed it and guessed on the padding so it's definitely not perfect
What specific areas of your project would you like help with?How do you use figma to make it more pixel perfect (or at least close to)
Hello!
If you want to take your Flexbox knowledge to the next level then I'd highly recommend you this game: https://mastery.games/flexboxzombies/
It helped a lot.
Being able to tackle this challenge in less than an hour.
What challenges did you encounter, and how did you overcome them?Centering all the elements
What specific areas of your project would you like help with?Adding accessibility to the web page.
Looks good! Just make sure to pay extra attention to the padding and dimensions. Figma's dev tool is great for this
