Skip to content
Submitted 6 months ago

css and html and js

Mohamed Ghareeb•270
@MidoGhareeb
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

i proud to how i can did it and solve this problems and i want to solve more challenge harder than this

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

how i show the share and response it in differnt device

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

Responsive Design: Ensuring that your template looks good and functions well on different devices and screen sizes. CSS Styling: Assistance with styling elements using CSS, including layout design, color schemes, typography, and responsive design techniques. HTML Structure: Help with organizing and structuring your HTML code for better readability, accessibility, and SEO optimization. JavaScript Functionality: Adding interactivity and dynamic behavior to your template using JavaScript, such as creating animations, form validation, implementing navigation menus, and handling user interactions. Accessibility: Ensuring that your template is accessible to all users, including those with disabilities, by following best practices for semantic HTML, ARIA roles, and keyboard navigation. Performance Optimization: Optimizing your template for fast loading times and better performance by minifying CSS and JavaScript files, optimizing images, and implementing lazy loading techniques.

Community feedback

  • Boris•2,870
    @mkborisPosted 6 months ago

    Hi MidoGhareeb great job on completing this challenge, here are some suggestions that might be of interest to you.

    • Avoid setting fixed heights and widths on elements as this will cause lots of issues with the responsiveness of your layout, the element's content and using padding should determine it's size. Use max-width or min-height if you absolutely have to.
    • All content should be wrapped within landmarks. Wrap a main tag around your container.
    • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.
    • Media queries should be defined in rem or em not px. Also your current media query of max-width: 450px is making part of the card to be cut out from the view, it should be increased to about max-width: 48rem 768px. I will strongly recommend you consider building using mobile first workflow. Check out this resource for Responsive Design.
    • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
    • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Hope this helps.

    Marked as helpful
    0
    Mohamed Ghareeb•270
    @MidoGhareebPosted 6 months ago

    thank you very much ,you have helped me a lot@mkboris

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord