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

Alexander Roan

@dearestalexanderThailand180 points

Just back to the challenges after a bit of a long break. Keen to get on and make progress with JavaScript!

I’m currently learning...

JavaScript path. Outside of front end quite busy on my main work and a few other hobbies (photography, writing etc.)

Latest solutions

  • Article preview component with alternate design (HTML / CSS)


    P
    Alexander Roan•180
    Submitted about 1 month ago

    0 comments
  • 'Meet landing page' with adaptation to tourism theme 'DaNang' page


    P
    Alexander Roan•180
    Submitted 8 months ago

    A couple of questions:

    1. What approach did others take to have the hero image crop of screen
    2. What approach did others take to vertical spacing, did anyone else try to fit the sections into 'vertical space' or just rely on padding etc. between elements.

    1 comment
  • Testimonial grid with alternative 'Yamanote Line' design


    P
    Alexander Roan•180
    Submitted 8 months ago

    Nothing in particular, but always open to feedback on my design or anything you think in my CSS is not optimal.


    2 comments
  • Four card feature with bonus Pokemon version - Gotta Catch 'em all!


    P
    Alexander Roan•180
    Submitted 8 months ago

    Nothing for now.


    1 comment
  • Product preview card: mobile first, responsive units


    P
    Alexander Roan•180
    Submitted 8 months ago

    I'd be very interested in how others approached the width on this.

    I'd also be interested on whether people tend to set all font's based on rem or whether in this design it makes sense to use em and have some fonts scale based on others.


    1 comment
  • Responsive recipe page with vanilla HTML & CSS (BEM naming)


    P
    Alexander Roan•180
    Submitted 10 months ago

    For some reason I couldn't seem to get the 'Outfit' font to apply to the ordered list markers. It seems to show up when inspecting, but the actual digits displayed look wrong.


    1 comment
View more solutions

Latest comments

  • Faysal Farouk•10
    @FaysalFarouk
    Submitted about 1 month ago

    Responsive Article Preview Component using Flexbox & Media Queries

    1
    P
    Alexander Roan•180
    @dearestalexander
    Posted about 1 month ago

    Hello,

    At just a quick glance:

    • The desktop version doesn't show the left part of the image
    • Your share menu pop-up for mobile needs to be adjusted to cover the bottom of the component. This was a key part of the challenge for me. Figuring out how to have a different style of pop-up for different screen sizes.
    • Your desktop pop-up is missing the little pointer to the share button. Tip - you can rotate a square 45 deg. to get this effect.

    It looks like a good first effort, would be nice to see it updated with the share menu working as per the desktop and mobile spec. Goodluck!

  • Marcelo Meneses•120
    @MenesesMG
    Submitted 8 months ago

    Meet Landing Page using CSS Grid and Flex

    1
    P
    Alexander Roan•180
    @dearestalexander
    Posted 8 months ago

    Looks quite close Marcelo. You might want to give the hero text a minimum width I think it's wrapping and being narrow is throwing of you vertical spacing quite a bit. That's one change that may make it all line up better.

  • IMRAN KHAN•160
    @imrancodes
    Submitted 10 months ago

    Responsive Testimonials grid section using display grid

    1
    P
    Alexander Roan•180
    @dearestalexander
    Posted 8 months ago

    I like the way you did three different versions with an intermediate layout for devices like tablets.

  • P
    Tomislav Šuto•260
    @RetroApe
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Used Grid for the first time. Awesome tool!

    Made the transition with the help of Flexbox at a breakpoint, which made things much easier with the mobile layout.

    There is nothing I would do differently at the current state of my skills.

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

    Using Grid.

    Went through a couple of hours of research and there were no notable problems.

    I had a small problem with positioning an icon on each Card, using ::after. The icon was refusing to touch the bottom of the border because the icon's "container" (or content) was bigger (higher) than it should have been.

    • Setting the height of the "container" to be the same height as the icon solved the problem

    Matching layout with the first usage of Grid

    1
    P
    Alexander Roan•180
    @dearestalexander
    Posted 8 months ago

    Looks pretty good, nothing much to add. Nice job getting it so close by eye. I guess the shadow colour difference was an intentional choice.

    I'm amazed how different out CSS is for the same exercise. Quite different approaches.

    I think you said you used flex for mobile and grid for desktop. I used a mix of flex and grid for both. Grid for the cards, but flex on various objects to do things like position icons. It's very easy to switch grid between desktop and mobile just a couple of lines of CSS so might be worth trying that out as well to get more practice with grid. Unless you already know how.

  • Wisdom Matthew•140
    @techie084
    Submitted 9 months ago

    Product preview card component main

    1
    P
    Alexander Roan•180
    @dearestalexander
    Posted 8 months ago

    Hi, just at a glance a few things seem different

    • background color
    • product name and price font
    • letter spacing on 'perfume'
    • spacing between different text elements h1, p etc.
  • Thomas•550
    @TomSif
    Submitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    "For the first time, I started with a mobile-first approach and adjusted the breakpoints with media queries. It's probably my most advanced project so far, even though it's still simple. I spent way too much time fine-tuning some design details, such as the bullet points in the list, which needed to be centered in the paragraphs. There's probably a quicker method, but I eventually managed to adjust everything as expected. The project is fully responsive—probably a bit rough around the edges, but I'm still pretty proud of it!"

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

    "The darn bullet point that needed to be centered in the middle of the paragraph gave me a hard time. I had to use ::before with content: "\2022" and position: relative, then adjust the position of the last bullet with padding. And for some reason, it took me hours... At least now lists hold no more secrets for me—well, until proven otherwise!"

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

    "I'd like to know the best way to implement margins so that they scale with the screen resolution. I had to use media queries at different resolutions, but the result feels a bit choppy. There must be a better way to do it."

    Front-end_Mentor_recipe-page-main

    1
    P
    Alexander Roan•180
    @dearestalexander
    Posted 10 months ago

    Hi Thomas,

    I'm not an expert, but a few comments:

    • You may consider putting some comments in your html to explain your approach
    • I'm not sure you need so many <div> and <sections>. When I look at <section> guidance, that generally applies to a larger peice of content. And you should only use when something more specific doesn't fit. I chose to put the whole recipe component into an <article> as it feels like an <article>, fits well with the examples in W3C guidance. Within that <article> I only felt I needed one styling <div> for the differently formatted 'preparation' section. All other content could be style partically with by using 'main'. And it's easy to space it all out with flex, padding and margins as needed.

    CSS

    • I recommend reading up on block element method , it's a good way to structure class names to make it easy to follow the logic of what is used where.
    • For accessibility and re-usability it seems one good practice to get into the habbit of following is to apply specific styles mostly on classes. When you get to more complex designs avoiding styling on html tags mean there's less likely for specific adjustments to have unintended consequences. Of course I think base styling to body and main is normal, but styling on h1, p, ul etc. seems might be better to use classes.
    • It's possible to make this responsive without using any @media queries at all. You can use width: min() and specific a size in ch for desktop and a size in & for mobile.
    • I think you can re-work to reduce the number of CSS entries you have if you want to simplify.

    Feel free to take a look at my solution to compare. I spent quite a bit of time trying to build it in line with feedback the community gave me on my previous solution. They gave a lot of good tips on responsiveness, readability, accessibility etc.

    Marked as helpful
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