Skip to content
Submitted 11 months ago

Social-link profile using JavaScript, HTML, and CSS

Kyle Netterville•20
@dkdkdkd222
A solution to the Social links profile challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I'm very proud to say that I am getting better at HTML and CSS, and I'm excited to say that I have learned more about the transition effect in CSS.

I am applying links for the first time using JS, which has allowed me to understand how the methods work better.

What I would do differently next time is start to try React and see how it goes.

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

The biggest challenge that I encountered was the picture. Although the funny part of why nothing was being applied to the image, was because I didn't have a class enabled to it. LOL.

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

Specific areas of my project that I would like help with is just tips on what I should know about JavaScript, and how it can be used even more when it comes to web development.

Code

Please log in to post a comment

Log in

Community feedback

  • Alex•3,130
    @Alex-Archer-I

    Hey there!

    Cool work, it's very interesting way to make links. I've never heard about windows.location before =)

    If you don't mind, there is a couple of suggestions.

    • Semantically correct to use a tags instead of buttons here.
    • Also, since it's a list, it's better to use ul tag here with li inside.
    • main very important semantic tag and every page should contain it.
    • And you can reduce number of tags - for example, there is no need in picture here - you can style img directly. That could be said about span wrapper for the links.

    And a couple things about css.

    • You can get rid of border: none of the container - it's a default value, so there is no need to specify it.
    • There is a bit overkill with margins =) Try to remove margin-top: 100px; of the name element and margin-bottom: -88px; of the picture and you'll see that everything align just right =)
    • It's better to use rem for font sizes. It's a special values which depend on th browser font settings.

    It's totally ok, if you just want to practice something unusual, so, please take my words as hints to best practices, not criticism =)

    Oh, and about JS and web pages there are plenty of possibilities =) Almost every interactive element made with JS. Like sliders, thicker, accordions and stuff. You can even make a simple game with JS right on the web page =)

    So, congrats with completing challenge, you use creative approach, so keep going =)

  • Affan Amer•350
    @AffanRM

    Awesome work on the website! I like your unique touch about adding different background colors for different buttons. Regarding your question about Javascript, one creative and nice way I found in this project to implement JavaScript is by creating a light theme as well, and then the user can toggle between the light and dark themes. This is a simple task, but it helps get better at understanding the basic implementation of JavaScript, and it also looks really cool! I did the same for my project, and if you need any further help with how to achieve this, let me know!

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