Social-link profile using JavaScript, HTML, and CSS

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  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 =)

  1

  ---

  

  Kyle Netterville•20

  @dkdkdkd222Posted 4 months ago

  @Alex-Archer-I no no, I really appreciate it! Yeah the centering of the divs were frustrating me and used the margins to align it, but I felt I was just repeating code over and over.

  I saw your projects and I must say I’m very impressed. So I’m definitely taking your advice here😂

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @dkdkdkd222

  Hey, thanks, but I'm a self-taught and definitely didn't follow best practices somewhere =)

  And what about centering - you did quite right with flex. By the way, flex has a gap property which can create, well, gaps between flex elements without margins. If you need equal spaces it's a very convenient way.

  0
• 

  Affan Amer•370

  @AffanRMPosted 4 months ago

  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!

  1

  ---

  

  Kyle Netterville•20

  @dkdkdkd222Posted 4 months ago

  @AffanRM thank you, that means a lot! It really does make it more easier to learn when you make fun styles with it. How long have you been doing JavaScript?

  1

  

  Affan Amer•370

  @AffanRMPosted 4 months ago

  @dkdkdkd222 I have been learning it on and off as I am currently pursuing a bachelor's degree in computer science, so I have been meddling with various tools and technologies. To be specific, I first started learning JavaScript around 4 years ago but recently had some time on my hands, so I have been focusing on it properly.

  0

  

  Kyle Netterville•20

  @dkdkdkd222Posted 4 months ago

  @AffanRM that's amazing! I am also pursuing a bachelor's degree in computer science. So far, I've learned Java in college, but over the summer I took the time to learn some JavaScript and web development. Truly makes me happy to see people with the same mentality learning things on their own. Thank you for continuing to inspire me to code! I hope you become successful in the future. :)

  0

  

  Affan Amer•370

  @AffanRMPosted 4 months ago

  @dkdkdkd222 Thank you for the kind words! I wish the very best for your future as well :)

  0