kareem sakr

Latest comments

• 

  P

  İsmail Hasır•120

  @ismailhasirSubmitted 3 months ago

  

  Meet Landing Page

  2

  20
  

  P

  kareem sakr•190

  @kareemsakrPosted 3 months ago

  I would advise using divs as a last resort, the entire page could be built more semantically with using elements like section, figure, article and Only using divs when there's no other way. This contradicts with 90% of the tutorials online but it is inline with the HTML specification so it might be challenging to apply but it will be worth the effort.

  One of the main advantages of writing semantic HTML is that your markup becomes much more friendly to other types of user agents like screen readers, this would drastically improve the accessibility of your markup

  0
• 

  BledanIT•370

  @BledanITSubmitted 4 months ago

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

  CSS Grid gave me some headaches, I'm aware it won't be pixel-perfect. I'm just happy I made it work with the media queries.

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

  CSS Grid for desktop design, need to understand better measure units interactions.

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

  I would like to know which methods can make me organize better css classes. Thanks.

  

  CSS Grid testimonials grid solution

  1

  20
  

  P

  kareem sakr•190

  @kareemsakrPosted 4 months ago

  Great job Bledan.

  I noticed that you used many H1 tags, I suggest you don't over use that tag on your page and opt for h2 or lower. Since it's preferable to keep only one h1 per page

  For semantic HTML you could use a figure html element instead of <div class="namebox">

  https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element

  Marked as helpful

  0
• 

  Ugo Francis•150

  @Vanfrankie7Submitted 4 months ago

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

  Attempting the second challenge of this section

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

  No notable challenge that i didn't figure out

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

  Let's keep sharing ideas and constructive criticisms in the community

  

  Built with HTML, CSS (Flexbox and Grid)

  1

  50
  

  P

  kareem sakr•190

  @kareemsakrPosted 4 months ago

  Hi Ugo, great job on completing the challenge. I suggest you try to iterate over your solution until it has addressed the below point:

  1. Centering the heading section horizontally
  2. Make the background match the color provided in the syle-guide file
  3. You could just point to the images provided as below <img src="./images/icon-karma.svg" alt="Karma Icon">

  no need to paste the svg code into your HTML

  4. use css variables for the colors/sizes (example below) :root { /* Primary Colors */ --red: hsl(0, 78%, 62%); --cyan: hsl(180, 62%, 55%); --orange: hsl(34, 97%, 64%); --blue: hsl(212, 86%, 64%);

  /* Neutral Colors */ --very-dark-blue: hsl(234, 12%, 34%); --grayish-blue: hsl(229, 6%, 66%); --very-light-gray: hsl(0, 0%, 98%);

  --xxs: 0.25rem; --xs: 0.5rem; --s: 0.75rem; --m: 1rem; --l: 1.25rem; --xl: 1.75rem; --xxl: 2.5rem; --xxxl: 3.5rem; }

  Hope this helps, good luck

  Marked as helpful

  0
• 

  P

  Paisley•95

  @simpsonpaisleySubmitted 4 months ago

  

  Responsive Product Card using HTML and CSS

  1

  40
  

  P

  kareem sakr•190

  @kareemsakrPosted 4 months ago

  Great job on getting the challenge done.

  I'd reccomend attempting to keep the component split in half between the image and the rest of the content

  Another cool challenge is trying to replicate the gradient that is covering the image (If you notice it has a slightly dark shadow on top of it) https://github.com/kareemsakr/fe-challenge-4/blob/main/styles.css

  Also don't forget to add some padding to the mobile design (or update the screenshot in you repo)

  Marked as helpful

  0
• 

  Sara•160

  @saruujaSubmitted 4 months ago

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

  • For doing what I love the most Developing something and making my path of dev skills consistently

  • developing my code skills further

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

  • It was an excellent challenge and I wrote more code than previous challenges but I dint face serious challenge

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

  • As I said before the areas I would like to make more in developing my frontend skills is the Responsive part

  

  Recipe page HTML & CSS

  1

  20
  

  P

  kareem sakr•190

  @kareemsakrPosted 4 months ago

  You’ve used <div class="container" role="main" id="Home">. While this is fine for a container, consider replacing it with a <main> element since it’s wrapping the main content of the page.

  There’s an unnecessary . Remove it as there’s no opening s where possible. For example:

  Recipe Image: Consider wrapping the recipe image in a <figure> and adding a <figcaption> if you want to provide an additional caption.

  <figure class="recipe-img"> <img src="assets/images/image-omelette.jpeg" alt="A delicious omelette on a plate"> </figure> Ingredients: Use <section> instead of <div class="recipe-ingredients"> for semantic clarity. Instructions: Replace <div class="Instructions"> with <section> as well. Preparation Time and Nutrition: These could also use <section> instead of <div> to enhance readability and accessibility.

  0
• 

  Phạm Phúc Duy•60

  @DUYBEGINERSubmitted 4 months ago

  

  Social-links-profile

  1

  10
  

  P

  kareem sakr•190

  @kareemsakrPosted 4 months ago

  Greetings from Toronto, I spent 3 months in Vietnam this year. Had a wonderful time.

  I would suggest using a section instead of the first div <div class="profile"> a ul for the list of social links. This would be better for accessibility, SEO and would make the code more meaningful and conforms to the HTML specification.

  Otherwise great job, keep it up.

  0