@olha-leskivSubmitted over 1 year ago
P
Andrea Y Costas
@a-costasAll comments
- @a-costasPosted over 1 year ago
Nice job on completing your first challenge!
My main note would be to stay mindful of using semantic HTML. For example, your
<div class="container">could instead be<main class="container">and your<div class="attribution">could be<footer class="attribution">. It may seem unimportant now, but as you write bigger and more complicated pages, this will become increasingly important to help search engines understand the importance of what's on your page. Additionally, it helps offer better accessibility!Overall, nice job and happy coding!
0 - @Letsdothis94Submitted over 1 year ago
First take on this challenge, working with responsive design, still having some trouble understanding when to use 'px' or '%', hopefully I can get it down on the next challenge.
@a-costasPosted over 1 year agoHi there! Nice job on completing the challenge!
Your use of semantic HTML is good! Nice job there!
As far as understanding when to use
pxor%, the answer you're looking for may be that you don't need either as often as you may think you do. Generally, you should avoid setting heights (and widths) at all in your code. Whether you're using pixels or percentages, setting heights should seldom be necessary. Using thedisplayproperty would help you a lot as it will keep you from needing to set deliberate heights for everything. You can usedisplayto your advantage!display: flexfor example, would cause your containers to grow as much as necessary to contain the content within them, then you can play around with paddings and margins to add more space in between, making it unnecessary for you to define heights or widths.On a related but slightly different note, you should try using
remunits as much as possible, not just for fonts, but for nearly everything (margins, padding, etc). Here's a video that might be helpful! Are you using the right CSS unitsHope that's helpful. Nice job and happy coding!
Marked as helpful1 - @TungsticSubmitted over 1 year ago
As I haven't practiced CSS a lot, I was very unsure of dimensions of the elements. Somehow, tweaking the number of pixels doesn't seem right: if there're no dimensions specified in the design, you end up eyeballing everything (I would have preferred to have exact dimensions for padding and margins but maybe it's not how it's done?).
I used a red border on every element while editing CSS to be able to see where which element is. Is that considered good practice?
@a-costasPosted over 1 year agoHi there! Nice job completing your first challenge!
Unfortunately, without the Figma guides, you are left to speculate as to padding, margins, etc, but I think you've done well regardless.
My main note is avoid using fixed sizing for things like height and even width as much as possible as it can make your application less responsive. On a similar note, consider using
remunits instead ofpx. Here's a video you may find helpful on that front: Are you using the right CSS unitsOther than that, nice job and happy coding!
Marked as helpful0 - @cmachdevSubmitted over 1 year ago
This is my first challange, feel free to leave your feedback, I will appreciate it
Have fun togheter coding and learning
@a-costasPosted over 1 year agoHi there! Nice job completing the challenge!
It looks like you've had a bit of an overflow issue with your text expanding past the edge of your card. This is happening because you've explicitly defined the height of your card at
height: 30.94rem;. To fix this, you can remove that height setting, and set the display forqr-cardtodisplay: flex; flex-direction: column;. This will allow your card to vertically grow to fit the content within it.You shouldn't have to explicitly redefine
paddingforh2andpas you've already defined a padding forqr-cardand everything it contains.Hope that helps and happy coding!
0 - @BluecaueSubmitted over 1 year ago
I didn't have many difficulties, I don't even know if I had any
@a-costasPosted over 1 year agoHi there! Congratulations on finishing the challenge!
My one note would be regarding semantic HTML. Instead of using
<div>for the main content, I'd encourage you to use<main>instead. Similarly, while I know you commented out the attribution portion, that would be a perfect time to use<footer>. These may seem like small and insignificant choices, but they can be very helpful to maintain good accessibility across your site as well as maintaining good code. One day, it can even be helpful in improving SEO positioning.All in all, nice work and happy coding!
0 - @yauwalu84Submitted over 1 year agoWhat are you most proud of, and what would you do differently next time?
I managed to finish the challenge despite my limited HTML and CSS expertise. However, I faced numerous challenges, particularly due to my oversight of the importance of prioritizing mobile design. Moving forward, focusing on mobile design from the outset would be my top priority for improvement.
What challenges did you encounter, and how did you overcome them?I encountered various challenges during the project, primarily because I overlooked the significance of prioritizing mobile design initially. I only became aware of this oversight after submitting the challenge and receiving feedback from someone who advised me to start with mobile-first design.
What specific areas of your project would you like help with?I would greatly appreciate the opportunity to learn more about responsive design.
@a-costasPosted over 1 year agoHello! Nice job on completing your first challenge!
There are a few things that could help you in the future regarding CSS.
A mobile-first approach to implementing the design can be very helpful. While it is less noticeable in this project as the appearance is the same on both mobile and desktop, I'd encourage you to try mobile first in the future, then use the
@mediaqueries to help you put together the desktop view.I noticed that for font sizes, you used
vwas your unit. I'd encourage you to usereminstead.vwunits should be reserved for occasions where you need an element to fill up a lot of width.remwill help a lot in your future work as it is a relative unit and will adjust itself accordingly when the sizes of your elements change. If you have trouble with px to rem conversion, there are good VSCode extensions out there that can help.To centralize elements on a page, I'd recommend reading about Flexbox and/or grid. Both of these layouts allow easier manipulation of how elements are placed on your page and how you align them. Doing that will make it unnecessary to use elements like
<br>in your HTML.<br>should be reserved for very specific situations and not generally used to add this kind of line break, it should be automatically handled with other styling choices.One more thing regarding accessibility, try to stick to semantic HTML. Where you used
<div class="div-center">you could have used<main class="div-center">which would have been better for someone using a screenreader for example.Hope that's helpful! Good start and happy coding!
1 - @NozoDevSubmitted over 1 year ago
Realmente estuvo complicado todo ya que soy nuevo, pero me encanta la programacion.
estoy aprendiendo quisiera que me guiaran.
como seria lo ideal para aprender y hacer buenas practicar y todo quede semantico
@a-costasPosted over 1 year agoBuen trabajo en completar tu primer "challenge"!
Yo diría que usar tailwind y react es demasiado para este tipo de reto. React es una herramienta bien útil, pero es mucho más beneficiosa en proyectos más grandes o con más elementos.
Has usado semantic HTML bien, pero recomiendaría que reserves el uso de
<article>para situaciones como reportes de noticias o entradas en un blog. En realidad,<article>no hace nada distinto en como aparece lo que contiene, pero puede ayudar a hacer tu website más accesible a personas que usan "Screen readers".Buen comienzo y mucho éxito! Happy coding!
Marked as helpful0 - @paalvaradorSubmitted over 1 year ago@a-costasPosted over 1 year ago
Nice job on completing the challenge!
My only note would be to use
<main>tags in place of<section>.<main>adheres to semantic HTML better in this case, and<section>s are more suitable for things like articles or specific portions of a website which always require some kind of heading.Similarly, use
<h1>in place of<p class="card-description-title">to indicate that that element is more important than the paragraph tag that follows it.Nice work and happy coding!
Marked as helpful0
