Skip to content
Submitted over 1 year ago

Solution Huddle landing page with alternating feature blocks

bootstrap
Stefan Bojkovski•720
@xStephx
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)
Code

Please log in to post a comment

Log in

Community feedback

  • Petrit Nuredini•2,860
    @petritnuredini

    Congratulations on completing your Frontend Mentor project! Your dedication and hard work have clearly paid off in creating a visually appealing and functional website. Here are some best practices and recommendations to enhance your skills further:

    1. Consistent Code Formatting: Ensure your HTML and CSS are consistently formatted. This includes consistent use of indentation, spacing, and bracket placement. Tools like Prettier or ESLint can automate this process.

    2. Semantic HTML: Use semantic HTML tags where appropriate. For instance, consider using <section> for defining sections in your body content, and <footer> for the footer content. This improves accessibility and SEO.

    3. CSS Variables: Great job using CSS variables! This practice enhances maintainability. You might consider adding more variables for repeated values like margins, paddings, or common layout dimensions.

    4. Media Queries Organization: To maintain readability, consider organizing your media queries. Either include them at the bottom of your CSS file or directly within the respective selectors. Consistency in approach is key.

    5. Responsive Images: Use responsive images with srcset and sizes attributes to ensure fast loading times on different devices. This is especially important for large images in your assets.

    6. Avoid Inline Styles: As a best practice, try to avoid inline styles in your HTML. Keeping styling in your CSS files maintains separation of concerns and improves code readability.

    7. CSS Class Naming: Consider adopting a naming convention like BEM (Block Element Modifier) for your CSS classes. This makes your CSS more readable and easier to understand, especially for larger projects.

    8. JavaScript Enhancement: If you plan to add interactive elements or enhance user experience, consider using JavaScript. Even simple interactions can significantly improve user engagement.

    9. Optimization and Performance: Optimize images and minify CSS and JavaScript files for faster page loading. Tools like ImageOptim for images or online minifiers for code can be very helpful.

    10. Cross-browser Testing: Ensure your site works well across different browsers for a wider audience reach. Tools like BrowserStack can be handy for testing.

    11. Accessibility Considerations: Aim to make your website accessible to all users. This includes proper contrast ratios, alt text for images, and keyboard navigability.

    12. Keep Learning: The world of web development is always evolving. Keep up with the latest trends, frameworks, and best practices by following blogs, attending webinars, and participating in coding communities.

    Stay motivated and keep building! Every project is a step forward in your development journey. Keep exploring, learning, and coding. You’re doing great, and I can't wait to see what you create next!

    Marked as helpful
  • Kishore Kumar Mahto•500
    @iamkishoremahto

    use transitions on hover

    Marked as helpful
  • Vovka•400
    @vovka8101

    try to use width and height of 36px and padding of 9 for your icons in footer to make them circle

    Marked as helpful
  • chems eddine bourabia•150
    @chemsodev

    i like it ,steph can u please tell me how to make a readme file as yours cuz i think it's cool and i'dont know how to make it ,any tutorial?

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