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

Burak Uğraş

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

  • Newsletter sign-up form Practise

    #pure-css#van-js

    Burak Uğraş•90
    Submitted about 2 months ago

    I need to get help some places on js code. In error status (sending empty input) my error label doesn't seem dynamically.


    1 comment
  • blog-preview-card

    #pure-css

    Burak Uğraş•90
    Submitted 2 months ago

    I need help on media queries.


    1 comment
  • Blog preview card

    #pure-css

    Burak Uğraş•90
    Submitted 2 months ago

    I need help about media queries.


    0 comments
  • using semantic tags, using class and id structures on css


    Burak Uğraş•90
    Submitted 7 months ago

    Especially html and css areas pushing me. I struggling on css mostly times.


    1 comment
  • CSS classes, Google Fonts, CSS attributes


    Burak Uğraş•90
    Submitted 7 months ago

    2 comments

Latest comments

  • Abdulgafar-Riro•220
    @Abdulgafar-Riro
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    What I’m Most Proud Of: I’m especially proud of how I implemented a fully responsive layout that maintains visual consistency across different screen sizes. The use of SCSS helped keep the styles organized and scalable, and the JavaScript form validation provided smooth user interaction with instant feedback. Also, the animated success modal added a nice touch of interactivity and user satisfaction.

    What I Would Do Differently Next Time: Next time, I’d consider:

    Adding accessibility enhancements, such as ARIA labels and better keyboard navigation support.

    Implementing form validation using HTML5 constraints alongside JavaScript for better fallback.

    Using a utility-first CSS framework like Tailwind to speed up styling.

    Incorporating localStorage to remember user inputs on page refresh.

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

    Challenges I Encountered and How I Overcame Them:

    1. Responsive Design Adjustments: Ensuring the layout looked good on all screen sizes was tricky, especially for the form elements. I overcame this by using flexbox and media queries to adjust spacing, alignment, and font sizes dynamically.

    2. Form Validation Logic

    3. Modal Display

    4. Maintaining Clean Code Structure: As the project grew, keeping the codebase organized became important. I used SCSS nesting and comment blocks to structure the styles.

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

    How to implement react and CSS frameworks into my projects

    Responsive Newsletter Sign-Up Form with Success Modal Using HTML, CSS

    #accessibility#sass/scss#van-js
    1
    Burak Uğraş•90
    @burakugras
    Posted about 2 months ago

    Hello friend, you have good solution.

    Your code is well-structured with good separation between HTML, CSS, and JavaScript, and it includes proper email validation and responsive image handling. However, it can be improved by using the form's submit event instead of a button click, dynamically updating the success message with the user's email, and ensuring error styles like .input-error are defined in CSS. The layout could be more responsive by avoiding hardcoded widths and adding media queries, and accessibility would benefit from clearer alt text and ARIA roles. Also, small UX enhancements like clearing the input after success, adding transitions, and better error feedback would make the interface more polished and user-friendly.

    Marked as helpful
  • P
    Fatima S•100
    @Zarah679
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I successfully used the figma design files and translated them into clean and readable HTML and CSS code. I also made sure that my design was responsive and adjusted to multiple screens. I am also getting more proficient at using the flexbox property.

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

    Figuring out spacing and padding that would align with the design. I figured this out by trying out different values until i found one that fit.

    Responsive blog preview card component using HTML & CSS

    #pure-css
    1
    Burak Uğraş•90
    @burakugras
    Posted 2 months ago

    Hello thats really nice solution, to improve your code, consider using more semantic HTML by replacing paragraph tags like <p class="topic"> with appropriate heading tags such as <h3> for better accessibility and structure. Ensure all images have descriptive alt text to support screen readers. If the "Learning" label isn't intended to be interactive, replace the <button> with a <span> or <div>. The font size of 10px used in multiple places is quite small and may hinder readability, so increasing it slightly would enhance user experience. To make the layout more adaptable, avoid fixed widths and heights on elements like .card and instead use relative units or media queries for responsiveness. Lastly, optimize performance by only importing the necessary font weights from Google Fonts.

  • 17chasei•30
    @17chasei
    Submitted 7 months ago

    Article preview component

    1
    Burak Uğraş•90
    @burakugras
    Posted 7 months ago

    Hello friend, your solution seems clear and successful. You should remove the // BRUH comment, as it’s unprofessional and could confuse other developers. That's all I can say about your codes. Happy coding :)

  • AmyH-goose•120
    @AmyH-goose
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I was most proud of being able to get the project done. This is my first time not being hand-held through a project or in a class room environment. However, I struggled a lot in knowing where to start and how to execute what I needed to do. Hopefully, next time I can break the task down into smaller steps and be less overwhelmed.

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

    It was hard for me to know where to start tackling the project. I decided to figure out the tags needed before I did the styling. When I got to the CSS part, I tried to refer to the figma design files.

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

    I would like to know how I can make the project more responsive and how the process of coding should look like? For example, what kind of general checklist should I go through in my head when approaching a project. As for responsiveness, what kind of properties or tags in css or html should I use and when do I know when to use them?

    QR code component challenge plain HTML & CSS

    1
    Burak Uğraş•90
    @burakugras
    Posted 7 months ago

    Hello,

    Your design and codes looks amazing. It written correctly. However I would expect you gave margin attribute for body. So, thanks to this way you could have centered your card vertically.

    Happy coding!!

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