All comments

• 

  Andrine Camu•60

  @andzz-zzSubmitted 6 months ago

  What are you most proud of, and what would you do differently next time?

  I'm proud of the similarity in the look of my solution and the challenge. Hopefully I can improve on the next one

  What challenges did you encounter, and how did you overcome them?

  As you can see, I didn't create a code for the rest of the buttons because I'm not sure how to do it with javascript.

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

  I tried different codes for this but ended up putting only one because it kept on giving me errors. Question 1: Is it possible to achieve this project with vanilla javascript? If so, please let me know how. Also, if it's not possible, what frameworks/libraries should I learn to enhance my knowledge on this?

  Question 2: Am I in a good spot to learn about ReactJS & SASS ? Or should I keep on spending more time on CSS , HTML & JS ?

  Question 3: Just adding this but I didn't realize there was a solid color in the background, what is the best way to do this??

  I am also learning by using freecodecamp but any resource recommendations will be appreciated!

  Thank you much!

  

  FAQ Accordion solution

  2

  30
  

  P

  Justin Green•2,770

  @jgreen721Posted 6 months ago

  Nice work. The size and centering of everything looks good!

  So, there is a .querySelectorAll() that is good for when you want to grab more than one element. You targeted the ID which is obviously going to(should) be unique for each one but if you give them a shared classname or even .querySelectorAll("button") will work but that will grab all the buttons on the page so a shared classname is a pretty good approach. This in return though will give you an Array (like object) so you will then have to iterate through and attach your function to each one. Easier done than it sounds.

  Example:

     var btns = document.querySelectorAll('.yourBtnClassName`)
   // theres a few ways to iterate through but this is pretty clean
     btns.forEach((button,index)=>{
              button.onclick = showMore()
  })   
  
  

  Now from there, all the buttons will have the showMore() function assigned to it and should toggle that same top answer so there is still some work to do but that .querySelectorAll() should hopefully add a new tool in your JS-ing. You can obviously use it on your answer sections as well and then from there maybe tracking what number (which is what index is by the way -- when you loop through something you get A) the item and B) the number/order in the list of which it is -- starts at 0,1,2,3...) button was clicked with what answer section to change your display on (2nd btn click, change 2nd answer section,etc). lol. Sorry. I know that was kind of a lot but if any of it makes sense or is helpful then! lol.

  So far as the other tools, never hurts to explore but like with anything, the fundamentals will always be pretty helpful in the long run of understanding/ability. Sass/CSS may be a bit more forgivable but Id encourage some time with vanillaJS. Again, nice work and Happy <coding/> 🙂

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Marlon Melo•20

  @marlonszmSubmitted 9 months ago

  Guys i think that my solution looks pretty close to what is demmanded, but i've had some problems to insert colors in the ordered list (the numbers) and insert horizontal lines in the grid. Hope you guys enjoyed my solution and give it a feedback!

  

  Recipe Page - My Solution

  2

  60
  

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  Nice work on this. I did notice you had a fixed width on your recipe card which doesn't always play well with screen responsiveness. Its generally not a bad idea to put a max-width: attribute on their though to prevent it from getting too big though, so max-width:650px would probably work. So far as one of your issues with a borderline on the nutrition portion, I would probably parent each <p> and <h3> up with its own li or div and give that element a little padding and and a borderBottom. You could probably border bottom the 2 elements long as there is no margin. Other ways certainly but just as a starting off suggestion. Hope some of it it helpful and again nice work!

  0
• 

  nade12209•70

  @nade12209Submitted 9 months ago

  if you see something I can fix, write to me

  

  day3

  2

  100
  

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  Hey nice work on this! One possible suggestion is I noticed pretty specific margin values on your .okvir element. I'm guessing this was to center it but the problem with specific values is they generally don't leave much room for responsiveness(size of users screen). Applying the display:flex, alignItems:center, justifyContent:center on the body (or parent container) should fix that and then eliminate any need for the margin values. Also maybe adding a :hover effect for your buttons. Again though, nice work. The design/card itself is 👍! 🙂

  0
• 

  shawky sobhy•340

  @shawkysobhySubmitted 9 months ago

  Instead of static page and only filter I make list can.be updated by

  • Creating new jobs
  • Update jobs list
  • delete jobs
  • pagination Using supabase as backend provide API

  Filter feature not added yet

  

  Job listing app as full stack app

  2

  40
  

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  haha, yea I hesitated on even saying since again, your code very much implied this wasn't your first day with it, and I've certainly done it a few times myself thinking "not exactly a site high on the webs radar" but figured with it on FEMentor, may as well mention it! But yea, good stuff on swapping it out and again nice work overall! 😎

  1
• 

  shawky sobhy•340

  @shawkysobhySubmitted 9 months ago

  Instead of static page and only filter I make list can.be updated by

  • Creating new jobs
  • Update jobs list
  • delete jobs
  • pagination Using supabase as backend provide API

  Filter feature not added yet

  

  Job listing app as full stack app

  2

  40
  

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  hey man, really nice work on this. The UI and code both, good stuff! I did notice the creds were in plaintext and well, I kind of had curious fun with that and added a job via that route. 🙂 It was just a playful experiment but you might want to tuck those into an .env file! Again though, 👍 on the code overall. Pleasure in checking out.

  1

  This comment has received 1 replyShow
• 

  Terry•10

  @TerryHCollinsSubmitted 9 months ago

  I made this mobile first, so the preview does not show the correct result as it shows desktop first!

  

  QR Challenge - Mobile Only

  1

  40
  

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  Nice work on finishing the challenge! Yea, looks great on mobile! You might want to put a max-width on either your card (I believe you have as <main>) or on your image. Ultimately, just may want to prevent the image from going a little too big on devices that aren't mobile. I think text-align:center in the main element styling might also help but just a suggestion. Again, nice work though! 🙂

  Marked as helpful

  0
