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

Albert Celestino

@1lbertPhilippines20 points

Since 2019, I’ve worked as an engineer in the OSP and Telecom sectors, serving clients and contractors. My passion for technology and innovation led me to transition into the tech industry, where I’m eager to master new skills

Latest solutions

  • Blog Preview Card


    Albert Celestino•20
    Submitted about 1 year ago

    how to properly use the combinator


    1 comment
  • QR Code Component, Responsive Web Design using HTML and CSS only


    Albert Celestino•20
    Submitted about 1 year ago

    mastering proper declaration on css


    2 comments

Latest comments

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

    Turning a design into a real website

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

    Getting website to be just like the design

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

    none

    Blog preview

    2
    Albert Celestino•20
    @1lbert
    Posted about 1 year ago

    Hi Jordan, as a fellow newbie, here's the following I saw in your layout.

    Border - the layout must have a border of black, Class - although it's not necessary, it must be better that our elements must have a certain class name as a distinction, this may also help as we style this in our CSS file. Responsiveness - the layout is not responsive on the Small screen, especially on a 320px device. instead of giving a fixed width to your "main" element, try to replace it with a min-width at wider devices and a maximum width at smaller devices. Height - one thing I learned from our colleague here is that avoid a height of 100vh, instead use min-height: 100vh to avoid overlapping when the smaller device is in the landscape. also, avoid giving fixed px quantity in height and width, it may affect your responsiveness in other devices CSS Reset - add CSS reset when designing in CSS. you can search for it and apply it to your code.

    That's it, I hope I can help you on your journey.

  • Albert Celestino•20
    @1lbert
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the overall process, It's my first time building a website just by copying from the reference and by only using my acquired skills.

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

    linking style.css, linking fonts, and aligning the semantic main into the center, I feel noob because I already know it and I still make an error because of it.

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

    mastering proper declaration on css

    QR Code Component, Responsive Web Design using HTML and CSS only

    2
    Albert Celestino•20
    @1lbert
    Posted about 1 year ago

    Hi Grace, Thank you for this input, I didn't realize all of this stuff until you mentioned it. I'll make sure to mind this next time.

    • I think I forgot to remove the width="320px" in HTML, It's just an experiment, and I completely forgot about this. hehe
    • the alt for the image, it's my fault for not putting it, I didn't realize the alt is missing in my image element
    • I actually don't know that there's a full CSS Reset, and since you mentioned it, I immediately searched what it means and the sample code. I also copy the temple of Josh W Comeau's Custom CSS Reset for my reference to the next projects, thanks!
    • I thought giving the height of 100vh gives my layout responsiveness to all views, but upon checking it in landscape mode, I just realized what you're talking about.
    • to be honest, I'm still in the process of getting familiar with width, max-width, and min-width. So, I better do more experiments on this topic.
    • I should set my fonts into rem.

    Thank you for mentioning all of this, your comment is really helpful :)

  • Henna Singh•30
    @hennasingh
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am able to finish the project with a good readme file. I never gave importance to ReadMe files and with frontend mentor challenge it was a good experience to use it. I would also like to use sass for CSS next time.

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

    This was a good project to go back to basics. I have been learning frontend for quite some time now and its not easy to remember everything. I struggled centering the element but the spaced repetition was definitely worth my time. I fixed it by applying flex and height to the main tag.

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

    I would like to know more about testing a frontend application. What are the manual or other ways to test small to big applications. Thanks for your time.

    QR Code Challenge with Semantic HTML and CSS

    1
    Albert Celestino•20
    @1lbert
    Posted about 1 year ago

    Hi Henna, your layout is nice and looks good. As my suggestion, I think you need to consider the alignment of the elements, also the footer attributes must be on the lower center of the layout. Thanks and happy coding!

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