Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
4

joaomarcosSR

@joaomarcosSR80 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Omelette recipe page


    joaomarcosSR•80
    Submitted about 1 year ago

    HTML Tags and css file semantic.


    1 comment
  • Social Links Profile


    joaomarcosSR•80
    Submitted about 1 year ago

    ..


    1 comment
  • Blog Preview Card


    joaomarcosSR•80
    Submitted about 1 year ago

    ..


    1 comment
  • Semantic HTML5 markup, CSS custom properties, Flexbox


    joaomarcosSR•80
    Submitted about 1 year ago

    About the use of tag section. Is It the best tag to this case, or I should use div?

    The id card is a good name or should be more specific? Like qr-code-card


    2 comments

Latest comments

  • David Beckham•300
    @DavidMarinho2203
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Eu gostei de usado o devtools e de ter usado os remixIcones.

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

    Meu maior desafio foi os comandos gits, pois fazia muito tempo que eu não praticava, pois estava treinando apenas JavaScript.

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

    Melhorar a velocidade de fazer o exercício.

    Treinamento CSS e HTML

    1
    joaomarcosSR•80
    @joaomarcosSR
    Posted about 1 year ago

    Great Job.

  • erdling2•70
    @erdling2
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    document structuring

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

    following the elements step by step for getting as close to the original as possible

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

    responsive design

    Course_FM_03_-_Social_links_profile

    1
    joaomarcosSR•80
    @joaomarcosSR
    Posted about 1 year ago

    Good Job. Try to use max-width to define the card size. With this you will not have problem with responsive design.

    Marked as helpful
  • Guilherme Costa•100
    @cdGuilherme
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    With this project I was able to learn about using custom fonts using CSS as well as using media query. I also experimented using CSS Flexbox.

    This is also my first time using Figma when designing the page and I tried my best to get as close to the design as possible.

    What challenges did you encounter, and how did you overcome them?
    • During this project I had trouble when spacing elements evenly inside the content div when using p and h1 elements. After experimenting with my code for a while, what worked for me was using the following CSS code:
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .category, .publishdate, .title, .description {
      margin: 0;
      display: inline-flex;
    }
    
    • I also had trouble changing the card style when hovering the title. This involves changing the parent element when hovering a child element, in this case the title. What worked for me was using the following CSS selector: .card:has(.title:hover)

    Useful links:

    CSS Flexbox formatting with p element on stackoverflow

    CSS :hover Selector by w3schools

    How to style the parent element when hovering a child element? on stackoverflow

    What specific areas of your project would you like help with?
    • In this project I wasn't able to use the custom downloaded fonts (Figtree) when deploying my project to GitHub Pages when it works just fine locally.

    This is the code I was using when importing fonts locally:

    @font-face {
      font-family: 'Figtree';
      src: url('../assets/fonts/Figtree-VariableFont_wght.ttf');
    }
    

    I managed to make it work by importing the fonts from the html document using google fonts with the following code:

    
    
    
    
    • Also I'd appreciate any tips about improving my workflow when using Git as I'm quite new to version control.

    Blog Preview Card Challenge

    1
    joaomarcosSR•80
    @joaomarcosSR
    Posted about 1 year ago

    Very well. I liked the semantic off your project.

    about the font import, try to use:

    @font-face {
      font-family: 'Figtree';
      src: url('assets/fonts/Figtree-VariableFont_wght.ttf');
    }
    
    Marked as helpful
  • nicosrf•30
    @nicosrf
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    ..

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

    ..

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

    ..

    fm-qr-code

    1
    joaomarcosSR•80
    @joaomarcosSR
    Posted about 1 year ago

    The page is returning 404.

Frontend Mentor logo

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

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