Submitted over 1 year ago

Social Links Profile - Boostrap

accessibility, bootstrap

Hugo Hendrix Carvalho Rosa•10

@HugoHendrix

A solution to the Social links profile challenge

Preview Code

Solution retrospective

Project Feedback

During the construction of this project, I encountered some significant challenges that turned out to be an excellent opportunity to step out of my comfort zone. Consulting the documentation and delving deeper into Bootstrap and CSS elements was a valuable part of the process.

There were specific areas of the code where I wasn't entirely sure, especially regarding the utilization of Bootstrap classes. I opted for a more framework-oriented approach, reducing the need for custom CSS styles.

Furthermore, I have specific doubts about nesting styles in CSS and am eager to learn more about it. I would like to understand how to nest efficiently and what the best practices are in this context.

Regarding best practices, I still have some questions, especially concerning the order of styling. Currently, I follow the order according to HTML, but I would like to know if this approach is correct or if there are specific recommended practices.

I am open to any guidance or tips that can contribute to the improvement of these specific areas in my development as a Frontend Developer.

Code

Please log in to post a comment

Community feedback

P
Daniel 🛸•44,810
@danielmrz-dev
Posted over 1 year ago
Fala @HugoHendrix!

Seu projeto ficou ótimo!

Notei que você utilizou margin pra centralizar o card. Usar margens não é a melhor opção pra centralizar elementos.

📌 Existe uma forma melhor e mais eficiente de posicionar elementos no meio da página (tanto na horizontal quanto na vertical):
- Aplique isso ao body (Pra funcionar corretamente, não use position ou margins):
```
body {
    min-height: 100vh;
    display: flex; /*  também funciona com grid  */
    justify-content: center;
    align-items: center;
}
```
Espero que ajude!

Fora isso, você fez um excelente trabalho!

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