All comments

• 

  P

  Stefan Holmgren•220

  @stefan-holmgrenSubmitted 8 months ago

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

  The grid system was a bit complicated to get right for the desktop view... Managed it, but feels like it could probably be done in a more efficient way.

  But it's cool to be able to do so much stuff with it.

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

  The grid system, figuring out how to merge two cells together.

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

  Well, becoming more fluent with css :D

  

  Four Card Feature Section - grid-based

  1

  51
  

  Noel Hoppe•350

  @noelhoppePosted 8 months ago

  Hi,

  1. Make your HTML cleaner:

  <h1>
  Reliable, efficient delivery
  <span>Powered by Technology</span>
  </h1>
  

  2. Nice use of CSS variables
  3. Nice idea to get this color lines on top of the cards
  4. Use grid-template-areas property to simplify your code and use flexbox instead of grid in the cards

  Marked as helpful

  0
• 

  Maryam Nasir•150

  @maryam-nasirSubmitted 8 months ago

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

  I have newly learnt Tailwind CSS framework and used in this project for styling.

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

  The most challenging thing in my opinion is to guess the spacing between the elements, font weights, padding, etc.

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

  • What other efficient approaches can I use to design the same layout?
  • Any feedback on how my code can be improved in terms of code quality and accessibility?

  

  Social links profile component using Tailwind CSS

  1

  40
  

  Noel Hoppe•350

  @noelhoppePosted 8 months ago

  Hi,

  1. Use min-h-screen on <main> to avoid bugs when the contents overflow
  2. Set p-10 to your card container because the padding is equal on all four sides
  3. "London, United Kingdom" seems to be a <p> tag
  4. Improve the link structure (use <ul> and <li>instead of <div>):

  <ul>
  <li><a href=""></a></li>
  ...
  5. Use flexbox in your card instead of using so much margin properties. 
  Happy coding!
  </ul>
  

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  P

  cloudpc7•180

  @cloudpc7Submitted 8 months ago

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

  I am most proud of learning about resposive design. I was able to perform this challenge and complete it using what I learned about working with mobile design and media queries.

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

  The challenges I face was getting the cards to line up correctly. I was able to overcome them by setting the template rows and columns using fractional units.

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

  I would like to know what I can improve in this design and if I need to make any changes in my media queries. I went back and forth between media queries to get it right but I would love the criticism and welcome any feedback on responsive design. Thank you

  

  Responsive Four Card Feature Using CSS grid and flexbox

  2

  30
  

  Noel Hoppe•350

  @noelhoppePosted 8 months ago

  Hi,

  1. Each site should has only one <h1>tag. Suggestion to improve:

  <h1>
  Reliable, efficient delivery
  <span>Powered by Technology</span>
  </h1>
  

  2. You dont need .header. Use instead headerin your CSS. Also use maininsetad of .card in your CSS
  3. grid-template-areas and grid-area can easily replace grid-row and grid-col. As conslusion your code is readable
  4. Why you have a empty *.js file in your project? :)

  1

  This comment has received 1 replyShow
