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

Victor Feitosa Garcia

@VFGarciaDevRibeirão Preto, SP - Brasil230 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!

I’m currently learning...

JavaScript | React | Docker | C#

Latest solutions

  • Responsive app | CSS Grid/Flex | JavaScript + API

    #accessibility#fetch

    Victor Feitosa Garcia•230
    Submitted about 1 year ago

    I'm open and happy to receive any suggestion!!


    2 comments
  • Responsive card | CSS Grid/Flexbox | JS DOM/Loops/EventListeners

    #accessibility

    Victor Feitosa Garcia•230
    Submitted about 1 year ago

    0 comments
  • Responsive card using CSS Grid&Flexbox

    #accessibility

    Victor Feitosa Garcia•230
    Submitted about 1 year ago

    0 comments
  • Responsive landing page using CSS Grid&Flexbox and Media query

    #accessibility

    Victor Feitosa Garcia•230
    Submitted over 1 year ago

    0 comments
  • Responsive landing page using CSS Grid&Flexbox and Media Query

    #accessibility

    Victor Feitosa Garcia•230
    Submitted over 1 year ago

    0 comments
  • Responsive landing page using CSS Flexbox

    #accessibility

    Victor Feitosa Garcia•230
    Submitted over 1 year ago

    0 comments
View more solutions

Latest comments

  • Sandipan Khanra•10
    @SandipanKhanra
    Submitted over 1 year ago
    What specific areas of your project would you like help with?

    Proper use of media queries

    Social Links Profile

    1
    Victor Feitosa Garcia•230
    @VFGarciaDev
    Posted over 1 year ago

    The suggestions I would give you:

    • For better visualization (it attracts, means your are organized), you could create different .css files for each purpose:
    1. reset.css (*{margin,padding,box-sinzing}; :root; reset-list styles),
    2. style.css (normal, for visual styles) and
    3. responsive.css(media query) [you can look any of my projects to compare]
    • For better responsivity and accessibility, you should always use (rem; em; %) for font-size [primarily rem] and using px just for sizing such as margin/padding/width/height -- for width/height, try using max/min for better responsivity, but that should not be 100% of the time
    • Into the link section, you should thinks it's a clickable option that should lead you to the social medias, so you need to add the tag <a> like that:
    <ul>
       <li><a href="#">Facebook</a></li>
       ...
    </ul>
    

    but you did a great job using <ul> for that case

    • For media query, you should test the breakpoints in your layout to determine which should be the "max-width", you can create more than one if necessary. For example, you create a media to max-375px, but at 768px width screen it already start to get compressed, at 400px it's impossible to see
  • HansKevin•40
    @HansKevin
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    i need some feed back to improve my self. thanks!!!

    blog-review-card

    #accessibility
    2
    Victor Feitosa Garcia•230
    @VFGarciaDev
    Posted over 1 year ago
    1. General suggestion (HTML & CSS):
    • don't skip lines or leave it blank, it gives a bad visual feedback for other coders. Search for semantic/clean code/organization. For example:
    <div class="container-2">
       <p class="content">Puslished 21 Dec 2023</p>
       <h1>HTML & CSS foundations</h1>
       <p>These languages are the backbone of every website, defining structure, content, and presentation.</p>
    </div>
    

    2 . HTML suggestions:

    • the "active-states challenge" is supposed to be a link that you can click, so you should add the tag <a> within the <h1>, like that:
    <h1><a href="#">HTML & CSS foundations</a></h1>
    
    • never forget to add a text in the 'alt' from every 'img' for accessibility (text that shows if the image doesn't load) 3 . CSS suggestions:
    • (this one is personal, but a lot of coders use) you can create another ".css" file specific for reset styles for better semantic, but remember to put above the main style.css (You can also create a folder just to css files)
    // HTML //
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    // CSS reset.css//
    *{
       margin: 0;
       padding: 0;
       box-sizing: border-box;
    }
    
    • card/container sizing: You should use, for example, "max-height" or "min-height" instead of just "height" for better responsivity. Furthermore, you should also use (%, rem) instead of px [otherwise, it can be a big problem por small screens]
    • try to get more used with (%, rem) with almost everything(font-size, height/width, margin/padding), it's much better for responsivity.
    • the attribute ":hover", you should use "color" instead of "background-color" to look like the challenge

    I hope I can help you with any of that suggestions. I'm open to clarify any doubt and you are welcome to text me

    Marked as helpful
  • Samuele Scapellato•120
    @samu901
    Submitted over 1 year ago

    Social links page with HTML and CSS

    1
    Victor Feitosa Garcia•230
    @VFGarciaDev
    Posted over 1 year ago

    Your solution is very similar to the original design, congrats! I'm a beginner, but I think I could give you some suggestions:

    • Your responsive layout works well, but would help using (%, rem, em) instead of px to get a better responsive feedback.
    • This suggestion I got from my course monitor: Inside the <nav>, seeing that it's a group of links, you could use the tag <ul><li> for better semantic. Furthermore, there was no need for <button> because it's a link and already used the <a>. -- So, it could be like that:
    <nav>
          <ul>
                <li><a href="#">GitHub</a></li>
                <li><a href="#">Frontend Mentor</a></li>
                <li><a href="#">LinkedIn</a></li>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Instagram</a></li>
          </ul>
    </nav>
    
    Marked as helpful
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

Oops! 😬

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

Log in with GitHub