@celistialcurseSubmitted 10 months ago
Hello guys, my name is Pedro and i am a software developer a little more than a year, and i have been coding most like in django Rest Framework since i begin, so i dont have much experience with frontend, since i am intesresting in learn "React" i have been learning frontend from the basic.
I’m currently learning...HTML, CSS and JS.
Latest solutions
Recipe page
Submitted 10 months agoI need to improve the use of flexbox and learn more how i can deal with the margins.
Social links profile challenge
Submitted 10 months agoNot to confident when we speak about responsive code.
Blog card challenge
Submitted 10 months agoI don't know if i positioned the card in the correct way, like is this correct for all types of resolutions and devices ? I dont know
QR code component challenge
Submitted 10 months agoI dont think i need help on this challenge, but i am not very confident of how the link paths works in production environments, so maybe this is something to clear out.
Latest comments
- @Pedro1p0Posted 10 months ago
Your code its semantic organized, you nailed the HTML, but in the CSS you had some problems with colors, font-family, font weigh and also dimensions, the margins are not like the original, so you its nice have more atention to this details, they are very important when we speak about the frontend, it need to be beatifull as the desing porpose to us.
0 - @EngrXoftSubmitted 10 months ago@Pedro1p0Posted 10 months ago
Very nice and what clean code, congrats !
0 - @rbhgastonSubmitted 10 months agoWhat challenges did you encounter, and how did you overcome them?
I wanted to expand the list items (links) to fill the available width space. So i used width: 100% but it does not work: in fact the content itself takes the space but the rest of box model like the padding and margin become outside the parent element which is in this case the card element. Is there another method to to make the items take the space without having to use padding manually like I have done here ( to make the website more responsive). Thanks for your help
@Pedro1p0Posted 10 months agoI was unable to acess your site and repository, so i dont know, how you made the page to speak about it, but to create a space between the items you could use
margin-top: 10px;in the<a> </a>tag, creating a space between the items, in the second link the text ocupied more than he should and breaked the line, probabily because of the padding that you added, try again using the margin as i said, and give a feedback, but the desing its very similar to the original, congrats !0 - @Faisalbaig1998Submitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I made it without taking the code from ChatGPT but took help from it.
What challenges did you encounter, and how did you overcome them?The challenge I encountered was the responsiveness of the page. I'm not an expert at it, but I watched videos and used various CSS features.
@Pedro1p0Posted 10 months agoHello Faisal, i am starting in HTML, CSS and JS as well, and i would like do share some things that i learned, the first one its about the HTML semantic, its not wrong use div for all blocks elements, but we can give a semantic mean, using article, h1, p, main, figure ... in other to make our site more understandble for searchers algoritms, in my screen your webpage its fit well, but some problems with the original desing similarity, like, you do not used the correct font-family and the box-shadow its not compatible with the original, the publish date its also in font-weight: bold and its not like appear in the original desing, its little things that we need to pay atention as frontend developers, have a nice day and lets contining learning.
Marked as helpful0 - P@AStombaughSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
Kept it simple with basic HTML and CSS. I'd probably try using viewport units next time for better responsiveness if I did this again.
What challenges did you encounter, and how did you overcome them?I didn't quite figure out the text break on the third line. Mine is 4 words long, the example is only three. I also had a really hard time figuring out GitHub. I've never worked with it before. Hopefully it displays correctly.
What specific areas of your project would you like help with?Could I have simplified the code any further? Is there anything redundant or otherwise unnecessarily declared that could have saved me time and the overall amount of code?
@Pedro1p0Posted 10 months agoDoing this project again while thinking in viewport units is very interesting. I don't have much experience to say with 100% certainty, but I believe the problem with the third line is related to the font size and the space available in the box. I don't think you made anything redundant; I liked how you created variables for the colors. That makes things a lot easier in terms of code maintenance.
Marked as helpful1
