Frontend Mentor | Daniel's profile

denise•530

@moncadad

Submitted over 1 year ago

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

Checkout my code, and feel free to advice me on any changes you'd make. :)

Social Links Profile

3

Daniel•130

@tenczowy

Posted over 1 year ago

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

immaculate•60

@darkpynix-web

Submitted over 1 year ago

qr-code-component-main

2

Daniel•130

@tenczowy

Posted over 1 year ago

great job on finishing this project. Try adding temporary border to elements such as body, container... border: 2px solid red; That will help you position your elements and see where is the problem.

Marked as helpful

Gabriel Oliveira•20

@GabrielOliveiraEvangelista

Submitted over 1 year ago

Social Link Profile

1

Daniel•130

@tenczowy

Posted over 1 year ago

Consider using more semantic elements where appropriate. For example, you could use <section> instead of <div id="main"> and <article> for the header section.

Instead of using border-radius: 9999rem; to make circle out of picture you can use border-radius: 50%;

Also you are styling img in 2 places, id=img-box and img itself. You could do same thing by not having div for img at all and just styling img and adding some margin.

img{ max-width: 25%; display: block; border-radius: 50%; margin: 2rem auto; }