Submitted 3 months ago

Social-Links-Profile-Main by using HTML and CSS

basitali07•40

@basitali07

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am very proud of my HTML and CSS skills but unfortunately i am facing difficulty on media quaries! so i want to focus on media quaries nex time.

What challenges did you encounter, and how did you overcome them?

I face challenge on the part of the anchor tags i was not able to do the alignment correctly but after thinking and recalling my notes i become capable to do do challenge easily!

below are the code snippets at which part i face difficulty:

  
            GitHub
            Frontend Mentor
            LinkedIn
            Twitter
            Instagram

a{
    text-decoration: none;
    color:hsl(0, 0%, 100%);
    display: block;
    background-color:hsl(0, 0%, 20%);
    margin-bottom: 10px;
    width:65%;
    margin:15px auto;
    border-radius: 10px;
    padding: 15px 26px;
    font-size: 0.875rem;
    font-weight: 600;
}

What specific areas of your project would you like help with?

I need help on the css media quaries!

Community feedback

Salva•260
@salva-itPosted 3 months ago
Congratulations on completing this project here are some suggestions

Optimizing font links: You used several links to different fonts in the head section of your site, some of those links may be unnecessary, it is better to choose only one link that covers all the weights and styles of a font, this will make The number of requests will decrease and your page loading time will increase

Using the <figure> tag: If the profile picture is accompanied by a description that links to it, you can use <figure> tags to make the link more structurally clear.

using transition of tag <a>: Add a transition property to your <a> tag so that when hovered, the button's color changes gradually and smoothly.

good luck
Marked as helpful
0
basitali07•40
@basitali07Posted 3 months ago
@salva-it thank you for your suggesstions i will update these things but when i choose fonts links from google fonts there is no, one link which have all weights together that's why i am putting different links for different fonts. by the way again thanks for giving valuable suggestions
0
Salva•260
@salva-itPosted 3 months ago
@basitali07

In the file style-guide.md it is said to use the weights of 400, 600 and 700. I have sent you the link.
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
But if you want to have all the weights in the font link, you can use the link below
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
0
basitali07•40
@basitali07Posted 3 months ago
@salva-it thanks alot mam you are life saver!
0
Lord-Zethes•140
@Lord-ZethesPosted 3 months ago
Fix Tag Mismatch: Correct the closing tag for the <h2> element (</h2> instead of </h3>).

Verify Paths: Ensure paths to favicon and images are correct relative to the HTML file location.

Enhance Alt Text: Provide a more descriptive alt attribute for the profile photo.

Improve Accessibility: Add aria-labels or roles where necessary for better accessibility.

SEO Optimization: Consider adding a meta description and keywords for improved search engine visibility.

Link Completion: Make sure all social media links are functional or provide placeholders if not available.

CSS Styling: Ensure style.css is properly linked and check if styles are correctly applied.
Marked as helpful
0

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