Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
46
Comments
215

Teodor Jenkler

@TedJenklerGreece4,040 points

Full-stack developer delivering robust, scalable, and visually stunning web applications. Specialize in MERN, Tailwind CSS, and responsive design. Proficient in Laravel, Django, CMS, and Bootstrap/Vanilla CSS/SCSS.

I’m currently learning...

Typescript and SCSS

Latest solutions

  • MyTeam---WordpressStack

    #accessibility#php#wordpress#lighthouse

    Teodor Jenkler•4,040
    Submitted 7 months ago

    I haven’t published the code yet because I prefer to keep my custom theme private, but I’d really appreciate feedback on specific areas like optimization, SEO, best practices, and accessibility. I think I’ve covered most of the key topics.


    0 comments
  • Photosnap---WordpressStack

    #accessibility#php#wordpress#lighthouse

    Teodor Jenkler•4,040
    Submitted 8 months ago

    I’d love feedback on the responsive design, particularly how well the layouts transition across mobile, tablet, and desktop. I aimed for pixel-perfect results and used rem units with a root size strategy to ensure smooth scaling. It would be great to hear your thoughts on the different desktop designs—do they feel cohesive and visually balanced?

    Additionally, any insights on further improving accessibility or optimization would be helpful. The Lighthouse scores are already strong, but if you spot any missed opportunities for perfection, I’m all ears!


    0 comments
  • Age-calculator-typescript-scss-jest

    #jest#react#sass/scss#typescript#vite

    Teodor Jenkler•4,040
    Submitted 10 months ago

    I would love feedback on the following specific areas of my project:

    Jest: Any suggestions for improving my test coverage or test strategies?

    SCSS: Advice on optimizing or improving my stylesheets and their structure?

    TypeScript: Recommendations for better type management or any potential improvements?

    Additionally, I implemented a feature that replaces form validation with auto-correction. For example, if a user types "31 February," it auto-corrects to the last day of February for that year, adjusting for leap years as needed. While I considered adding validation for the correct format, it feels unnecessary with the auto-correction in place. What are your thoughts on this approach?


    1 comment
  • Tip-calculator-Typescript-SCSS-Animation-Accessibility-Jest

    #accessibility#jest#sass/scss#typescript#vite

    Teodor Jenkler•4,040
    Submitted 10 months ago

    I’d appreciate feedback on the following areas:

    Testing: I’m unsure if my test cases cover all essential aspects and may have missed some important tests. Due to the project's small size and lack of modular components, these unit tests also function as end-to-end tests. I plan to learn Cypress for larger projects.

    SCSS: Feedback on styling, organization, maintainability, and best practices would be great.

    TypeScript: Any tips on improving code quality, type usage, or overall structure would be helpful.

    Any additional feedback is also welcome!


    2 comments
  • Card-Bootstrap-SCSS

    #accessibility#bootstrap#react#vite#sass/scss

    Teodor Jenkler•4,040
    Submitted 10 months ago

    Feedback is welcome, especially on SCSS or Bootstrap.


    1 comment
  • Arch Studio Multi-Page Website – React, SCSS, Formik, Framer Motion

    #accessibility#motion#react#sass/scss#vite

    Teodor Jenkler•4,040
    Submitted 11 months ago

    Specific Areas for Feedback:

    SEO and Accessibility: I’ve implemented some improvements, but I’m open to suggestions for additional strategies or best practices that I might have missed.

    Modularity: I’m looking for feedback on whether my code is modular and well-structured or if there are areas where I've overused patterns or repeated code.

    SCSS Structure and Best Practices: Advice on optimizing my SCSS structure and following best practices to improve maintainability and performance would be appreciated.

    Framer Motion Tips: Any tips or tricks for creating smoother animations or optimizing performance with Framer Motion would be helpful.

    Overall, any feedback on these areas or other aspects of the project is welcome and will help me refine and improve my work.


    0 comments
View more solutions

