Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
4
LuizGustavo-DEV
@LuizGustavo-DEV

All comments

  • B. Lawrence Sharma•60
    @che3zcake
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to complete another task!! Track by track, slowly but surely I am going forward.

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

    There was no challenge I encountered this time as the task was straight forward. I learned about hover and applied it here as pointed out by someone in the feedback of my last work.

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

    Btw the screen shot of the page shown is wrong as there is spacing between the last <button>/<p> component and the bottom of the main div as can be seen from my live url.

    Social links profile

    1
    LuizGustavo-DEV•30
    @LuizGustavo-DEV
    Posted 2 months ago

    Congrats on completing the challenge!

    Here's some feedback regarding your solution:

    • While putting a style tag in the HTML in this specific case is OK, consider creating a separate .css file to store your styles. Not only it keeps your code more organized, but you can reuse the file in bigger projects with multiple pages. After putting your styles in a separate file, you can import it inside your HTML like this:
    <head>
      ...
    
      <link
        rel="stylesheet"
        href="./style.css"
      />
    
      ...
    </head>
    
    • Use IDs sparringly. Not only there can only be one ID per page, but it also has a high specificity in CSS. High specificty means it's harder to overwrite styles when necessary. Instead, consider using classes. They have a lower specificity and can be used as many times as you want.
    • Instead of using the p element in #buttonDiv, consider using the anchor tag (<a>). Anchor tags are the links that allow you to navigate the web, and you can set a link to them using the href attribute. Since it's a fictional person, you can put href="#" in all of them to "disable them". Alternatively, you could also use the button tag (<button>) if those buttons were to do a specific action on the page instead of redirecting you to another page or website.
    <div>
      <a href="#">GitHub</a>
      <a href="#">Twitter</a>
      ...
    </div>
    
    • Consider using more semantic tags, too. For instance, since the links section is a list of links to social medias, you could use an unordered list tag (<ul>) and list item tags (<li>) to encapsulate each link. It would look something like this in your HTML:
    <ul>
      <li>
        <a href="#">GitHub</a>
      </li>
      <li>
        <a href="#">Twitter</a>
      </li>
    </ul>
    

    You can check out my solution to this challenge here for more inspiration.

    Good luck on your future projects!

  • dinfra1•40
    @dinfra1
    Submitted 3 months ago

    Interesante cartas

    #cube-css
    1
    LuizGustavo-DEV•30
    @LuizGustavo-DEV
    Posted 2 months ago

    Unfortunately, I cannot give any feedback for this solution. The repository seems to be correct, but the preview site is completely different.

  • Christian joshua•390
    @thelastmedici
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I AM HAPPY THAT I COULD DESIGN THIS SIMPLE CARD AND I WANT TO BE ABLE TO DO SO IN LESS TIME

    BLOG PREVIEW CARD USING HTML AND CSS

    #cube-css#accessibility
    1
    LuizGustavo-DEV•30
    @LuizGustavo-DEV
    Posted 2 months ago

    Overall I think that this is a good solution, but it could be better.

    I noticed that there are a few discrepancies in the solution compared to the original design, mostly in the card's background color, spacing and font sizes. It doesn't have to be pixel-perfect, but they should be close enough to the original design.

    I also noticed that the card is not vertically centered and has a fixed margin-top. My solution features a neat way to quickly vertically center the card. Here's the link if you're interested: https://www.frontendmentor.io/solutions/responsive-blog-preview-card-using-the-cube-css-methodology-B8bMHTrkvR

    I know it has been around a full year since this has been posted and that at this point my advice may not be as useful, but if you ever wish to tackle this project again, consider checking out my solution for inspiration.

    Have a good day and good luck on future projects!

  • shimaboy•60
    @shimaboy
    Submitted about 3 years ago

    QR code DESIGN

    #accessibility#cube-css
    1
    LuizGustavo-DEV•30
    @LuizGustavo-DEV
    Posted 2 months ago

    It seems that the preview site and the repository are out.

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub