Skip to content
OverviewSolutions
45
Comments
202
P
Teodor Jenkler
@TedJenkler

All comments

  • Suhas Patnaik•120
    @SuhasPatnaikSubmitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    Made the website fully responsive across smaller devices (tablets, mobiles, etc) using responsive units, flexible images and media queries for the first time.

    Possible Improvement:

    I personally feel like there’s a more efficient approach to making a website fully responsive. For instance, I’d like to break slightly complex components into flexboxes and grids wherever possible to build fluid layouts from the start.

    What challenges did you encounter, and how did you overcome them?
    • Figuring out the approaches to manipulate the stylings of a list item and choosing the more suitable one for my use case (used ::marker instead of ::before)
    • Learning about table border manipulations, on how it is designed for table cells by default but I had to adapt it to table row instead to fit the design requirements.
    What specific areas of your project would you like help with?

    In terms of accessibility and ways to achieve responsiveness.

    Responsive recipe page using HTML, CSS

    2
    Teodor Jenkler•3,820
    @TedJenklerPosted 20 days ago

    Hi @SuhasPatnaik,

    To improve the semantic quality of your HTML, consider making <section> and <article> tags fully accessible landmarks. For each of these elements to function correctly, ensure they include:

    Labeling with aria-labelledby or aria-label: Use aria-labelledby to link to a heading within the section, making it clear and navigable for screen readers. If no heading is present, use aria-label to describe the section directly.

    Descriptive Heading or aria-label: A heading (or aria-label when a visible heading isn’t feasible) defines the section’s purpose and improves accessibility. In your case, simply link the semantic tag with the heading.

    Nice job on the heading structure! Your overall HTML structure is solid, and the site is fully responsive. Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @rahulmourya336,

    Nice project! Here are a few suggestions:

    I noticed that there are too many containers (i.e., <div> elements). To simplify your layout, you can make the <body> a flex container with align-items: center and justify-content: center. Use one main card with flex-direction: column to stack all content without unnecessary nesting. This approach will greatly improve your SEO and accessibility, and also make your code more readable and maintainable, especially for larger projects. Additionally, you can use the <footer> element for the Frontend Mentor footer.

    Another thing I noticed is that you don’t use appropriate HTML tags like <h2> in your component. Try to use the correct HTML tags for structure to improve SEO, accessibility, and readability.

    I also noticed that you are using <button> elements for links. <button> should only be used when you have a form or need to invoke JavaScript functionality. For links to external sites like GitHub, use <a> tags instead.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    1
  • Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @IGOXU,

    Nice job using semantic HTML! Here’s a quick tip that many people might not be aware of: a <section> without an aria-label, aria-labelledby, or title is not considered semantic and will not function as a landmark. To ensure the section works properly and improves accessibility, you need to provide a description for screen readers.

    Other than that, really great work!

    Best, Teodor

    0
  • Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @RubchenkoArtem,

    Nice project! Here are a few suggestions:

    I noticed that there are too many containers (i.e., <div> elements). To simplify your layout, you can make the <body> a flex container with align-items: center and justify-content: center. Use one main card with flex-direction: column to stack all content without unnecessary nesting. This approach will greatly improve your SEO and accessibility, and also make your code more readable and maintainable, especially for larger projects. Additionally, you can use the <footer> element for the Frontend Mentor footer.

    Keep up the great work!

    Best, Teodor

    0
  • Luka-998•80
    @Luka-998Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of centering by vertically and horizontally.

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

    Biggest challenge was understanding primary and secondary axis of flexbox. eg. justify-content (as a primary) and align-items (as secondary)

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

    With display:grid;

    CSS/HTML only

    2
    Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @Luka-998,

    Nice project! Here are a few suggestions:

    I noticed that there are too many containers (i.e., <div> elements). To simplify your layout, you can make the <body> a flex container with align-items: center and justify-content: center. Use one main card with flex-direction: column to stack all content without unnecessary nesting. This approach will greatly improve your SEO and accessibility, and also make your code more readable and maintainable, especially for larger projects. Additionally, you can use the <footer> element for the Frontend Mentor footer.

    Another cool way to center a <div> is by setting position: relative on the parent, position: absolute on the content, with top: 50%, left: 50%, and transform: translate(-50%, -50%). While Grid is also an option, it can be more complex. For this project, using Flexbox is the recommended approach.

    I noticed that you are using HTML tags more for styling rather than their intended meaning. For example, <h1> should be reserved for the page title, <h2> for main headings, <h3> for subheadings, and <h4> for sub-subheadings. An improvement would also be to use the <time> element where appropriate and clean up unnecessary semantics like redundant <section> tags.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @Davidty143,

    Nice project! Here are a few suggestions:

    I noticed that there are too many containers (i.e., <div> elements). To simplify your layout, you can make the <body> a flex container with align-items: center and justify-content: center. Use one main card with flex-direction: column to stack all content without unnecessary nesting. This approach will greatly improve your SEO and accessibility, and also make your code more readable and maintainable, especially for larger projects. Additionally, you can use the <footer> element for the Frontend Mentor footer.

    I would also suggest using more HTML elements for the structure. For example, using <h2> for headings and <time> for dates would improve the HTML quality and accessibility.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • Melanie Hudson•10
    @seekingcatSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    This is my first time building something that I'm getting other people to look at. So that is a big step for me.

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

    I am not quite sure that I actually did this correctly as I'm also a first time user of Figma so I didn't know if I was using it right. I'm sure I will be told

    QR Code solution code

    2
    Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @seekingcat,

    Nice project! Here are a few suggestions:

    I noticed that there are too many containers (i.e., <div> elements). To simplify your layout, you can make the <body> a flex container with align-items: center and justify-content: center. Use one main card with flex-direction: column to stack all content without unnecessary nesting. This approach will greatly improve your SEO and accessibility, and also make your code more readable and maintainable, especially for larger projects. Additionally, you can use the <footer> element for the Frontend Mentor footer.

    Another cool way to center a <div> is by setting position: relative on the parent, position: absolute on the content, with top: 50%, left: 50%, and transform: translate(-50%, -50%). While Grid is also an option, it can be more complex. For this project, using Flexbox is the recommended approach.

    Keep up the great work!

    Best, Teodor

    1
  • ALHERI BLESSING•30
    @Alheri-blessingSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of myself for being able to use HTML and CSS to create a social profile links, this shows that I am gradually learning how to become a better web developer.

    Social Profile Link

    3
    Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @Alheri-blessing,

    Nice project! Here are a couple of suggestions to improve it:

    Another cool way to center a <div> is by setting the parent to position: relative, the content to position: absolute, and then using top: 50%, left: 50%, with transform: translate(-50%, -50%). This method is quite effective for centering elements.

    I noticed that there is some unnecessary nesting in your code. Try to reduce the number of <div>s to keep your code clean and readable for both screen readers and other developers using tools like Chrome DevTools. A better structure would be to center the card using Flexbox on the <body>, and then use <main> with flex-direction: column so that everything stacks naturally. A bit of margin would be sufficient to achieve the desired layout.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • NeonCodes•30
    @NeonCodesSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that the final result looks close to the image preview. It was also another opportunity to continue practicing flexbox and try hover and focus states. Next time, I hope I will code faster and make less research.

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

    -Styling the two images: put each image in a div image 1 and 2 : at first, the first image didn t have round corners despite applying border-radius ; putting it directly in img{} fixed that at first ; Then, adding padding to image erased border-radius again. = adding padding to card instead of image fixed that.

    -The yellow background kept getting inside the card: I changed yellow background to html {} instead of inside *

    -  Sometimes, It was easy to get lost in all the divs and containers. I had to review my code and the indents multiple times to make sure everything was okay.

    -The second image doesn’t keep its size inside the div:did styling on the head instead of the css stylesheet to fix that.

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

    I need help positioning authorname correctly: It was positioned fine on a previous version then, I changed the font and couldn't get the same result. I can't find it in the repository either. Also, general feedback on the code itself is welcome: organization, unnecessary lines, things that could have been done more easily etc

    Blog preview page with CSS box model and flexbox

    2
    Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @NeonCodes,

    Nice project! Here are a few suggestions:

    For this project, an ideal structure would be to use <main> and <footer>. Set <main> as a flex container with flex-direction: column so that all elements stack on top of each other. This will help you remove unnecessary <div>s and incorrect semantics, such as <header>.

    Consider this analogy for HTML and CSS: imagine HTML as Lego bricks and CSS as the color you apply to those bricks. Instead of changing the color by altering the brick itself, choose the right brick and then apply the appropriate color. It might sound like a silly analogy, but it can be helpful. The <h1> tag should be reserved for the most important content, like the page title. For this project, <h1> is not needed. Instead, use <h2> for main headings, and within <h2>, use <h3>, and so on, with <h4> for sub-sub-headings. This approach will greatly improve accessibility, SEO, and overall readability.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • adelajasamuel1•100
    @samuel-faithSubmitted 2 months ago
    What specific areas of your project would you like help with?

    I'd welcome any constructive criticism

    Blog preview card

    2
    Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @samuel-faith,

    Nice project! Here are a few suggestions:

    Another fun way to center a <div> is by setting the parent to position: relative, the content to position: absolute, and then using top: 50%, left: 50%, with transform: translate(-50%, -50%). The third method, which is more complex, involves using Grid, but Flexbox is definitely the most recommended approach for this project.

    You’ve done well using the <main> tag. One improvement for your card component would be to reduce unnecessary nesting of <div>s. For example, this project could be simplified with just one <main> for the card using Flexbox in a column layout, and one <div> for the card footer. This would make your code cleaner, more readable, and more accessible.

    I noticed that the use of <h1>, <h2>, and <h3> could be refined. The <h1> tag is meant for the page title, <h2> for headers, <h3> for sub-headers, and <h4> for sub-sub-headers. Try to avoid using HTML elements for styling purposes. Instead, use them for their intended structure and meaning to enhance SEO and accessibility. For this project, you would likely only need one <h2>, and could use elements like <time> and <span> for additional content like badges.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • Ajaya-Rajbhandari•130
    @Ajaya-RajbhandariSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I want to have different file created for css and html. I want to learn to use Styled Component CSS.

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

    I found it difficult to arrange the table head vertically and data as well changing the color of the bullet. I used the help of w3schools.com and VS code BlackBoxAi to understand the concept.

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

    I have use same code repeatedly in css. for example changing the color, font-size of the element in each element css.

    Omelette Recipe design

    2
    Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @Ajaya-Rajbhandari,

    Nice project! Here are a few suggestions to improve it:

    I noticed that the site isn’t fully responsive and overflows on mobile. This might be because you didn’t start with a mobile-first approach, which is the recommended and modern way to develop websites. It’s best to build your site for a 375px viewport first, and then use media queries to enhance responsiveness for larger screens. This approach often simplifies the code and improves responsiveness.

    I also observed that the structure of your HTML could be improved. The <main> tag should wrap all the important content on the page. Additionally, <section> elements need either a title, aria-label, or aria-describedby to function as landmarks and enhance semantics. I recommend revisiting the semantic structure of your code and reducing the number of <div>s where possible.

    Using a <footer> element would be more appropriate than a <div> for the footer section. Additionally, consider utilizing Flexbox to reduce the number of <div>s by employing flex-column where needed. This will help streamline your layout and make the code cleaner.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • Abdelwahab942002•70
    @Abdelwahab942002Submitted 2 months ago
    What challenges did you encounter, and how did you overcome them?

    All feedback is welcomed, thank you.

    Recipe page

    2
    Teodor Jenkler•3,820
    @TedJenklerPosted 2 months ago

    Hi @Abdelwahab942002,

    Nice project! Here are a few suggestions:

    I noticed that the link on "frontendmentor" doesn’t work at the moment. It would be good to fix this. Currently, only the new link on your GitHub is functional.

    There are some responsiveness issues, particularly at around 406px wide where the <p> tag is pushed in by the margin of the <div>. Take a closer look at these margins and adjust as needed.

    I observed that your site isn't wrapped in a container like <main>. I recommend exploring HTML5 semantic elements like <main>, <footer>, and <section> to make your code more structured, cleaner, and to improve accessibility.

    I noticed that your site uses multiple <h1> tags. This isn’t recommended; <h1> should be used for the page title, with <h2> for headers and then <h3>, <h4>, and so on for sub-sections. Using HTML elements for structure rather than styling will greatly enhance your code quality.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0