• 

  Mouwvfic•210

  @mouwaficbdrSubmitted 8 months ago

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

  Learned some useful JS methods:

  .nextElementSibling .classList

  

  FAQ Accordion

  1

  30
  

  Noel Hoppe•350

  @noelhoppePosted 8 months ago

  Hi, some suggestions:

  1. div.contentshould be <ul>
  2. div.sectionshould be <li>
  3. div.section-headshould be a <button>
  4. h3should be <p>
  5. event should target <button>
  6. Use ària-expanded, aria-controlson<button>`
  7. Use ària-hiddenondiv.section-details`
  8. Toggle attribute ària-expanded` on click and if (aria-expanded == true) button + div.section-details.classList.remove(hidde).

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  darryncodes•6,370

  @darryncodesSubmitted 8 months ago

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

  Having completed the original FAQ challenge it felt only right to complete the updated version!

  I tried to make this component as accessible as possible by:

  • using semantic html and the most appropriate interactive elements
  • styling the accordion with focus states to improve the experience for those who navigate the accordion using a keyboard
  • utilising aria-expanded, aria-hidden, aria-controls attributes

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

  Any accessibility specific feedback would be very welcome.

  

  FAQ accordion - HTML, CSS, & Vanilla JavaScript

  1

  20
  

  Noel Hoppe•350

  @noelhoppePosted 8 months ago

  Hi, some suggestions:

  1. Remove display: grid properties from body, main and footer and use

  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
  

  and remove margin properties from main to center your FAQ container.

  Nice js!

  0
• 

  Kelvin Mai'Angwa•250

  @kelvinbamSubmitted 8 months ago

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

  javaScript

  

  Responsive FAQ page

  1

  30
  

  Noel Hoppe•350

  @noelhoppePosted 8 months ago

  Hi, here are some suggestions:

  1. Try to use HTML semantic elements such as <main> instead of div.container
  2. body's width should be 100% by default
  3. With the use of CSS variables your code looks cleaner (color variables)
  4. Considering js: You can put line 7-9 and 15-17 in a function and can call this function. But notice you can do this project without any js because of use of <details><summary></summary><p></p></details>tag. This is how I solved this project. Maybe you have also some suggestions to my solution of this challenge in my profile. Thanks and happy coding!

  0
• 

  c4todev•20

  @c4todevSubmitted 9 months ago

  If you saw this from the tags i added, i am sorry. I can't add simple tags. But i am always open to read some feedback. I made it responsive, but i used media queries and some CSS Flexbox. Hope you like it.

  

  Mobile first solution responsive recipe page

  1

  40
  

  Noel Hoppe•350

  @noelhoppePosted 9 months ago

  Hi a little reminder: Give each image an alt attribute. Great work and happy coding!

  Marked as helpful

  1
• 

  Fernando Batista•270

  @FernJBatistaSubmitted 9 months ago

  • I would like to know if my HTML markup is good like this, or if I could improve it somehow.

  • I think I tend to overcomplicate myself when doing the styling, is there a better way to do it taking this file as a reference?

  

  Blog Card - Flexbox, transition, hover state.

  2

  80
  

  Noel Hoppe•350

  @noelhoppePosted 9 months ago

  Your html looks well structured and you choice a very efficient way. Well done!

  0

  This comment has received 1 replyShow
• 

  David Clark•20

  @davidptclarkSubmitted 9 months ago

  Hello All,

  Here is my submission.

  I'd be very grateful for any feedback at all but particularly my use of Flexbox and spacing (flex gap or any padding).

  Thanks,

  David

  

  Blog Card Submission

  2

  60
  

  Noel Hoppe•350

  @noelhoppePosted 9 months ago

  Hi, some suggestions:

  1. Try to use HTML5 semantic elements like main, section, article, footer instead of non-semantic elements like div
  2. "HTML & CSS Foundations" should be a <h1>
  3. "Leraning" should be a <p>
  4. Remove padding-left: 20px from div.cardMatter and add padding-left: 20px to div.cardWrapper
  5. Replace height: 100% in div.container with min-height: 100vh Great work

  Marked as helpful

  1
• 

  chriszych•50

  @chriszychSubmitted 9 months ago

  This is my first challenge here based on HTML + CSS only. I would really appreciate your feedback on this code and possible improvements. Thanks in advance.

  

  Responsive order summary page using FlexBox

  2

  70
  

  Noel Hoppe•350

  @noelhoppePosted 9 months ago

  Hi, some suggestions:

  1. Remove body { margin: 25px; } and replace it with body { min-height: 100vh; }
  2. It's good practice to use a normalize.css file to reset browser's default behaviour. For example install with npm install normalize.css in Terminal and than link normalize.css to your *index.html file
  3. Remove main { margin-top: 75px; }
  4. Instead of using div's try to use HTML semantic elements such as main, element, article, section
  5. <h2>should be <h1>because it's the only heading.
  6. "Anual Plan" should be a <p>
  7. Remove marginfrom div.paymentand set gap: 20pxto div.plan
  8. "$59.99/year" should be in a `<p>``
  9. Remove div.space and give the `div.payment { margin: 0 auto 0 0; }
  10. Remove margin from div.orderand div.plan
  11. "Proceed to payment" is a <button>
  12. "Cancel" is a <button>
  13. Remove div containers from "Proceed to payment" and "Cancel" and replace it wiht button and style it with css. Happy Coding

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  @jeancy•180

  @JeancyjrSubmitted 9 months ago

  Hello

  I'd like to understand HTML structure a bit better so I don't get lost in terms of "foundation" when building a website's structure so that I won't mix all the div's.

  Also, can you have a look at my @media queries code? At some point, I've given my margins and paddings a value of 100px, is this right?

  Other than that, I'll love any feedback that can help my improvement. Cheers!

  

  Social links profile - HTML & CSS Solution + media query

  1

  20
  

  Noel Hoppe•350

  @noelhoppePosted 9 months ago

  Hi, in general it's good practice to write the css styles in a separate *.css file and link to this file from the *.html file: <link href="styles.css" rel="stylesheet"> Use rem unit instead of px unit for font-size (1rem is 16px at defaul :) Moreover, I would recommend learning the basics of CSS flexbox and grid. As a result you can make better layouts even easier without display: block and lost of margin and padding properties. Happy coding!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Madhavan•340

  @madhavan-tsSubmitted 10 months ago

  I have completed this as my 17th challenge in Frontend Mentors.

  If you have to correct any mistakes that I have done.... I am happy to recive the comments.

  Advance thanks for the comments 🫡

  

  Responsive Social links profile using HTML and CSS

  1

  60
  

  Noel Hoppe•350

  @noelhoppePosted 10 months ago

  Hi, well done! As I think, it's not good practice to override default font-size (16px) because it's hard for other developers working on this code, even if it's easier to calculate with rem:

  html {
  font-size: 62.5%
  }
  

  0