Submitted 9 months ago

Social Links Profile - Frontend Mentor Challenge Solution

Bruck Demissie•40

@Bruck-3

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Social Links Profile - Frontend Mentor Challenge Solution

This project is a solution to the Social Links Profile challenge on Frontend Mentor. The challenge aimed to enhance coding skills by building a realistic project focusing on creating a social links profile.

Overview

The Challenge

Users should be able to:

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

Links

Note: Analytics have been implemented using TinyURL for tracking purposes.

My Process

Built With

In this project, I used various technologies and techniques, including:

Vue 3 - JS Framework
TailwindCSS - For Styles
Vite
Mobile-first workflow

What I Learned

Sample Code I liked

   <div class="flex flex-col px-[25px] my-[30px]">
              <a v-for="(link, index) in data" :key="index" :href="link.link" target="_blank" class="w-full h-[45px] bg-grey hover:bg-green  text-[14px] border-0 text-white hover:text-grey font-bold rounded-[7px] my-[7px] cursor-pointer flex justify-center items-center no-underline"> {{ link.name }}</a>
      </div>

Author

Website - Bruck Demissie
Frontend Mentor - @bruck-3

Community feedback

Daniel 🛸•44,310
@danielmrz-devPosted 9 months ago
Hello @Bruck-3!

Your solution looks great!

I have a couple of suggestions (about semantic HTML) for improvement:

📌 First: Use <main> to wrap the main content instead of <div>.

Think of <div> and <span> in HTML like plain boxes or placeholders. They're handy for holding content, but they don't tell us anything about what's inside or what it's meant for on the webpage.

📌 Second: Use <h1> to <h6> for titles instead of <p>.

The tag <p> is meant for paragraphs. For titles, we have the HTML headings (the tags <h1> to <h6>).

Here's a quick guide on how to use them:

Unlike what most people think, it's not just about the size and weight of the text.

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading.

<h6> defines the least important heading.

Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!
Marked as helpful
1
Bruck Demissie•40
@Bruck-3Posted 9 months ago
Hello @Daniel 🛸!

Thank you for your feedback! I've incorporated your suggestions into my solution, using <main> to wrap the main content and replacing <p> with the appropriate heading tags <h1> to <h6>.

I appreciate your thoughtful advice and the time you took to review my project. If you have any more suggestions or thoughts, feel free to share.

Appreciate your time! Best Regards,
1

Please log in to post a comment

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