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

Bryan Lordeus

@blordeus360 points

Digital content creator turned front-end developer who's doing his part to make the Internet more beautiful and functional.

I’m currently learning...

React, JavaScript, and other front-end frameworks

Latest solutions

  • Article Preview Component using CSS Grid and FlexBox


    P
    Bryan Lordeus•360
    Submitted about 1 year ago

    The event listeners and connecting JavaScript to my HTML file. I ended up having to add the script to the HTML file because it wasn't connecting properly. Not sure why since I've done it plenty of times before.


    1 comment
  • Blog Preview Card using Bootstrap

    #bootstrap#sass/scss

    P
    Bryan Lordeus•360
    Submitted over 1 year ago

    1 comment
  • Recipe Page using Bootstrap

    #bootstrap#sass/scss

    P
    Bryan Lordeus•360
    Submitted over 1 year ago

    0 comments
  • Password Generator App using Bootstrap

    #bootstrap

    P
    Bryan Lordeus•360
    Submitted over 1 year ago

    0 comments
  • To-Do List using React and Chakra UI

    #chakra-ui#react

    P
    Bryan Lordeus•360
    Submitted over 1 year ago

    0 comments
  • Clipboard Landing Page using Bootstrap

    #bootstrap

    P
    Bryan Lordeus•360
    Submitted almost 2 years ago

    0 comments
View more solutions

Latest comments

  • Pritesh Dhandhukia•220
    @pritxxh
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the attention to detail and the level of care I put into ensuring that the project meets the design specifications and follows best practices for web development. From the semantic HTML structure to the well-organized CSS styles, I aimed to create a codebase that is not only visually appealing but also maintainable and accessible. Additionally, I'm proud of the interactive elements I implemented using JavaScript, such as form validation and hover effects on buttons.

    If I were to approach a similar project in the future, I would consider:

    Leveraging more advanced JavaScript frameworks or libraries like React or Vue.js to manage complex interactive elements more efficiently. Implementing server-side validation alongside client-side validation to enhance security and provide a seamless user experience.

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

    One of the challenges I encountered was ensuring that the layout remained consistent and visually appealing across different screen sizes. To overcome this, I utilized CSS techniques such as flexible box layouts, relative units, and media queries to create a responsive design that adapts to various viewport widths.

    Another challenge was interpreting the provided design mockup and translating it into code accurately. To address this, I carefully studied the design specifications, paying close attention to details such as typography, spacing, colors, and layout. I also made use of developer tools in the browser to inspect and adjust the styling as needed.

    Additionally, I encountered some challenges related to implementing interactive elements using JavaScript. For example, I had to ensure that form validation worked correctly and that hover effects on buttons were consistent across different browsers. To overcome these challenges, I relied on JavaScript event listeners and DOM manipulation techniques, and I thoroughly tested the functionality across various browsers and devices.

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

    While I am confident in my HTML, CSS, and JavaScript skills, there are always opportunities for improvement and learning. Specifically, I would appreciate guidance and feedback in the following areas:

    Performance Optimization: Techniques and strategies for optimizing the performance of web pages, such as minimizing render-blocking resources, optimizing asset delivery, and implementing performance budgets. Accessibility Testing: Hands-on experience with accessibility testing tools and methodologies to identify and address potential accessibility issues more effectively. JavaScript Best Practices: Recommendations on best practices for writing clean, efficient, and maintainable JavaScript code, especially for managing complex interactive elements and handling user input. Cross-browser Compatibility: Best practices for ensuring consistent cross-browser behavior, especially when it comes to handling browser-specific quirks or implementing fallbacks for older browsers.

    Responsive Newsletter signup page using HTML, CSS & JS

    1
    P
    Bryan Lordeus•360
    @blordeus
    Posted about 1 year ago

    The layout looks clean

    Marked as helpful
  • Khalid Benhamou•150
    @5alidev
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm pleased with the ease of completing this project. Perhaps next time, I could focus on optimizing my code.

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

    The challenges I've encountered mostly involve manipulating shapes with CSS. Like creating the small triangle.

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

    I would like help with mouse events in JavaScript, in this example I used mouseenter & mouseleave events but the result is not quite satisfactory at least for me.

    Responsive Article Preview Component

    1
    P
    Bryan Lordeus•360
    @blordeus
    Posted about 1 year ago

    I like the shadow added to the box. Helps add some definition to the design.

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