stevexero/social_links_profile

Frontend Mentor - Social links profile 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
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

For this challenge, I wanted mostly to learn Tailwind CSS as well as further my learning of accessibility.

The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

Links

• Solution URL: FEM Solution
• Live Site URL: Live Site

My process

• I started by copying over the starter files from the project download, as well as the design files for Figma
• I initialized git and a GitHub repo and pushed the starter files
• Initialized Tailwind CSS
• Styled using a mobile-first approach
• Refactored for accessibility

Built with

• Semantic HTML5 markup
• Tailwind CSS
• Mobile-first workflow

What I learned

• I learned how to set up a Tailwind CSS configuration, how to use the official Tailwind VS Code extension, which offers intellisense, and how to set up Prettier using the prettier-plugin-tailwindcss plugin. In the Prettier settings, I added ".prettierrc.js" to the "Prettier: Config Path," then created a file by the same name in the root of my project (also where my indec.html is), and included the following code:

/** @type {import("prettier").Config} */

module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

...and now my classes format-on-save, which is rad.

• I learned that Tailwind is pretty awesome. I can definitely use it in my work flow.

• I learned that I'll have to get better with a screen reader. I think I'd really like to sit with someone who relies on methods of accessibility to browse the web.

• I learned that the "region" role is not necessary for section elements

Continued development

I will be adopting Tailwind as my main source for styling, so I'll be diving deeper into that. I'd also like to dig deeper into how a page is broken up in terms of accessibility and how screen readers navigate through them.

I also found a section on FreeCodeCamp that focuses on accessibility. I will be working through that section.

Useful resources

• Tailwind Documentation - Very well written! Easy to navigate and understand.

Author

• Website - Steve Xero - under construction
• Old Website
• GitHub - Steve Xero
• Frontend Mentor - @stevexero
• X - @steve_xero

Acknowledgments

Big shouts to Adam Wathan for creating Tailwind CSS!