P
@EnderCelik0Submitted 14 days ago
KapteynUniverse
@KapteynUniverseAll comments
- @KapteynUniversePosted 14 days ago
Merhaba Ender, good job.
I recommend you to check semantic html elements. Don't know any good resource about this, but what you are doing has a name, "divitis"
Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your div that contains nav with a header and the div that starts with keyboard input with a main would be good.
Every input must have a label. Placeholder attribute should not be used as an alternative to a label.
Also search input should be in a form, i think.
You are mapping ul element in both verb and noun section, so creating lots of lists instead of 1 per section. Map list items inside ul instead.
For color switcher a button would be a better option instead of an empty div. While writing it came to my mind, for font switcher option might be a good option too (ba dum tıss)
0 - @KapteynUniverseSubmitted 16 days agoWhat are you most proud of, and what would you do differently next time?
My laziness got me again. I started the project but didn’t look at it for a couple of days. When I returned, it was hard to continue and make changes. Next time, I will try to build components with loading and error states, and fetch data from the start instead of just importing from json file.
I also added a keyboard shortcut to the cart confirm button, so keyboard users don’t have to navigate through every dessert before accessing it.
What specific areas of your project would you like help with?Any feedback is appreciated. I’m not sure about my aria-live and description list usage.
@KapteynUniversePosted 16 days agoInteresting, cart has a max-height and background-color, shouldn't look like that
0 - P@yasiralakusSubmitted 20 days ago@KapteynUniversePosted 19 days ago
Merhaba Yasir, seni yolun başında yakaladığıma sevindim demek isterdim :D ama 1.5 senedir freelance çalışıyormuşsun.
Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your full page div or wrapping it with a main would be good.
The WCAG criteria states that line-height should be at least 1.5. 1.2 is too small for those who are dyslexic, these lines are packed too closely together, making it harder to read.
No need to use
width: 100%;for a block element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can).Avoid using fixed values like
width: 350px;, for better responsiveness use max-width with rem;max-width: 21.875rem;Also most of the times you don't need to set height.Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries. You can also use clamp function for better responsiveness/fluid typography.
Do not skip heading levels.. Also you shouldn't use more than one h1 in one page.
Those active states in design images means that elements are interactive. So they are either hyperlinks or buttons(might be inputs or other elements that i forgot too). For this challenge, i think all of them are hyperlinks.
Also i saw
li, summary { list-style: none;}in your css reset. You didn't use list here but for future i recommend you to check accessibility section of this page0 - @Tereza-SenoSubmitted 19 days agoWhat are you most proud of, and what would you do differently next time?
It seems like my result is very similar to the preview and I'm proud of it. I know that I use "old" techniques (for example px instead of rem/em ect.) But next time I will try to use them.
What challenges did you encounter, and how did you overcome them?My problem was that the QR code was not in the center. I mean.. It was at the center in a main cross but not in the center of the webpage. It was too high. I used a margin but it was not good solution. But then I relized that I can use
What specific areas of your project would you like help with?min-height: 100vh;andmin-width: 100vh;and that solved my problem. I hope it is the "right" way.I'm not sure about sizes. How do I figure out if I should use 300px or 350px? In this case.. I guesstimated it. Maybe I'm little bit dumb and there is a chance that I overlooked it in instructions. I'm not sure about it.
@KapteynUniversePosted 19 days agoIt doesn't have to be pixel perfect but this is a free+ challenge, figma file has everything you need. Also no need to use
min-width: 100vh;A block-level element always takes up the full width available (stretches out to the left and right as far as it can).min-height: 100vh;with flex or grid is enough for centering.Marked as helpful0 - P@haru-kunyoSubmitted 30 days agoWhat are you most proud of, and what would you do differently next time?
I am proud of the fact that I was able to create my first html,css challenge by taking a little help from mdn and css-tricks, next time I will try to complete it without any online help.
What challenges did you encounter, and how did you overcome them?I encounter the challenge of flex box property. When I made the body a flex and set justify-contents to center the 'attribution' div was in row with the card to i added flex-direction: column to make it go below the card but by doing so the justify-contents: center no longer worked, then i tried align-contents: center it still didn't work. Finally when i changed it to align-items: center the card was in the center of the screen.
What specific areas of your project would you like help with?code 1:
body{ display: flex; flex-direction: column; justify-content: center; }code 2:
body{ display: flex; flex-direction: column; align-content: center; }code 3:
body{ display: flex; flex-direction: column; align-items: center; }I want to know why code 1 and code 2 were not able to center the body while code 3 does it.
@KapteynUniversePosted 29 days agoWhen flex-direction is set to column,
align-items: center;centers the content horizontally, andjustify-content: center;centers it vertically. If flex-direction is row, it works the other way around.The problem you're facing is that the <body> element is only as tall as its content. That means you don't see the vertical centering visually but it works. To fix this, you need to set a height. Like you did here but instead of using margin-top, apply
min-height: 100vh;.Also, avoid using percentage-based heights (especially with low values), as they often behave unpredictably.
Marked as helpful0 - P@marketa-kalSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
This is my first challenge here.
What challenges did you encounter, and how did you overcome them?I am not able to cope with the footer shifting left when the viewport width is under 320px.
What specific areas of your project would you like help with?I’m quite frustrated with the footer shifting to the left when the viewport is narrower than 320px. So far, I haven’t found any solution other than changing the display property from flex to grid, which would allow me to control the layout more easily. However, I believe there must be a simpler solution.
@KapteynUniversePosted about 1 month agoBelow 320px doesn't really matter but the problem is you used fixed width values on main and img, they are overflowing under that threshold
Marked as helpful0 - @emirsezginnSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
I used the grid and flexbox structure well here, but cleaner code could have been written. I will try to write cleaner code next time.
@KapteynUniversePosted about 1 month agoMerhaba Emirhan, good job. Couple things:
Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your container div or wrapping it with a main would be good.
Images needs a meaningful alt text, unless decorative.
Do not use headings for sizes and do not skip them: always start from h1, followed by h2 and so on.
Those buttons should be hyperlinks, so correct element to use here is anchor element. Some might say it will bloat the html but to me, they are list of links, so you can also put them in a list.
Also flex on them (and grid on p's, h4 etc.) is unnecessary but if you need to align text, you can use text-align. I think you don't need any flex or grid for this challenge besides the one on the body to center the card.
You don't need to apply font family to every element. Applying to body would do the job but some elements like buttons don't inherit it. For that and many other things, i recommend you to use a modern css reset. You can check Andy Bells reset too.
Using fixed values like
width: 400px;will cause responsive issues later, usemax-width: 25rem;instead.Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries.
Using
font-display: swapin your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.Marked as helpful0 - P@Joshk7Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I liked the way that I initially load the data in for this project with one fetch call:
const fetchData = async () => { try { const response = await fetch("/data.json"); if (!response.ok) { throw new Error("Unable to fetch data"); } const result = await response.json(); quizzes = result.quizzes; renderQuizzes(); } catch (error) { menuList.innerHTML = `<li class="fetch__error">${error.message}</li>`; } };I could possibly handle the error clause by calling a function instead of manually adding an error, however, this does work.
What challenges did you encounter, and how did you overcome them?Initially, I was overwhelmed with where to start when developing the JavaScript for the quiz app's logic. However, I thought it through and decided that I needed to load the data in for the initial page. From there, the logic for the other pages followed naturally.
What specific areas of your project would you like help with?First, I'd like help on loading data into the project. I'm not positive that the way I did it is the best. Second, the conditional styling for the theme is based on toggling a css class on the root element:
const handleThemeClick = (e) => { root.classList.toggle("dark"); };.dark { --primary: var(--dark-navy); --primary-accent: var(--navy); --secondary: var(--pure-white); --secondary-accent: var(--light-bluish); }Are there better approaches to this?
@KapteynUniversePosted about 2 months agoHey Josh, i have no idea how good it is :D but i've made a react component to switch theme for a while ago. If you don't know react hooks, you can check this page for another similar way
On ThemeSwitcher component, i have:
const [theme, setTheme] = useState(() => { return localStorage.getItem("theme") || "light"; });This gets the theme on page load from localstorage, if there isn't a saved theme it sets it as light.
useEffect(() => { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("theme", theme); }, [theme]);This adds data-theme attribute to the html element and saves the current theme on localstorage. Only runs when the theme changes.
And lastly there is a function to call when user click the button. If it is light changes it to dark if not to light
const toggleTheme = () => { setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light")); };setTheme comes from the first hook above
const [theme, setTheme] = useState(() => ...basically theme is the variable and setTheme is the function that updates it. You can call setTheme function anytime and change the theme variable like setTheme("pink")<button onClick={toggleTheme} aria-label={`Switch to ${theme === "light" ? "dark" : "light"} mode`}>And I've set colors in css with variables.
[data-theme="dark"] { --color-bg-main: #0d0f12; ... } [data-theme="light"] { --color-bg-main: #ffffff; ... }Remember useEffect that runs whenever theme variable changes? It changes data-theme of html
<html lang="en" data-theme="dark">or<html lang="en" data-theme="light">and since html is the root element, all color variables changes accordinglyFor loading the data; since styles are similar, it should be possible to just use one section and update the context inside it. Also i think using aria-live is also essential here.
Marked as helpful1 - @leventsonerSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I'm most proud of achieving a pixel-perfect match with the design, especially the hover effects and responsive layout. The card's shadow effect and the smooth transition on the title hover came out particularly well. The mobile responsiveness works smoothly, and the image handling in different screen sizes is effective.
For next time, I would:
- Start with a mobile-first approach rather than desktop-first
- Use CSS custom properties (variables) for colors and spacing to make the code more maintainable
- Consider using relative units (rem/em) more consistently throughout the project
- Plan the responsive breakpoints more systematically
The main challenges I faced were:
-
Image handling in the mobile view - Initially, the image wasn't scaling properly on mobile screens. I solved this by using object-fit: cover and setting specific dimensions for the image container.
-
Font sizing for different screens - I struggled with making the font sizes match the design exactly on both mobile and desktop. While I ended up using media queries, I learned there are alternative approaches using relative units.
-
Card shadow and border - Getting the exact look of the card's shadow and border took some trial and error. I eventually achieved it by combining border and box-shadow properties effectively.
I overcame these challenges by consulting MDN documentation and experimenting with different CSS properties until I found the right combination.
What specific areas of your project would you like help with?I would appreciate feedback on:
-
Best practices for responsive typography - I'd like to know if there are better ways to handle font-size changes between mobile and desktop views without relying heavily on media queries.
-
CSS organization - While my code works, I'd love to hear suggestions about making it more maintainable and following industry best practices.
@KapteynUniversePosted 3 months agoMerhaba Levent, nice job.
For better responsive typography, you can use clamp function, there are also clamp calculators.
Addition to that:
Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Changing your container div with a main would be good. Also attribution div should be in a footer.
Avoid using fixed values like
width: 384px;, for better responsiveness use max-width with rem;max-width: 24rem;Images needs a meaningful alt text, unless decorative. For this case, i think illustration image is decorative, so you can leave alt text empty or use aria-hidden and also Greg's avatar image needs a bit more content.
That active state in the design (your h3) means that tag is interactible, for this case it should be a hyperlink of the article. Like:
<h3> <a href="#">HTML & CSS foundations</a> </h3>Also if you used h3 for the size, don't. Do not skip heading levels: always start from h1, followed by h2 and so on. But another thing; this card would never be used to serve the main heading on a page, so on a real page h2 or h3 probably would be ok.
You can put font-family etc. to the body, no need to use with *. Most of the elements inherit them. For those that don't and for many other things: i recommend you to use a modern css reset for every project. You can check Andy Bells reset too.
Marked as helpful2 - @burakugrasSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I will feel free to ask any AI assistant. I am loosing my time while trying to push myself unnecessarily.
What challenges did you encounter, and how did you overcome them?I could not find suitable attribute. And I had problems with div alignments. But solved the problem by searching new attributes.
@KapteynUniversePosted 4 months agoMerhaba Burak, good job.
You didn't ask for feedback but here it is :D (I always give feedback to fellow turkish people nonetheless)
Since you used flex on the body, instead of
margin: 15%;you can give body amin-height: 100vh;to center the card vertically.Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your card div with a main would be good.
Avoid using fixed values like
width: 200px;, for better responsiveness usemax-width: 12.5rem;. 200 is a bit small tho, 20rem would be better.Images need a meaningful alt text, unless decorative. For this case, i think something like "QR code leading to frontendmentor.io" might be ok.
Never use px for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for especially font sizes and media queries. You can also use clamp function for better responsiveness.
The WCAG criteria states that line-height should be at least 1.5.
I recommend you to use a modern css reset for every project. You can check Andy Bells reset too.
Also using a external CSS file might be better than internal
Marked as helpful1 - @ronilucylucySubmitted 4 months agoWhat specific areas of your project would you like help with?
i didnt do mobile-design and responsive design kinda sucks, but in order to do it i need to redo my code. i definitely want to start another project so i would like to hear some critic how shitty code is :D
@KapteynUniversePosted 4 months agoHey, ronilucylucy, nice job. It is been a while since a made a long feedback. First of don't get depressed and. Take your time, rest if you are stuck, solutions of the problems usually comes to mind when you are taking a break.
Starting mobile layout and then designing desktop is easier. When you write the HTML, it is mostly mobile layout without CSS. Before writing a single line of code thinking about what to do, how to do helps too.
HTML is responsive by default. We are the ones breaking it. For example
width: 350px;andwidth: 400px;on the .text and .div_images p. Don't use fixed values, use max-width instead. Also grid template areas needs to change too for mobile layout, like:grid-template-areas: "div_2images" "div_3images";but it won't solve everything. I like to use flex-wrap on some cases. You can also use
flex-wrap: wrap;on all_columns.Never use fixed values for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for the font sizes and media queries. You can also use clamp function for better responsiveness
Do not skip heading levels. Also if you used them for sizes don't
Images needs to have an alt text, and that alt text should be meaningful, unless they are decorative. For this challenge, i think person avatars and socials are not decorative.
You can put # to the href of anchor tags for placeholder.
Some transitions for the active states might be good too.
I recommend you to use a modern css reset for every project. You can check Andy Bells reset too.
Marked as helpful0 - @m-abubakr1Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I have a better understanding of the Picture tag in HTML, and I will move on to cover screen reader optimization in this project. The prices are not so visible to screen readers who cannot see the visual, gonna find a better way to solve that.
What challenges did you encounter, and how did you overcome them?The min-height should not be showing the scrollbar on 100vh, but it was giving the scrollbar. It worked on 95vh, still trying to figure out why?
What specific areas of your project would you like help with?Better Improvisations and developing standards for screen readers as well. Plus The min-height:100vh; giving a scrollbar is confusing.
@KapteynUniversePosted 4 months agoHey Abubakr, nice job.
margin: 1rem;+min-height:100vhgiving the scrollbar. You don't need margin on the body.Edit: I guess you added margin so article won't touch edges on small screens, you can use margin-inline instead
Marked as helpful1 - P@simpsonpaisleySubmitted 4 months agoWhat specific areas of your project would you like help with?
I've tried to make this as accessible as possible, however, I'm sure improvements can be made, especially to the JavaScript, which I feel could have been a lot simpler than I've made it.
I'm also kind of unsure as to when to use REMs and when not to. My design doesn't seem to completely match the design. I know to use REMS because people use different font sizes for accessibility, but I feel like I've overused them here.
@KapteynUniversePosted 4 months agoHey Paisley, nice job.
For accesibility, i don't think making the texts tabable is necessary.
I sometimes use pixel for small things like border radius but i think it is ok to use rem for everything. You can use em for some cases like button paddings. Maybe this video helps.
You can also use details for this one.
Marked as helpful0 - @JDPWebSubmitted 4 months agoWhat challenges did you encounter, and how did you overcome them?
setting meaningful class names, but once the structure was clear to me, the classes were easier to determine.
What specific areas of your project would you like help with?Any feedback is welcome.
@KapteynUniversePosted 4 months agoHey Juan, nice job.
Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your card div with a main would be good.
Font size on the elements (except the name) overriding the font-size on the body(which is good for this situation because you used rem on them) but never use fixed values for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for the font sizes and media queries.
Use max-width for better responsiveness.
Images need a meaningful alt text, unless decorative. For this case, you can leave empty the alt text of illustration or use aria-hidden="true" so screen-readers ignore the it. Also avatar needs more content.
Marked as helpful1 - @tugcekizildgSubmitted 4 months ago@KapteynUniversePosted 4 months ago
Merhaba Tuğçe, normalde feedback istemeyenlere yazmam ama Türk görünce dayanamıyorum :D. Nice job.
Your font variables overriding the font-size on the body(which is good for this situation because you used rem on them) but never use fixed values for the font sizes. So people with visual impairment can adjust the font size on their browser. Use rem for the font sizes and media queries.
Landmarks, (or this page) are essencial for accesibility. Every page needs one main. Wrapping your bento grid div with a main would be good.
Texts are very big, so i don't think there is a problem for this challenge but i am not dyslexic or have a bad vision so i am not sure. The WCAG criteria states that line-height should be at least 1.5.
I struggle with this one all the time but i think images are decorative on this one so it is ok to leave empty alt texts. Or you can use
aria-hidden="true"so screen-readers ignore the images.Using
font-display: swapin your @font-face rule improves performance by showing fallback text until the custom font loads, preventing a blank screen (flash of invisible text). The downside is a brief flash when the font switches, but it’s usually better than waiting for text to appear.I recommend you to use a modern css reset for every project. You can check Andy Bell's reset too.
Also don't check my my solution for this challenge :D There was a lot of errors
1 - @paduiiiSubmitted 4 months agoWhat specific areas of your project would you like help with?
I want to know is there anyway better then using position: relative; on logo image cause when the monitor change size image in card still in the same position it not responsive so I think there might be a better way than position: relative;
@KapteynUniversePosted 4 months agoHey DuyDui,
You can use flex or grid on the cards and align-self to the icons. But instead of your way, you can also apply absolute to the images and relative to the cards and position images relatively to the card div.
.card_logo { position: absolute; right: 5%; bottom: 5%; } .card { position: relative; }For example
Marked as helpful2 - P@Ronnarit00000Submitted 4 months agoWhat challenges did you encounter, and how did you overcome them?
Border top on feature card. I create pseudo-elements control by position relative, absolute.
@KapteynUniversePosted 4 months agoHey Ronnarit, nice job.
You can also use border-top on the items.
1 - P@erika-codesSubmitted 4 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud of being determined enough to complete the project.
What challenges did you encounter, and how did you overcome them?The challenges I encountered had mostly to do with the media queries. My understanding of how they work and what I had to do to make it work are two different things. I overcame this by just playing around with it until it looked correct.
What specific areas of your project would you like help with?The specific area of my project that I would like help with is media queries. I thought that you always use max-width, but I was unable to make my project look correct using just that. I had to use min-width as well.
@KapteynUniversePosted 4 months agoHey Erika, nice job.
I have never heard that you should always use media queries with max-width, but I think using min-width is better. I guess it is a choice about choosing between starting with mobile or desktop layout.
2
