P
@lanehowellSubmitted about 1 month ago
What specific areas of your project would you like help with?
I want to better understand how to write more clean and precise code. If you see any areas where I can improve on that please let me know!
Juan
@JEWebDevAll comments
- @JEWebDevPosted about 1 month ago
Hello @lanehowell!
Nice job! it looks great. One way you can improve your html is using semantic tags when possible. making your wrapper
divanarticleinstead.Don't worry too much on writting precise or clean code yet, that is something you will improve more and more with each project you build.
I hope you have a nice day, happy coding!
Marked as helpful0 - @luisgustavogorniakSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
It was a fun challenge, it made me test my media query knowledge, I'm very proud of being able to make it very responsive.
What challenges did you encounter, and how did you overcome them?The hardest part was adjusting the image position in the mobile version. The image had to ignore the card's previous set padding. I did some
What specific areas of your project would you like help with?positionrules to some elements correctly fit, I think it worked.It was really messy when I worked with the
positionproperty. The nextcontenttag ended up on top of the image, I had to set amargin-topfor it so it would go to the correct position. So any tips on how to deal with this would be helpful.@JEWebDevPosted 8 months ago@luisgustavogorniak
Hello Luis!
Congrats on finishing the challenge, it looks amazing and really close to the design files.
Regarding your questions about the position let me explain to you why it happend:
When you use
position: absoluteyou take that element outside the normal flow of the page. In this case theimgelement. You gave theimgelement the following styles:position: absolute; top: 0rem; left: 0; width: 100%; height: auto;This made the
Imgelement display on top of the page.And the next sibling element the
contentis behind theimgelement because "now it is the first element on the page". you can read more about absolute positioning in this freecodecamp article about itTo fix this remove the
position: absoluteand thetop: 0andleft: 0styles from theimgelement. (Don't forget to remove the padding from thecontentelement too or it will be pushed down)You don't need to absolute position it because you are already using flexbox on your main container.
`
0 - @Alexandru-EnescuSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
It didn't take me a lot of time to finish the challenge.
What challenges did you encounter, and how did you overcome them?I was confused what is the most efficient way to adjust the size of the image.
What specific areas of your project would you like help with?I'm not completely sure if my code is maintainable. For example, is it more correct to add margin to each element or to use flexbox?
@JEWebDevPosted 8 months agoHello @Alexandru-Enescu!
Well done! Let me answer your questions:
1. What's the most efficient way to adjust the size of the image?
I think the best way of adjusting the size of an image in this case is to make it full size of the parent element and adjust the parent element instead. like this:
.img{ min-width: 100% }in this case you can wrap the image with a
headertag.2. Do i add margin to each element or use flexbox?
Using
flexboxandgapwill make it easier to make changes in the long run.Imagine you have 4 components like this and want to change the spacing a bit. using
marginon each of them you will have to change it on each element of each card. if you useflexboxyou only have to change the gap property of each card container in case they have different spacing.Happy coding!
Marked as helpful0 - P@jguleserianSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
While the challenge, for the most part, was rather straight forward, it did present some challenges. I was happy about the fact that I was able to overcome these challenges (see below) and incorporate what I learned into my coding tool bag.
I was also pleased with the way the project came out to be so responsive, from the image to the font sizes and the container itself.
What challenges did you encounter, and how did you overcome them?The primary challenge encountered here was that put forth by Frontend Mentor: "The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries." At first, I tried to use percentages and/or view width, but this soon collapsed since there were not proportional (at any number) to work at all sized. What I needed were minimum and maximum numbers to limit the two extremes in size. While I researched a couple of different techniques (using
min()andmax()together, for example), I landed on theclamp()parameter. I found that this solved my issue quite nicely and opened up a whole new world of making sites responsive.The other challenge was dealing with that pesky
What specific areas of your project would you like help with?with the coder's name. Putting in the same container as everything else and setting its position to "relative" allows me to move it beneath (with a negative "top" number), but then the space it occupies still remains in the original container and interferes with the bottom padding, especially at smaller sizes. The other possibility was to set its position to "absolute" and then try to place it beneath thecontainer manually. This is what I opted for, although it took a bit of calculating to place it correctly at all sizes. nevertheless, it looks like it works for now. If anyone has a different method that I haven't thought of, I would welcome the insight.In terms of areas of help, I think I was able to do everything fairly smoothly and economically. however, if you have the time to take a look at my code, I would more than appreciate any feedback on how to improve or new angles I should consider.
Thank you for taking time to take a look at my project.
Happy coding, Everyone!
Jeff
@JEWebDevPosted 8 months agoHello Jeff!
Very well done, your HTML is semantic and structured i liked that a lot.
I see that you opted to use margins on every element to give them spacing. This works and looks great but in the long run and on bigger projects it may be difficult to make changes afterwards. For example let's say you want to change the spacing between the card's content. You'll have to change the margins one by one. To help with this you can use
flexboxlike this:#content{ display:flex; flex-direction: column; gap: 0.75rem; }This will give the content child elements a spacing of 0.75rem or 12px.
Now this will give all of them this spacing and some have more between them. In that case you can wrap them in a
divwith a class ofwrapperorcontainerthis are common naming examples, you can use what you like.This way when you would like to change the spacing between them you only change it in the parent elements instead of each element one by one.
This is only a suggestion and one way of achieving it. Give it a try an see if you like it.
-
You can also wrap your
pictureelement in aheadertag. -
You can use the
articletag to wrap your card. this way you can have multiple of them inside themain
If you want to see the above tips in action you can look my solution of this challenge.
Happy Coding!
Marked as helpful0 -
- P@kayan2004Submitted 8 months ago@JEWebDevPosted 8 months ago
Hello @kayan2004!
Nice job! it looks amazing.
I noticed you can submit the form even when the email doesn't pass the validation. if any other validation is not passed you will not be able to submit, but if only the email is wrong you can submit anyways.
1 - @GoddaybcSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I am very proud to finally be able to complete this site. i finish the html and structure the mobile like four days ago except the desktop part which game me so much pain
What challenges did you encounter, and how did you overcome them?How to place the four cards in the columns and role so that they can align the the way they displayed i was unable i started learning css grid untill someone show me the code and i understood it
What specific areas of your project would you like help with?Grid is my problem haven't understand it fully but i will
@JEWebDevPosted 8 months agoHello @Goddaybc!
Nice job!
I think i can help you understand the challenge in a different way maybe easier.
On mobile, you need a single column and on desktop you need 3 of them. To make your 4 cards into 3 columns you can:
Wrap the Team builder and Karma cards in a div, doing this will make that you have 3 elements on your container (Supervisor card, the div with the karma and team builder cards and the calculator card). Now you only have to change the flex-direction of the container from column to row and there you have it.
Give it a try
Marked as helpful0 - @echocode1Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I completed the challenge
What challenges did you encounter, and how did you overcome them?looping through the html elements by DOM manipulation was something else but we kept trying till i could complete the challenge.
What specific areas of your project would you like help with?inputs are welcome and if there is a means of writing lesser JavaScript code input are welcome
- @echocode1Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
i was able to design it.
What challenges did you encounter, and how did you overcome them?i did not really face any encounter as it was pretty easy except that some of the color with the starter file looks a bit different from the design it self like the background-color
What specific areas of your project would you like help with?review is welcome from all aspect
- @jazeemmpSubmitted 8 months ago
- P@kayan2004Submitted 8 months ago@JEWebDevPosted 8 months ago
Hello Kayan!
I liked your solution a lot! The way you structured your javascript code is awesome, looks really clean and easy to read, congratulations!
I see your design breaks on larger screens, you can fix this by adding a
max-widthproperty to yourmainelement. this will avoid that it stretches further.Very nice job! If you find my comment useful please mark it as so
Happy coding!
Marked as helpful1 - @JEWebDevSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I will update it later to fill with the json file
What challenges did you encounter, and how did you overcome them?how to fill the info with the json, i'm still figuring it out
What specific areas of your project would you like help with?Any feedback is welcomed
@JEWebDevPosted 8 months agoNow it fills with the data from the json file instead of hard coded values :D
0 - @bash4DevSubmitted 9 months ago@JEWebDevPosted 8 months ago
Hello! Nice job!
If you want you can replace the body background color for the dark slate gray one provided in the style guide
Happy coding!
0 - @Isabela-FernandaSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
Foi a primeira vez que usei JS, acho que me saí bem, mas poderia diminuir o tempo que foi gasto como um todo.
What challenges did you encounter, and how did you overcome them?PT
Um problema que eu encontrei foi que os icones das redes sociais continuavam clicaveis mesmos quando a
divem que estavam contidos estava comdisplay:none, então eu também apliqueidisplay:nonenaule resolveu.EN
One problem I encountered was that the social media icons continued to be clickable even when the
What specific areas of your project would you like help with?divin which they were contained was set todisplay:none, so I also applieddisplay:noneto theuland it resolved it.PT
Não consegui deixar o botão igual ao design fornecido, se possível eu gostaria de informações de como deixa-lo mais parecido com design fornecido. Também aceito feedbacks sobre qualquer outro ponto que possa ser melhorado.
EN
I was unable to make the button the same as the design provided, if possible I would like information on how to make it more similar to the design provided. I also accept feedback on any other points that can be improved.
@JEWebDevPosted 9 months agoAmazingly done! Congratulations on your solution! Keep up the hard work
0 - @Mystique9901Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I think I did it pretty well. I didn't take so long to center it, lol.. Maybe next time I should use another file to write css.
What challenges did you encounter, and how did you overcome them?For responsive, it was a little difficult for me to figure out the breakpoint. I did it just as I wanted. And I am not satisfied with that.
What specific areas of your project would you like help with?How many breakpoint do I need for real life website? What should I do or learn to make the website more responsive? I am still the beginner and hope you could guide me. And any other advices are also warmly welcome>>
@JEWebDevPosted 9 months agoHello @Mystique9901!
I think i can respond your questions and add some tips.
-
How many breakpoint do I need for real life website? Instead of thinking of specific device breakpoints, use them when your design needs it. What i mean is if your design starts to stretch at 700px consider making a breakpoint for said witdth. You can read more about responsive design here.
-
Avoid using fixed widths and heights, instead use
min-heightmax-heightmin-widthmax-width -
Start with the mobile design first, i find it easier to code.
-
You can use the gap property when using flexbox or css grid to give spacing between the elements from the parent, like this:
.container{ padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }In the code above first we give the
containerapaddingof1remon all of the 4 sides (top, right, bottom, left). After we give it space between theimageand the in this caseh3with thegapproperty. this way you can give spacing without having to do it manually in each element.If you have more questions feel free to reply.
I hope you find it useful! if so please mark it as useful.
Marked as helpful0 -
- @Mystique9901Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I didn't know that I can use 100% height with html tag to center the card. I guess it become a little easier than before.
What challenges did you encounter, and how did you overcome them?It took me almost an hour to finish. I think I need to practice more.
What specific areas of your project would you like help with?I always have trouble with deciding the width and height of the card. I don't know what percentage it should be.
And if there is any advice you want to give me, warmly welcome.
@JEWebDevPosted 9 months agoHello @Mystique9901!
Nice job! Here are some tips i think could help:
- Start with mobile design first, it will make it a lot easier to code, give it a try and see how it goes. I recommend this to you because that way you don't have to give the card a width or height, if you start with mobile first you just need to give the body a padding and center the card horizontally, like this:
body{ min-height: 100dvh; padding: 1.5rem 0; display: flex; flex-direction: column; justify-content: center; }This way you will have the card at the right size from the start, if you want it to grow a bit or not grow at all you can give the card a
max-widthproperty, like this:.card{ max-width: 25rem; {That way it will grow if there is space but only up to 25rem or the value you want.
- Instead of using
height: 100%usemin-height:100dvhIn this challenge the page only has one section but in a multi-section page (header, hero, about, footer)height: 100%will cut the rest of the sections because it won't grow with it's content.
If you need more help feel free to reach out! i will answer your questions the best i can.
If you find my reply useful please mark it as useful.
Marked as helpful0 - @mike15395Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that i learned grid from scratch and implemented it too. I would like to improve my speed next time.
What challenges did you encounter, and how did you overcome them?Writing responsive code using grid was challenging.
What specific areas of your project would you like help with?Fourth card(Jeanette) in the grid is not properly aligned as per design(desktop view), help me out with that.
@JEWebDevPosted 9 months agoHello @mike15395!
Very nice job!
I have a few tips to help you improve the design:
- Change the body background color to match the design
- Center the testimonials grid on the body like this:
body{ min-height: 100dvh; display: flex; justify-content: center; align-items: center; }Happy coding!
0 - @dev-paulLSubmitted 9 months ago
- @sumit1125Submitted 9 months ago@JEWebDevPosted 9 months ago
Hello @sumit1125!
Good job! Here are some tips I think could help:
Your image is not showing on the site preview. To fix this update the image src attribute like this
src="images/image-qr-code.png"If you want to match the design a bit more you can make the h1 bold like this
h1{ font-weight: 700; }To give it more space between the elements you can apply the following styles to your card:
.card{ display: flex; flex-direction: column; gap: 1rem; }This will insert space between the image, the h1 and the paragraph element without having to give them a margin or padding individually.
If you have questions feel free to reply! I will answer them the best i can
If my answer was helpful please mark it as so.
0
