Frontend Mentor - Social links profile challenge solution

This is a solution to the Social links profile challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

This is a solution to the Social links profile challenge on Frontend Mentor.

Screenshot

Links

• Solution URL: https://github.com/aryakrishnaksh2021/challenge-social_link_profile
• Live Site URL: https://663a68a5917836343e9d04b6--cheery-donut-4a5e9a.netlify.app/

My process

I began by building the layout of the design using HTML elements. Then, I added style classes to each element. After that, I incorporated media queries for responsive design. Finally, I conducted a Lighthouse audit for performance and accessibility, making adjustments according to best practices.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I learned more about the flex properties and gap property in CSS, as well as how to use them effectively for layout. I also practiced using media query.

Useful resources

• https://www.w3schools.com/ - This helped me for understanding CSS in a better way.