Latest solutions
- Submitted 24 days ago
My Solution for single price grid component!
#pure-css- HTML
- CSS
Hello! I'm excited for share with you my solution for the single price grid component challenge! 😁
In this challenge, I didn't face any major problems building it. 🥳
Despite this, I am open to opinions that help me improve!😊
- Submitted about 1 month ago
My solution for Stat Preview Card Component Challenge!
#pure-css- HTML
- CSS
Hello! 👋
I'm excited for shared my solution with you! 💕
In this challenge, I learned how to add an overlay to the image.😲 This was challenging and exciting!😀
Other than that, I didn't experience much difficulty... except for a single point: for some reason, even using the same font-family, font-size, font-weigth, ...., specified in Figma, the result obtained, in some points, doesn't seem the same as the design....😭
I tried to make it as similar as I could, but it wasn't perfect. 😓
Can anyone help me understand why? I did a lot of research but nothing helped me. 😣
- Submitted about 2 months ago
My Solution for Order Summary Component Challenge!
#pure-css- HTML
- CSS
Hello! 👋
I'm excited to share with you my solution for the order summary component challenge. 💕
In this challenge, I've learned how to stretch a image in background with the background-position property.😁
I don't think I had many difficulties, but I have two more general questions:
-
Is there any way to more easily identify when I will and will not need to work with flexbox? 🤔
-
I know that it is recommended to work with font-size using rem/em for responsiveness reasons, but what about other properties such as paddings, margins, borders? Should I work with rem/em or can I work with px? 🤔
By the way, any suggestions or recommendations are welcome.😊
- Submitted about 2 months ago
My Solution for the Profile Card Component Challenge!
#pure-css- HTML
- CSS
Hello! 😁
I'm excited for shared with you my solution of the profile card component challenge! 💕
In this challenge, I learned that it is possible to use the background property to add not only colors, but also images and even position them! 🤯
By the way, one of my difficulties was precisely regarding how to position the images in the background. Unfortunately, the way I did it, as you reduce the width of the browser tab, the images will move in the background. Is there any way to keep them fixed but responsive? 😅
Another problem I encountered was the positioning and distancing of the round image with round edges. I saw that it was possible to use outline instead of border, however, I still had some difficulty distancing myself from the elements that came below, is there a "correct" way or better than the one I tried to do? 🤔
Any other recommendations, suggestions, will also be welcome! 😊
- Submitted 2 months ago
One more Challenge: NFT Preview Card Component
#pure-css- HTML
- CSS
I had some difficulty in building the mobile design. The h1, right below the larger image container, seemed to be much further away than it should be. The only solution I saw was to reduce the margin bottom of the image container to 1rem/16px. By doing this, my mobile solution matched Figma's. However, I wonder what I could have done wrong, I couldn't figure it out. Or was the problem somewhere else? 🤔
Latest comments
- @gopaladhikariSubmitted 5 months agoP@RogeanCostaPosted 2 months ago
Hi! Congratulation for the result! 👏
By the way, it seems that Inter is not being applied. Another sans serif is being used instead. I suggest trying to understand why this is happening and perhaps using the font files provided through @font-face. Using @font-face, you just need use this:
@font-face { font-family: 'Inter'; src: url(../fonts/Inter-VariableFont_slnt_wght.ttf); }
The image also appears to be larger in your result than in the design. It is not common to insert the image dimensions through attributes in the img itself; the recommended method is to inform the dimensions through CSS. In fact, a good code practice is to not insert img elements directly into the HTML, but rather to insert them inside a specific div. Then, with this div, you can limit, restrict the image dimensions. Something like this:
<div class="img-container"> <img class="img" src="assets/images/avatar-jessica.jpeg" alt="Avatar" /> </div>
.img-container { width: 5.5rem; } .img { display: block; max-width: 100%; border-radius: 50%; }
Don't give up, continue your studies, always improving your skills! 😁👋
Marked as helpful0 - @JSFGDevSubmitted 2 months agoWhat specific areas of your project would you like help with?
just all in general, documentation, good praxis, etc
P@RogeanCostaPosted 2 months agoHi! 👋
First of All, Congratulation for the Result! 🎉
I have some recommendations for you 😁:
1) Design
There are some parts of the interface you built that don't look very similar to the design. You can see clearly differences in weight and even in the border. This exercise is part of the first learning path, which includes a .fig file what can help you a lot. I suggest you use it to build interfaces that are as similar as possible.
I saw that you used google fonts to get the correct font. You could also have used the font files provided in the directory files provided. Research how to use them and include them in your interface. Tip: Search for @face-fonts. 😉
2) HTML
Your HTML code is very well constructed, I liked it! 👏
3) CSS
Your card doesn't seem to be completely centered, you seem to have had some difficulty trying to center it on the body with grid and then apply flexbox to the card itself. For this centering part, I suggest you always keep this resource saved, which I think is wonderful:
By the way, I like the way you defined the colors as variables! 😊
Don't give up! Continue your studies, always trying to improve! 🦾
Marked as helpful1 - @macodingwebSubmitted 3 months agoP@RogeanCostaPosted 2 months ago
Congratulations on the result! It looks very similar to the design. 👏
I recently did this challenge too, the only advice I can give you for now is to not overuse
<div>
and always try to use elements semantically, such as<p>
for paragraphs and<h1-h6>
for titles. 😁Try to use
<div>
only to group elements whose grouping has no specific meaning, there is no element that represents such grouping. For example, for the website header or the introduction of content, we can use<header>
instead of using<div>
. 👋Marked as helpful0 - @StephengrammySubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Thanks to using the positioning selector in CSS I was able to center the content and make it responsive on all platforms so that helped me skipped the need of writing media query code
What challenges did you encounter, and how did you overcome them?First off I had issues with aligning my main-container div to the center of the page I had to look up the best way to position it on and what i found worked like a magic and it made the page responsive on all platforms .
Secondly getting the perfect width for the image was a little bit tough I had to try a lot number in px and % .
Padding too was something i had to retry a couple of time cause the sub-container div was gluing to the side of the main-container div
What specific areas of your project would you like help with?I would love see someone else CSS code and how they structured it
I definitely don't know to use figma and i was unable to open the figma design tried importing to the figma app but got an error message saying file is unsupported
P@RogeanCostaPosted 2 months agoI just learned from your code a new way to center a container totally in the center, I had never thought of this possibility of using absolute positioning 😮.
I recently did this challenge too, and I used the tactic of defining a container with a dimension smaller than that of the parent container, the body in this case (which seems obvious when looking at the design provided) and using margin-left and margin-right in auto. Having both in auto, makes them both have the same size and then the container is centered horizontally, however, I couldn't figure out what to do vertically 😅. I did something like:
.main-container { width: 280px; margin: 50px auto;
There is also a simple way to center with flexbox, but I believe that this already involves responsive design and is outside the scope of the challenge 🤔.
By the way, about the .fig provided, I was able to open it in Figma online by dragging it onto the website, WITHOUT HAVING ANY PROJECT OPEN, just on the drafts screen. I don't usually use the application, so I can't give you information on how to proceed, but check if you can open it on the website, the design they provided was a great help to me. ✌
Congratulations for the result! 😁
0