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

Jorge

@Broderpixelv180 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

  • git, css, flexbox, transition and media queries

    #bem

    Jorge•80
    Submitted 10 months ago

    In the transition that is made when moving the cursor, I don't know if it is in the correct place, or declared, because sometimes when the page loads all the objects move


    1 comment
  • css flexbox, media css, git,


    Jorge•80
    Submitted 10 months ago

    I would like to know if the code is correct or if there is a better way to optimize it, I don't know if there are excess divs or sections that could have been omitted.


    2 comments

Latest comments

  • Harlequelrah•10
    @Harlequelrah
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    i'm proud of mastering responsive layout with flexbox and next time i'll write more clean scss code

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

    it was difficul to center the component on the center of the page . i overcame by using flexbox

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

    i would like to know how can i improve my code

    Responsive layout using flex box

    #sass/scss
    2
    Jorge•80
    @Broderpixelv1
    Posted 10 months ago

    Great start!, my recommendation is to apply semantic html; Despite being an apparently simple exercise, it is an opportunity to apply all the techniques and knowledge of html and css, with semantic html you will have a more functional structure identifying important sections, which will also allow you to organize and get the most out of flexbox in addition to being the start to scale to responsive sites. Very good, keep going!!

    Marked as helpful
  • DAVstudy•60
    @DAVstudy
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to finish the challenge, I learned more about CSS specifically 'grid' and 'flex', I used these elements to section and position the content. I also learned how to use Chrome's "inspect" tool to improve the styling of elements. I would like to improve the structure of the styles and elements.

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

    good practices for HTML and CSS

    blog preview card using only HTML and CSS

    1
    Jorge•80
    @Broderpixelv1
    Posted 10 months ago

    Good job! The exercise is well underway and the effort is noticeable. With an extra touch of animation or movement, I think you could improve it

    Marked as helpful
  • Duck_Noris•40
    @Ryn-Bghl
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I am particularly proud of the responsive layout of my project. By using Flexbox and relative units, I was able to create a design that adapts seamlessly to different screen sizes. Additionally, leveraging CSS variables for managing colors and fonts made the code much cleaner and easier to maintain.

    I learned the importance of good accessibility, particularly by using descriptive alt attributes for images, which enhances the experience for users with screen readers. I also deepened my understanding of font management and content fluidity with CSS properties like box-sizing and overflow-wrap.

    Next time, I would focus more on improving accessibility and optimizing performance, such as reducing image sizes and avoiding the use of experimental CSS properties. I would also explore advanced techniques for text rendering to ensure an optimal user experience across all devices.

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

    One of the main challenges I faced was ensuring the responsive design worked seamlessly across various devices. Initially, certain elements were misaligned or did not scale properly, leading to an inconsistent user experience.

    To overcome this, I implemented CSS Flexbox for the layout, allowing for a more adaptable arrangement of elements. I also utilized relative units like percentages and rem for sizing, which helped maintain proportions across different screen sizes. By testing the design on multiple devices, I was able to make necessary adjustments to ensure a smooth and responsive layout.

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

    I am interested in learning more about advanced CSS techniques, specifically CSS Grid and animations. I would appreciate guidance on how to effectively integrate these techniques into my current layout to enhance the visual appeal and user experience. Any resources or examples of best practices would be greatly helpful.

    Frontend Mentor - QR code component

    2
    Jorge•80
    @Broderpixelv1
    Posted 10 months ago

    good job!!, I suggest you take it to another level by using flexbox to center and margin the boxes, for example, instead of using:

    main { position: absolute;
      top: 50%;
      left: 50%; 
    ...
    

    try to use in body

    body { display:flex;
    justify-content:center;
    align-items:center;
    ...
    

    this will center the main, I hope this is a useful tip to get more out of flexbox, keep going.

    Marked as helpful
  • P
    Radu Petre Tarean•560
    @2XG-DEV
    Submitted 10 months ago

    Blog Preview Card Simple HTML&CSS

    #bem
    1
    Jorge•80
    @Broderpixelv1
    Posted 10 months ago

    Congratulations there is a lot of potential here, good that you use css variables, I would just suggest that you consider adding a fallback font in the font-family property, such as Arial, sans-serif, to ensure that the text looks good in case Figtree does not be loaded and add box-sizing: border-box; to all elements (*) to prevent padding and border from changing the dimensions of the elements, especially useful in layout.

  • hopefulobject•80
    @hopefulobject
    Submitted 11 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of how close to the design the final product turned out. I would maybe try to find a better way to align the container to the center of the page next time.

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

    Aligning the container vertically center on the webpage. I overcame this by using absolute positioning and setting right: 0 left: 0 top: 0 bottom 0

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

    What are the best practices for aligning a div to the center of a webpage?

    QR code using absolute positioning and vanilla CSS

    1
    Jorge•80
    @Broderpixelv1
    Posted 10 months ago

    Hello, consider using flexbox for this exercise, it will allow you to center both vertically and horizontally in an easier way; In addition, it will allow you to make responsive designs.

    display: flex; justify-content: center ; align-items: center;

    These properties inside container will be useful, omitting postion, top, bottom, left, rigth.

    It would be advisable for the width and height of the main to be 100% of the screen size, so it would adapt to the different screens where your site is displayed.

    Greetings

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