Skip to content
OverviewSolutions
10
Comments
10
Abdallah Aboelsaoud
@Saoud2021

All comments

  • Abdallah Aboelsaoud•220
    @Saoud2021Posted 2 months ago

    Hey there!

    I've taken a look at your newsletter sign-up form code, and I've got to say, it's looking pretty solid! Here are some things I really like about your implementation:

    1. Responsive Design: You've used media queries to adapt the layout for different screen sizes. The <picture> element with different sources for mobile and desktop is a great touch!

    2. Accessibility: Your form is well-structured with appropriate labels and placeholder text.

    3. JavaScript Functionality: The email validation and success message display are implemented nicely. I like how you're toggling classes for showing/hiding elements.

    4. CSS Organization: Your use of CSS variables for colors is great for maintainability.

    5. Reset Styles: Including a CSS reset is a good practice for consistent styling across browsers.

    6. Semantic HTML: You've used semantic tags like <main> and <footer>, which is great for accessibility and SEO.

    Overall, you've done a fantastic job! The code is clean, well-organized, and follows many best practices. Keep up the great work!

    Marked as helpful
    0
  • Sam Hooker•680
    @35degreesSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    mapped out the mobile width and media queries better. I got the mobile footer overlay done but I never could sync it with the arrow button. Also frustrated the tooltip doesn't load on first click, maybe I need to add another element over it that's transparent.

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

    too much code, wrote many lines, ready to move on

    HTML, CSS FLex, Grid, JS

    1
    Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    Nice work on adding JavaScript to enhance the interactivity of your component! Let's break down what you've done and discuss some potential improvements:

    1. You're using DOMContentLoaded to ensure your script runs after the DOM is fully loaded. That's a good practice.

    2. You've set up click listeners for both desktop and mobile versions to toggle the display of the tooltip and mobile overlay. This is a good start!

    3. For the desktop version, you're toggling the tooltip visibility on click. That's working well.

    4. For the mobile version, you're showing the overlay and hiding the normal footer when clicked. That's a good approach.

    Here are some suggestions to improve and expand on what you've done:

    1. Consider using classList.toggle() instead of directly manipulating style.display. It's often cleaner and allows for easier CSS transitions. For example:

      tooltip.classList.toggle('active');

      Then in your CSS, you can have:

      .tooltip {
  display: none;
}
.tooltip.active {
  display: block;
}

    2. To make the tooltip appear on first click, you could initialize its display state in JavaScript:

      tooltip.style.display = 'none';

    3. For the mobile overlay, you might want to add functionality to close it as well:

      flexMobileOverlayButton.addEventListener('click', function() {
  footerMobileOverlay.style.display = 'none';
  flexFooterMobile.style.display = 'flex';
});

    4. Consider adding a click event listener to the document to close the tooltip or overlay when clicking outside:

      document.addEventListener('click', function(event) {
  if (!flexButton.contains(event.target) && !tooltip.contains(event.target)) {
    tooltip.classList.remove('active');
  }
});

    5. For smoother transitions, you could use CSS transitions and opacity instead of display:

      .tooltip {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tooltip.active {
  opacity: 1;
  pointer-events: auto;
}

    These changes should help make your interactive elements more responsive and user-friendly. Keep up the great work!

    Marked as helpful
    0
  • Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    How to make a profile avatar photo like yours?

    0
  • Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    Your web design solution effectively utilizes HTML and CSS to create a visually appealing and responsive layout. The semantic HTML elements enhance the document's structure and accessibility, which is fantastic. For further improvement, consider adding descriptive alt attributes to images for better accessibility and SEO. The use of a grid system in your CSS to manage layout is well done, ensuring that the design adapts nicely to different screen sizes. However, you might want to make the code more modular by using classes more consistently and reducing inline styles. Also, while the overall aesthetic aligns well with the challenge requirements, there are minor discrepancies in element positioning and styling that could be fine-tuned to better match the original design. Overall, your work is commendable, and with a few adjustments, it can be even more polished!

    Marked as helpful
    0
  • Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    Your solution to the web design challenge is impressive and demonstrates a strong understanding of HTML and CSS. The use of semantic HTML tags enhances the document's structure and accessibility, which is commendable. However, there are a few areas for improvement. For better accessibility, consider using section tags for the feature cards and ensuring that all images have descriptive alt attributes. The layout looks good across different screen sizes, maintaining a clean and responsive design. The code is well-structured and readable, but it could be made more reusable by using classes more consistently and avoiding inline styles. Additionally, while the overall design aligns well with the original challenge, there are slight differences, such as the styling and positioning of elements, which could be fine-tuned to match the design more closely. Overall, you've done a fantastic job, and with a few tweaks, it can be even better!

    Marked as helpful
    1
  • Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    Hey, nice work on this code! Your HTML is super clean and semantic - love the use of <article> and <picture> tags. The CSS looks great too, especially those custom properties. Your responsive design is on point, and that button styling is slick. Overall, you've clearly got a solid grasp on modern web dev. Keep it up!

    Marked as helpful
    0
  • Divyanshu Tiwari•110
    @Tiwari0808Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Solution to this task is easy if you know flexbox property.

    Recipe Page Solution

    1
    Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    Great work on your recipe page! You've made a solid start with semantic HTML and responsive design. Here are some friendly suggestions to take it to the next level:

    Enhance semantics: Try using <section> tags, <ol> for recipe steps, and <table> for nutrition info. Boost accessibility: Add alt text to images and consider ARIA labels. Double-check color contrast for readability. Refine responsiveness: Experiment with more whitespace and larger fonts on desktop. CSS Grid could work wonders for your layouts! Streamline CSS: Look into BEM or SMACSS for organization. Reduce repetition in media queries and embrace CSS variables. Extra touches: A print stylesheet would be handy. Consider adding microdata for SEO, and maybe jazz up that prep time section!

    Your code shows great potential. Keep iterating and you'll have an outstanding, user-friendly web design in no time!

    0
  • Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    Your HTML structure is quite good, You've done well with providing alt attributes for images, however The layout might not be fully responsive on try adding some padding to the body as the card itself on my end is latched to the top keep up the good work

    0
  • JiangJiangQingAo•20
    @JiangJiangQingAoSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    基线

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

    基线对齐

    css

    1
    Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    Your effort in creating the blog preview card is commendable, demonstrating a good start with the foundational structure. However, there are several areas for improvement. The HTML should incorporate semantic elements like <article>, <header>, <section>, and <footer> for better accessibility and SEO. Ensure all images have descriptive alt attributes to enhance accessibility. The card is currently not responsive, so using media queries and a flexible layout system like CSS Grid or Flexbox will help it adapt to different screen sizes. Adding hover effects and shadow depth changes will meet the design requirements, and Lastly, improve the readability and reusability of your code by adding comments and modularizing the CSS. Keep up the good work and continue refining these details!

    0
  • Abdallah Aboelsaoud•220
    @Saoud2021Posted 4 months ago

    nice keep up the good work Semantic HTML: Use more semantic elements like <main> and <section>. Accessibility: Improve alt text for images, use landmarks, and ensure text contrast. Responsiveness: Implement media queries and use relative units for layout. Code Structure: Externalize CSS and use CSS variables for better maintainability. Design Consistency: Ensure the implementation matches the design if deviations are identified.

    0