A Beginner Student's Attempt

Community feedback

• 

  Kanishka Priyashantha•690

  @kanishkasubashPosted over 1 year ago

  Hello there 👋. Congratulations on completing the challenge!

  Your solution looks great, and you've done a fantastic job overall! However, I have other small suggestions to make it even better:

  HTML :

  • The <main> element should wrap around the entire component. Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.
  • For the<div> with class="main-container", you can achieve constant sizing by using max-width: 20rem.
  • For the image, a simpler approach is using max-width: 90%. This will automatically resize the image to fit within its parent container without causing distortion.
  • Always avoid skipping heading levels; Starting with <h1> and working your way down the heading levels <h2>, <h3> etc. helps ensure that your document has a clear and consistent hierarchy. Source

  CSS :

  • It's better to apply styles using classes rather than IDs. Reserve IDs for JavaScript functionality and use classes for applying styles. This helps to avoid specificity issues.
  • Avoid applying fixed height to the component. Let the content determine the height so that it can adapt to different screen sizes and content lengths.
  • Instead of using pixels in font-size, use relative units likeem or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Source.

  I hope you find this helpful! 😄 Keep up the great work! 👍

  🖥️Happy coding!

  Marked as helpful

  0

  ---

  

  SeanBailey15•10

  @SeanBailey15Posted over 1 year ago

  @kanishkasubash Wow! Thank you so much! I know I have a lot to learn, and practice makes progress, but your critique is very enlightening. I will be sure to incorporate your suggestions into my future projects. Much appreciated!

  0

  

  Kanishka Priyashantha•690

  @kanishkasubashPosted over 1 year ago

  Of course, here are some enlightening tips and step by step guide to becoming a modern Frontend Developer🧑🏽‍💻:

  1.Master the Basics: Start with a solid understanding of HTML, CSS, and JavaScript. These are the building blocks of web development, and a strong foundation in these languages is essential.

  2.Responsive Design: Learn about responsive design principles, which involve creating websites that adapt and look great on various screen sizes, from desktops to mobile devices. CSS frameworks like Bootstrap can help you get started.

  3.Version Control: Familiarize yourself with version control systems like Git and platforms like GitHub. This will enable you to collaborate with others and track changes to your code effectively.

  4.Browser Developer Tools: Get comfortable using browser developer tools to inspect and debug your code. This is a crucial skill for identifying and fixing issues in your web pages.

  5.CSS Preprocessors: Learn about CSS preprocessors like Sass or Less. These tools enhance your CSS workflow by introducing variables, mixins, and other powerful features.

  6.JavaScript Fundamentals: Understand core JavaScript concepts like variables, data types, loops, functions, and objects. This forms the basis for more advanced concepts like DOM manipulation and AJAX.

  7.DOM Manipulation: Learn how to interact with the Document Object Model (DOM) using JavaScript. This enables you to dynamically update and manipulate the content of web pages.

  8.Frameworks and Libraries: Explore popular frontend libraries and frameworks like React, Vue.js, or Angular. These tools simplify complex UI development and help you build interactive and efficient web applications.

  9.Performance Optimization: Study techniques for optimizing website performance, including reducing image sizes, minimizing HTTP requests, and optimizing code for speed.

  10.Cross-Browser Compatibility: Understand that different web browsers may render your code differently. Test your projects on various browsers to ensure a consistent user experience.

  11.Learn from Others: Analyze and dissect well-designed websites to understand how they've implemented various features. Don't hesitate to explore open-source projects and learn from their code.

  12.Continuous Learning: The field of web development is constantly evolving. Stay updated with the latest trends, technologies, and best practices by reading blogs, following experts on social media, and taking online courses.

  13.Projects and Practice: Apply your knowledge by working on small projects. Building a portfolio of projects showcases your skills to potential employers and clients.

  14.Problem-Solving Skills: Web development involves a lot of problem-solving. Embrace challenges and learn how to break down complex problems into manageable steps.

  15.Soft Skills: Effective communication, teamwork, and a willingness to learn from feedback are equally important in the development process. Collaboration and adaptability go a long way.

  16.User-Centric Approach: Always prioritize the user experience. Your designs and code should be intuitive and user-friendly.

  17.Attention to Detail: Small details can make a big difference. Pay attention to typography, spacing, color choices, and overall visual aesthetics.

  18.Experiment and Play: Don't be afraid to experiment with new techniques and technologies. Trying out new things is a great way to learn and grow as a developer.

  Remember that becoming a proficient Frontend Developer🧑🏽‍💻 takes time and practice. Stay patient, keep coding, and enjoy the journey of constantly improving your skills.

  Use this Link to track your progress with Frontend Developer Roadmap.

  I hope you find this helpful! 😄 Keep up the great work! 👍

  🖥️Happy coding!

  0
• 

  Alessandra Oliveira•710

  @itsale-oPosted over 1 year ago

  Congratulations on completing this challenge!

  I'm not a master coder myself, but for me your code is pretty clean, and the solution looks very nice.

  The minimum change I'd make is to put the font-family on the body, then you don't need to say what's the font everytime, since it doesn't change. Of course is not necessary, it's just something I prefer to do

  Marked as helpful

  0

  ---

  

  SeanBailey15•10

  @SeanBailey15Posted over 1 year ago

  @itsale-o Thanks for the tip! I appreciate you taking the time!

  1