Latest comments

  • Marco Musiol 🧑🏻•50
    @musiolmarco
    Submitted 6 months ago

    FAQ Accordion Solution ❓

    2
    Teodor Jenkler•4,040
    @TedJenkler
    Posted 6 months ago

    Hi @musiolmarco,

    I have some suggestions to help improve your project:

    Semantic Elements: I noticed you're using <div> elements. Consider replacing these with <footer> and <main> to align with HTML5 best practices. The <header> can be removed as it's semantically incorrect for this project. Typically, <header> should be used for elements like <nav> or a logo, at the top of a page.

    Animations: To make your project stand out more, consider adding animations. I recommend watching a YouTube tutorial on "accordion with animation" and then refactoring your code without external help. This will enhance the user experience and give your project a polished look.

    SEO Enhancements: Add SEO title and description tags to all your projects. Try sharing your project on Discord before and after implementing these changes to observe the differences in visibility and engagement. This practice will significantly improve SEO and click-through rates on real projects.

    Keep up the great work!

  • P
    Nishanth Venkatesan•1,030
    @nishanth1596
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    This is the first challenge I’ve completed using React.js. I’m proud to have finished it in a short amount of time, as I’m becoming more comfortable with coding. I’m excited to continue improving every day!

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

    I'm having trouble adding a cyan background color on hover for an image. Despite my efforts, I haven't been able to achieve the desired effect. I would greatly appreciate any help or suggestions on how to fix this small issue.

    Thank you in advance!

    Responsive nft-preview-card using React.JS

    #react#pure-css
    2
    Teodor Jenkler•4,040
    @TedJenkler
    Posted 6 months ago

    Hi @nishanth1596,

    I have some additional feedback to help improve your project:

    Content for ::before and ::after: I noticed that the first feedback missed mentioning content: "". This is essential for ::before and ::after pseudo-elements. Using this overlay method, as @MarziaJalili mentioned, is recommended because it allows you to add hover effects and animations to the other layer while achieving the desired overlay effect.

    <main> Element Usage: It seems you're using the <main> element incorrectly. In your index.html, you can replace the #root div with a <main> element, provided you're not including a <footer> or <header>. This aligns with best practices for semantic HTML.

    Reducing Divs and Containers: You're using too many <div> and container elements. Aim to minimize these where possible. I recommend learning more about Flexbox to reduce the complexity associated with extra padding and margins in your card layout. Simplifying your structure will result in cleaner, more maintainable code, which is especially helpful in larger projects. (In React, you can use <></> for cleaner code when working with components.)

    List Element Usage: Be cautious with how you use lists (<ol> or <ul>). These should only be used for ordered or unordered lists. Misusing them can confuse the structure and semantics of your content.

    SEO Practice: I recommend practicing the use of SEO titles and descriptions in all your projects. Try adding these to your index.html, then share your project on Discord or social media before and after implementing these changes to observe the differences in visibility and engagement.

    Keep up the good work!

    Marked as helpful
  • P
    RogeanCosta•200
    @RogeanCosta
    Submitted 6 months ago
    What challenges did you encounter, and how did you overcome them?

    Hello! I'm very excited to share my solution to this challenge with you! 😊

    In this challenge, I learned something new: How to work with @font-face to use fonts whose installation files are present in the project directories. 😲

    This is the first time I've done this and it was really exciting and challenging to learn how to do it. I was only used to using fonts through a connection with Google Fonts, not downloaded this way.😁

    These two resources helped me a lot in this challenge ✔:

    Youtube Video Stackoverflow Discussion

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

    I have some questions about my solution e about this challenge 🤔...

    1. Is the way I used @font-face correct? Most of the examples I saw did not include more than a single file, as is the case in this example. 😕

    2. Is there any way to optimize my CSS code? I think it is too long, but I have the impression that it would be possible to be more precise and reduce the number of lines. 😅

    3. This was the first project in which I decided to work with box-sizing:border-box and I had some difficulties. One difficulty was that I could not get the border to be exactly 1px, as the design showed. When adding the 1px border, the content area became a decimal and the border as well (0.800). How could I solve this problem? 😭

    4. Another difficulty I had, and I think it may have been because of the border-box as well, was that I could not increase the height of the image to 501px in the mobile design, it was 484px, if I am not mistaken. Is there any way to achieve this? 😣

    5. At the end of the challenge page there was a text like this in the ideas section: "The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries.". I can't think of a way to do this. I even looked it up, but it seemed complex to me, using a calc function with calculations involving different units. Is there another, simpler way to get the result of this idea? 🤯

    My Second Challenge: Blog Preview Card!

    3
    Teodor Jenkler•4,040
    @TedJenkler
    Posted 6 months ago

    Hi @RogeanCosta,

    Here are a couple of suggestions to enhance your code:

    Responsive Fonts: For responsive typography, consider using the clamp() function. It allows you to set a minimum size, preferred size, and maximum size for text, making it responsive without needing media queries. This is a best practice for modern, adaptable designs.

    Simplify Structure: When building your project, aim to use as few <div> elements or containers as possible. Currently, the card is overcomplicated with too many divs and margins. You only need a single card container and a container for the card footer. Refactor the project using Flexbox, and use divs and containers sparingly. This approach will result in cleaner, more maintainable code, especially beneficial in larger projects.

    Keep up the excellent work!

  • Kamal Alhejaili•60
    @Kamalep
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Thank you

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

    Thank you

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

    Thank you

    qr-code-component using HTML+CSS

    3
    Teodor Jenkler•4,040
    @TedJenkler
    Posted 6 months ago

    Hi @Kamalep,

    Here are a few suggestions to further improve your work:

    Semantic Elements: Try to use semantic elements like <main> and <footer> in all projects, especially when including a Frontend Mentor footer link and a main content area. This practice enhances SEO and accessibility, making your site more user-friendly and search-engine optimized.

    Flexbox for Layout: Instead of relying heavily on margins and padding, it's best practice to use Flexbox and gap for layout management. This simplifies the structure and reduces complexity, particularly in larger projects. Add margins and padding only when necessary to keep the design clean and maintainable.

    SEO Practice: This project is an excellent opportunity to practice SEO by adding a descriptive title and meta description. After implementing these, share your project on Discord or social media to observe the differences in visibility and engagement.

    Keep up the great work!

    Marked as helpful
  • P
    przwro•40
    @przwro
    Submitted 6 months ago

    faq-accordion-main

    2
    Teodor Jenkler•4,040
    @TedJenkler
    Posted 6 months ago

    Hi @przwro,

    Nice job on making the project responsive! While testing it in Chrome DevTools, I noticed that when you open it on mobile, the whole body element shifts when toggling. I recommend looking up a YouTube tutorial on "accordion with animation" and refactoring your code accordingly. This can help make the transitions smoother and avoid the body movement issue.

    Regarding semantic elements, while it’s great to use <header> and <main>, it’s important to use them meaningfully. Think of HTML like building blocks your section of the site shouldn’t have its own independent header and main unless it makes sense within the larger context. Misusing semantic elements can be worse than omitting them. For instance, .layout-container could be a simple <div> or <main>, Header is not needed.

    Keep up the great work, and happy coding!

    Marked as helpful
  • CalebM7•40
    @CalebM7
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of attempting and completing the challenge. Maybe next time I should experiment using grid when working on a similar project or use both flexbox and grid. I only used flexbox for the card.

    Blog-card-preview-challenge

    2
    Teodor Jenkler•4,040
    @TedJenkler
    Posted 6 months ago

    Hi @CalebM7,

    I read the previous feedback and wanted to add a few more points:

    Width Management: It’s more efficient to define the width in one place and make other items either 100% width or leave them natural. The less CSS you write, the better. While using variables is beneficial, over-engineering with too many variables isn’t necessary. Reserve variables for animations, colors, and, in some cases, consistent padding or margins if you're following a style guide.

    Min-Height vs. Height: Using min-height is generally advantageous, as long as you account for the smallest breakpoint (typically 320px). Avoid using height whenever possible; instead, use min-height to ensure elements have a minimum height when needed without being too rigid.

    Div Usage: It looks like you’re overusing <div> elements. This solution can be streamlined with Flexbox, using gap, margin, and fewer containers. My tip is to always aim for minimal <div> usage. In larger projects, excessive nesting can quickly make your code unmanageable. If you’d like an example, I can provide one, but I highly recommend watching a Flexbox tutorial or reading the documentation. Then, try redoing this project to solidify your understanding through trial and error.

    Happy New Year and good luck with your continued learning!

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

Mentor of the Week - 3rd Place

This badge is awarded to the 3rd placed community member on the weekly Wall of Fame.

Fun fact

The Hansen Writing Ball shown in the badge was the first commercially produced typewriter. It was put into production in 1870 with its unique ergonomic design. It was overtaken in the market in 1873 by the Sholes and Glidden typewriter which was the first keyboard to utilise the QWERTY layout we now use today.

Mentor of the Week - 2nd Place

This badge is awarded to the 2nd placed community member on the weekly Wall of Fame.

Fun fact

Keypunches were used in early computing to punch precise holes in stiff paper card. The punched cards were then used for data input, output, and storage. No code linters or auto-complete suggestions to help out back then! 😅

Mentor of the Month - 2nd Place

This badge is awarded to the 2nd placed community member on the monthly Wall of Fame.

Fun fact

The computer in this badge is loosely based on the Commodore PET which was one of the earliest home computers launched in 1977. It came with 4 KB of RAM...that's not a typo!

Mentor of the Month - 3rd Place

This badge is awarded to the 3rd placed community member on the monthly Wall of Fame.

Fun fact

An abacus is an ancient calculating tool. These days we would typically use a calculator or computer but the abacus is where it all started!

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