All comments

• 

  Luís Gustavo Gorniak•160

  @luisgustavogorniakSubmitted 4 months ago

  What 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 position rules to some elements correctly fit, I think it worked.

  What specific areas of your project would you like help with?

  It was really messy when I worked with the position property. The next content tag ended up on top of the image, I had to set a margin-top for it so it would go to the correct position. So any tips on how to deal with this would be helpful.

  

  Recipe page

  1

  50
  

  P

  Juan•480

  @JEWebDevPosted 4 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: absolute you take that element outside the normal flow of the page. In this case the img element. You gave the img element the following styles:

  position: absolute;
  top: 0rem;
  left: 0;
  width: 100%;
  height: auto;
  

  This made the Img element display on top of the page.

  And the next sibling element the content is behind the img element because "now it is the first element on the page". you can read more about absolute positioning in this freecodecamp article about it

  To fix this remove the position: absolute and the top: 0 and left: 0 styles from the img element. (Don't forget to remove the padding from the content element 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
• 

  Alex Enescu•170

  @Alexandru-EnescuSubmitted 4 months ago

  What 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?

  

  Blog preview card

  1

  20
  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Hello @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 header tag.

  2. Do i add margin to each element or use flexbox?

  Using flexbox and gap will 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 margin on each of them you will have to change it on each element of each card. if you use flexbox you only have to change the gap property of each card container in case they have different spacing.

  Happy coding!

  Marked as helpful

  0
• 

  P

  Jeff Guleserian•480

  @jguleserianSubmitted 4 months ago

  What 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() and max() together, for example), I landed on the clamp() 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 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 the container 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.

  What specific areas of your project would you like help with?

  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

  

  Blog Preview Card - My Solution

  1

  40
  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Hello 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 flexbox like 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 div with a class of wrapper or container this 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 picture element in a header tag.

  • You can use the article tag to wrap your card. this way you can have multiple of them inside the main

  If you want to see the above tips in action you can look my solution of this challenge.

  Happy Coding!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  P

  kayan•630

  @kayan2004Submitted 4 months ago

  

  Responsive Contact Form

  1

  20
  

  P

  Juan•480

  @JEWebDevPosted 4 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

  This comment has received 1 replyShow
• 

  OJIJEVWE PETER GODDAY•100

  @GoddaybcSubmitted 4 months ago

  What 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

  

  Four-card-features-for-desktop-mobile

  2

  50
  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Hello @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 helpful

  0
• 

  Ejiofor John•450

  @echocode1Submitted 4 months ago

  What 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

  

  Responsive FAQ-accordion-main (1st-attempt)

  1

  40
  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Nice job!

  1
• 

  Ejiofor John•450

  @echocode1Submitted 4 months ago

  What 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

  

  Responsive interactive-rating-component(1st attempt)

  1

  50
  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Good job! it looks very close to the design

  1
• 

  Mohammed Jazeem Mp•200

  @jazeemmpSubmitted 4 months ago

  

  tip calculator app solution

  1

  20
  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Very nice job!

  0
• 

  P

  kayan•630

  @kayan2004Submitted 4 months ago

  

  Time tracking dashboard using CSS grid and some javascript

  1

  10
  

  P

  Juan•480

  @JEWebDevPosted 4 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-width property to your main element. 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 helpful

  1

  This comment has received 1 replyShow
• 

  P

  Juan•480

  @JEWebDevSubmitted 4 months ago

  What 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

  

  results summary component with html and css

  1

  40
  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Now it fills with the data from the json file instead of hard coded values :D

  0
• 

  Bashir Umar Idris•150

  @bash4DevSubmitted 4 months ago

  

  RWD, JS

  1

  10
  

  P

  Juan•480

  @JEWebDevPosted 4 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 Fernanda•170

  @Isabela-FernandaSubmitted 4 months ago

  What 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 div em que estavam contidos estava com display:none, então eu também apliquei display:none na ul e resolveu.

  EN

  One problem I encountered was that the social media icons continued to be clickable even when the div in which they were contained was set to display:none, so I also applied display:none to the ul and it resolved it.

  What specific areas of your project would you like help with?

  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.

  

  Article preview component solução

  1

  40
  

  P

  Juan•480

  @JEWebDevPosted 4 months ago

  Amazingly done! Congratulations on your solution! Keep up the hard work

  0