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

Ugo Francis

@Vanfrankie7150 points

I am passionate about Web Development and constantly seeking ways to improve my skill set. I major on the Front End area.

Latest solutions

  • Built with HTML and CSS (CSS Grid)


    Ugo Francis•150
    Submitted 8 months ago

    To continue learning to build responsive projects with best practices my field.


    1 comment
  • Built with HTML, CSS (Flexbox and Grid)


    Ugo Francis•150
    Submitted 8 months ago

    Let's keep sharing ideas and constructive criticisms in the community


    1 comment
  • Responsive HTML and CSS techniques


    Ugo Francis•150
    Submitted 8 months ago

    Keep learning better ways and best practices to buid things


    1 comment
  • Responsive HTML and CSS guidelines


    Ugo Francis•150
    Submitted 8 months ago

    To be getting ideas of up-to-date best practices from the community


    1 comment
  • Social card


    Ugo Francis•150
    Submitted 9 months ago

    It is definitely on centering my container vertically. setting both the tag and the container to flex, flex direction: column; justify-contents and align-contents to center doesn't work.


    2 comments
  • Responsive blog card using flexbox


    Ugo Francis•150
    Submitted 9 months ago

    2 comments
View more solutions

Latest comments

  • Katarzyna Kaźmierczak•260
    @KasiaKaz14
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    The CSS grid was the most complicated element in the whole project because I have never learnt this feature, so needed to hang out with it more. I am delighted I could deal with it, and arrange the sections in a proper way. The question what I could do differently is hard in this case because I don't know what I could do in another way. Maybe I could have finished project faster, and learnt more about the CSS grid.

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

    I think that the answer is included in the first reply. The CSS grid was the biggest challenge for me. I haven't known it earlier, so could'nt arrange the grid as it was shown on the template. To overcome the problem I had to spend more time to learn how does it actually work, and try to apply it for the first time. I must admit I also need to use the Internet to find a solution for this question. After a half an hour I managed to resolve my problem and set all the sections according to the template.The key to the solution was grid-template-areas.

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

    If someone could recommend me some good websites, apps or another source to learn more about CSS grid I will be grateful. Or maybe someone has a better way to set all elements properly

    Responsive sections using CSS grid

    1
    Ugo Francis•150
    @Vanfrankie7
    Posted 8 months ago

    Your result is great, the only issue is your card getting stuck at the top of the screen. After checking your code, i found out that maybe the cause is, you used align-items: center; instead of align-contents: center. it is flexbox that uses align-items to center a container. For Grid, it is justify-content and align-content. A shorthand for both of them in CSS Grid is place-items: center;

    if you finish the edits on your editor and push to github, wait a little moment and click on "Generate New Screenshot" in your frontendmentor's page to effect the changes you made in your code here.

    Marked as helpful
  • ernieJohn•80
    @ernieJohn
    Submitted 8 months ago

    four-card-feature-section-master

    1
    Ugo Francis•150
    @Vanfrankie7
    Posted 8 months ago

    Nice job you did there, John.

    Have you considered giving you .head a max-width so that the <P> contents will wrap in a wider screen as shown in the challenge.

    Also, the cards (1-4). Considered giving them the same class each and setting a width to them at your media queries for wider screens?

    Or, what do you think about it?

  • Ahirgautam•290
    @Ahirgautam
    Submitted 8 months ago

    product card , with html css , fully responsive card

    1
    Ugo Francis•150
    @Vanfrankie7
    Posted 8 months ago

    Nice one, near perfect. you did really well.

  • omar kamal•340
    @omarkl95
    Submitted 8 months ago

    html5 , css3 , reset

    1
    Ugo Francis•150
    @Vanfrankie7
    Posted 8 months ago

    Nice one. Near perfect.

    Marked as helpful
  • LibenS10•30
    @LibenS10
    Submitted 9 months ago

    Social links profile using HTML and CSS

    1
    Ugo Francis•150
    @Vanfrankie7
    Posted 9 months ago

    Yo bro, i had the same issue of my container sticking at the top of the view port. i just put min-height: 100%; on the <body> tag which is the direct element of my flex container. And it worked perfectly.

    Take a look at my code;

    body { font-family: "Inter", sans-serif; font-size: 14px; color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 8%); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }

    .container { display: flex; flex-direction: column; justify-content: center; gap: 15px; padding: 25px; margin: 0 20px; border-radius: 9px; background-color: hsl(0, 0%, 12%); max-width: 375px; }

    Try it out and see.

  • LibenS10•30
    @LibenS10
    Submitted 9 months ago

    Blog preview card using HTML and CSS

    1
    Ugo Francis•150
    @Vanfrankie7
    Posted 9 months ago

    The container is not vertically centered in the viewport. Maybe margin: auto; in the container?

View more comments
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

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