Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social Links Profile

deniseā€¢ 230

@moncadad

Desktop design screenshot for the Social links profile coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


When y'all build these projects how do you usually go about determining what a good name for classes, id's, variables etc ? Additional question what is your favorite framework / libraries to use and why ?

Community feedback

Danielā€¢ 130

@tenczowy

Posted

Class names should be descriptive and convey the purpose of the element they represent. Aim for clarity and avoid using vague or overly generic names. Instead of using single-letter or abbreviated names like "s", "btn", or "div", opt for more meaningful and explicit names that reflect the element's role in the document. For instance, "submit-button" or "navigation-bar" provides more context and clarity than "btn" or "nav."

As for the framworks/libraries. At the moment I am not using any, since I've started my jorney with web development not that long ago I am trying to build a good fundation by understanding main concepts in HTML and CSS and be comfortable using those 2 technologies. I belive that even tho there are technologies that make building this projects easier and faster, the basics should not be skipped.

As for this project, good job, everything looks just spot on. Highly recommend using REM instead of px values. Using REM units for font sizing makes the text more accessible to all users. People can change their default font size in their web browsers. With REM units, your design will automatically adjust to the user's preferred font size. At first it is not intuitve but after some time you will find it easy to use rem values almost for everything, that will make your websites more adjustable and accessible.

Marked as helpful

2

deniseā€¢ 230

@moncadad

Posted

@tenczowy Thanks for the feedback, I'll be going back over it and convert it to REM

0
Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @moncadad!

Your project looks great!

I have one suggestion for you to improve it even more:

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

šŸ“Œ Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

0

deniseā€¢ 230

@moncadad

Posted

@danielmrz-dev thank you for the feedback :)

1
P

@ZPolikarpov

Posted

Hey there!

When naming things, you usually go by the idea of "If someone else were to read this code and continue working on my project, would he understand what is happening here?". There are many possibilities of naming things, best you try sticking to known conventions. Remember, the "someone else" looking at your code might be the you in a couple of months :) .

Libraries and Frameworks are tools that you use for a specific purpose (usually saving time). Why would you build something from scratch when you can use a framework? What you need to consider is the purpose behind using the framework, the upsides and downsides and view it relative to the scope of your project. A big and fickle project where requirements often change and that has a lot of "extras" to it would probably require a more flexible framework that is easier to customize compared to a simple landing page that won't get touched for a couple of years. As Danny said if you're learning how to code it's mostly beneficial to first understand the basics, so it's probably best to start off without using frameworks or libraries unless you already know which one you'd use as your main library in the future. What I do recommend is trying out SASS/SCSS instead of css. I think it helps with structure and overview a lot especially once you get to larger projects with hundreds of classes.

As for your project it looks great. One thing I would change is using links <a> instead of <div>s for your social profile links, as it improves accessibility and is also easier to implement the desired logic to via the href = "https://yourwebsite.com" property that will forward you the the website on click.

Happy Coding!

Marked as helpful

0

deniseā€¢ 230

@moncadad

Posted

@ZPolikarpov thanks for the feedback, I'll go ahead, and make those changes

0

Please log in to post a comment

Log in with GitHub
Discord logo

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