• 

  MonicaPoloni•60

  @MonicaPoloniSubmitted 9 months ago

  Hello, this was my first project. I'm starting with HTML and CSS and would be grateful for any suggestions for improvement. Thanks!

  

  Social Links Perfil

  4

  110
  

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  Nice work, especially if just starting out. Everything is centered and positioned nicely! Only real obvious suggestion would be to add some hover styling for your buttons with something like cursor:pointer added to your button css and then button:hover{ whatever you like -- I believe turning the background to green is their suggestion}. Unless it was intentional to leave them more as just list items, in which you might just want to convert that part into an <ul><li>...</ul> section for the user readability, conventions yada yada. lol. Main design though is 👍 so again nice work!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  shivam kumar•670

  @578shivamSubmitted 9 months ago

  i have mobile notch hard no idea css

  

  Frontend Mentor - Chat app CSS illustration

  1

  50
  

  P

  Justin Green•2,770

  @jgreen721Posted 9 months ago

  Nice job on this kinda tricky challenge. Looks good. I did notice a fair amount of specific width/heights on some of your elements in and general that can be a tricky path. It's generally better to try to style elements with padding/margin and allow the content to naturally fill an element. Putting on limits (ie: max-width min-width) can be alright ,or there is a pretty helpful function called clamp() that takes 3 size arguments and handles responsiveness pretty well. That one is probably best for larger size containers/cards and less for your message/text divs but its still worth mentioning just cause its usefulness. Anyways, just couple suggestions but I appreciate CSS is a many ways to skin a cat type medium so take it for what its worth and again nice work!

  0

  This comment has received 1 replyShow
• 

  Patrick Odida•30

  @PatrickodidaSubmitted 10 months ago

  While building this component, I used an <h3> heading for the first part of the sentence and a <p> element for the second part. Is it best practice to do that, or should I have used a <p> element throughout and a <span> element for the second part of the sentence? Thanks.

  

  Mobile First Design using HTML and CSS

  4

  80
  

  P

  Justin Green•2,770

  @jgreen721Posted 10 months ago

  Your approach of <h3> and <p> tags was a good one. I'm not going to pretend to be an expert but the span element is a special inline element and isn't so much related to text-size. Inline meaning it won't 'block' down to the next level. A simple manner I'd use in is with-in a text element where you'd like to style a portion of the text differently.

  <h3 class='red-text'>Here is some text to be red, <span class='fadein-animation'>this part can fade-in </span> but this and the beginning portion wont.</h3>

  lol, dumb example but hopefully it helps a little. Certainly no shortage of long winded explanations on all of the elements to learn more but yea, your approach here was good.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Neel Mishra•240

  @Neel-07Submitted 10 months ago

  I recently completed a project creating a stats preview card component using basic HTML and CSS, and I would greatly appreciate your feedback. I'd like to know if there are any mistakes or areas for improvement that you noticed. Please feel free to point out any specific aspects that could be enhanced or corrected. Your input would be incredibly valuable in helping me refine and enhance my project. Thank you in advance for taking the time to provide your feedback

  

  Stats-Preview-Card-Component

  1

  40
  

  P

  Justin Green•2,770

  @jgreen721Posted 10 months ago

  Nice work completing the challenge. Looks good! You might want to add something to your container css that keeps it in the center of the screen. While your max-width is pretty wide, on a large enough monitor your container will eventually just be on the left side. I believe margin:0 auto would be a quick fix but there are other ways. Also, might want to add a @media query in your CSS and implement some responsiveness for mobile/smaller devices where you can set your card to flex-direction:column so it'll be more tailored for a vertical viewing experience (again, mobile like devices). Again, good work overall! 🙂

  0
• 

  Subhi C•180

  @Subhi-cSubmitted 10 months ago

  I built this project using React and hosted it on GitHub Pages using gh-pages. However, I encountered an issue where the images I used did not load properly. I could use some help and insights from the community for my project

  

  React Notification page

  1

  50
  

  P

  Justin Green•2,770

  @jgreen721Posted 10 months ago

  I believe you want your assets in the public folder as thats the one the browser 'can check'. You might need to append a ./ to your data img filepaths to also indicate its a file but I'm not sure and think?? that might be more for CSS and if you use background-image:url(). For sure, try the first step and if necessary, implement the 2nd but I think the first should get you images. Nice work on the rest though, the styling looks 👍

  1
• 

  Nikola Petkovic•90

  @nikolapetkovicdevSubmitted 10 months ago

  I needed a bit more time for this task, probably because I didn't create a proper plan and work sequence. The table at the end and the bottom lines took the most time. Nevertheless, I managed to complete everything. My intention was to make the page identical to the given one. I hope I succeeded in that. Please write to me if there's anything I could have done better or if I made any mistakes. Your feedback would mean a lot to me for further improvement and work.

  

  Responsive landing Recipe page using HTLM and CSS

  2

  80
  

  P

  Justin Green•2,770

  @jgreen721Posted 10 months ago

  Hey, nice work on this! Nailed the recipe-card stylings! I think?? with you giving a hard-value width setting to your body as 1440px then it prevents responsiveness so far as your recipe card staying centered when the screen width is smaller. A quick fix is 'max-width:1440px' and therefore the body will adjust to the view/screen width and should maintain the centering values you've applied to the recipe card. It may then allow you to nix the 80% adjustment as I think percents can be dicey to work in CSS in general but even without that debate, the earlier suggestion should have it so your screen just adjusts with the view-width and just cuts off once its larger than 1440px which I believe is the desired effect. Nice work though! 🙂

  Marked as helpful

  1