Skip to content
OverviewSolutions
7
Comments
11
P
Levi
@law973

All comments

  • Outstandinggirl13•70
    @Outstandinggirl13
    What are you most proud of, and what would you do differently next time?

    Learning Progress:

    • Worked with a high-quality Figma design file, which helped me achieve near pixel perfect accuracy.
    • Improved coding skills and understanding of BEM methodology.
    • Used meaningful names for elements.
    What challenges did you encounter, and how did you overcome them?

    Development Insights:

    • Encountered and resolved issues styling the preview image.
    • Used flexbox to center the image.

    Responsive Design:

    • Implemented a clamp() function for dynamic width adjustments between mobile and desktop views.

    HTML Enhancement:

    • Wrapped the publication date in a tag for better accessibility.

    Blog preview card made with semantic HTML and CSS

    2
    P
    Levi•230
    @law973

    Hey there! The solution looks really good. There are a couple of things worth considering. I'll preface this by saying that my comments can get long and I usually focus more on what could be improved than on what was done well, but I do that because I like everything else I've seen.

    Without further ado, and in no particular order:

    • The card should use either an article tag or a div (probably the former with the section tags being used), and the main tag should go around the card; the main tag contains that which is considered to be the "main" content, and normally would not be tied to a specific component on the page.
    • I am not sure that h2 is the best choice for the author name when something else (like p or span) could be used instead, since a heading is meant to be part of a "table of contents" of sorts and have content that follows it.
    • On the topic of headings, the usage of h1 might not be the most appropriate either. If this component was part of an actual page, there would probably be other cards/previews, and this preview card would not be using an h1, of which there should only be one per page. I believe h2 would be more appropriate. (Having said this, heading levels should normally not be skipped either.)
    • The alt text for the blog component image could perhaps be more descriptive in regards to what is being visually portrayed, but I'll admit I'm unsure about this. I have been told that for decorative images (such as background decorations) the alt should be left blank (alt=""), and there's not a whole lot of information that the blog image happens to provide outside of visual appeal.
    • When the footer has position: fixed, it's noticeable (albeit at very small viewport widths) that it isn't centered and stays to the left. In situations where elements have this type of positioning, here's a trick to keeping them centered horizontally:
    left: 50%;
transform: translateX(-50%);
    • Using clamp() for font sizes to make them change dynamically along with the card is an option that could be considered. This would also have the bonus of removing much of the media query at the end and trimming up the code quite a bit.
    • The challenge mentions being able to see hover and focus states for interactive elements, so I would consider using :focus on the blog article's title (though many people don't seem to bother with this sort of thing, so it might just be me).
    • At the moment I'm fond of using the font shorthand, where the font-weight, font-size, and line-height can be specified in one line (though the font-family must be declared there as well). (Perhaps it's not the best for readability, or there's a technical drawback I'm unaware of, but I think it's worth mentioning!)
    • If the card is set to start and stop growing in width at the right times, then I believe that the width could be moved outside of the media query and the max-width values could potentially be removed (and combined with using clamp() for font sizes, this would remove the need for that media query altogether).
    • Adding a top margin to the card would give it some space from the very top of the page on certain viewport sizes, which would look nicer.
    • The style guides typically mention making the solutions compatible with screen widths as low as 320px, and here the card goes beyond the screen at that point. Keeping this in mind with the usage of max-width or side margins may be a good idea for future solutions.
    • It is my understanding that for accessibility, it's good to aim for making things visible/useable up to a 200% zoom, and at narrower screen sizes too. If you ever want an extra challenge, try this out sometime.
    • Since the Frontend Mentor link opens in a new tab, consider including a hidden span for accessibility purposes, something like this:
    .sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"><span class="sr-only">(Opens in a new tab)</span>Frontend Mentor</a>.

    I like that the card link actually goes to a page with information on HTML and CSS. You did a good job on matching the design screenshots. I also like how thorough the README file is (those Figma shortcuts might come in handy). Please don't be discouraged by the amount of things I mentioned; there's always a lot to learn and not too long ago I didn't know any of these things either. I need to update my own solution actually.

    This ended up being longer than even I thought it would. I think I'm done commenting today...

    Marked as helpful
  • P
    Tsukimi•820
    @hikawi
    What are you most proud of, and what would you do differently next time?

    I'm most proud of completing the challenge of not using JS for the solution. This was made completely in Astro components with no (or as little as possible) JS footprint.

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

    Had some troubles with fluid typography as the library wasn't able to recognize arbitrary Tailwind values, just having to add those styles needed in the tailwind config and everything worked again.

    FAQ Accordion

    #astro#tailwind-css
    2
    P
    Levi•230
    @law973

    Hey! I think your solution is great overall, with the box shadow in particular standing out to me (mine wasn't that smooth).

    A couple of quibbles:

    • The challenge does mention being able to "see hover and focus states for all interactive elements on the page", so I would use the :focus pseudo-class to make the summary texts turn pink when they are selected.
    • For some reason, the file provided for this challenge has the words "Frontend Mentor" inserted into the last summary question, which doesn't correspond with the design preview that they want people to try and match. I'd remove those words so that the last question can fit on a single line in the desktop view, which matches the requested design (and arguably looks better).
    • There is a minor typo in the page title.
    • I think it'd be slick if the mobile background image and the desktop background image had the same height when switching from one to the other (but that's more personal preference and not an issue really).

    The sizing, spacing, and responsiveness are on point, so all in all I think it's pretty nice. Keep up the good work!

    ...

    (This comment got kind of long. I guess you could say...)

    Marked as helpful
  • tailor-made-god•120
    @tailor-made-god
    What are you most proud of, and what would you do differently next time?

    I am most proud of using list and table for first time in my design. Next time I will try to design responsive design for example all elements will change size little bit to fit the device size and align uniformly.

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

    I had a problem in aligning text inside the table. I overcome this by using individual padding and using width property in table data.

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

    I want to know how to reduce space before the list marker and how to center the marker between two lines if the list item span to two lines,

    Recipe Page designed with Basic Html and Css

    1
    P
    Levi•230
    @law973

    Hey! The solution and design look close, which is superb. Judging by that and the areas you would like help with, I would say you have an attention to detail.

    To reduce space before the ordered list marker, use "padding-left: 0px" on the ol element, which will shift the list over to the left. From there, play with the value of "padding-left" until you have the desired spacing (perhaps there's a better way, but that's how I did it).

    To center the marker between two lines if the list item span to two lines, try using Flexbox (changing the display type removes the default bullet, and Flex allows you to center things) and a custom bullet point that's inserted using "::before". Here's what I did for that:

    /* Removes default bullet points and vertically centers the custom bullet points */
ul li {
    align-items: center;
    display: flex;
}

/* General styling for custom bullet point of unordered lists */
ul li::before {
    color: var(--brown-800);
    content: "\2022";
    margin-right: 24px;
}
/* Note: "\2022" is the unicode character for a bullet */

    A couple more things worth pointing out:

    • Header tags are more for content that will be used across multiple pages of a site (like a navigation bar that appears on every page, for example). The omelette image and hero section are specific to this recipe and card, so they, along with the "card__container" div, should go inside the main tag. (I am realizing as I type this that my own solution looks horrendous in this regard; it wasn't too long ago, but I have learned a lot thanks to the other contributors here.)

    • Use an h2 for the "Preparation time" text instead of h3; using an h3 would make sense if it was a heading that indicated a subsection within a section that already had an h2 (it's best to avoid skipping heading numbers if you can). The text for the new h2 can be resized if needed via CSS.

    • The omelette image looks fine on the desktop sizing and at 375px, but anything between those two sizes and it gets quite stretched, which is not good. Try out "max-width: 100%" or "object-fit: cover" for situations like this.

    • The usage of the hr tag seems appropriate (I haven't used them much personally), though I would try to style them to match the look of the border lines in the table in regards to thickness and color (it's clearer on zooming in that they have a different appearance). Try "border-width: 0" and "height: 1px".

    • I would remove the attribution styling inside the head and the "attribution" div if it's not going to be used.

    Outside of that, I think you've done some great work here.

    (Thank you for reading all of this.)

    Marked as helpful
  • P
    Karsten Løgstrup•170
    @logstrup78
    What are you most proud of, and what would you do differently next time?

    My mediaQueries works, that is good.

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

    I had som problems separating the numbers from the text in the ordered list. I tried different things, but couldn't get it to work.

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

    The above!

    A Recipe page using only HTML and CSS

    2
    P
    Levi•230
    @law973

    Hi! Nice job on using a media query. In order to create space between your ordered list numbers and the list items, use a ::marker selector instead of ::before; that way, adding left padding to the li elements will create the desired effect.

    There's a few other things to mention. I think h2 should be used in place of h3; the numbers should descend based on their position in the document. If, for example, there was a subsection in the "Preparation time" section, then it would make sense to use h3 there. I would also say that the headings should be contained within the divs they belong to and not outside of them.

    Regarding the usage of semantic HTML, I like that you used the main tag. It's worth noting that all of the main content should be placed within there, which would include the image. A footer tag could be used for the attribution section, the divs within the card could use section tags, and perhaps the card itself could use its own article tag.

    It seems like the repository is private, which means the "View Code" link doesn't function properly and the code can only be inspected through browser developer tools; I would consider changing this setup for future submissions in order to make it easier for others to deliver feedback.

    I've done this challenge myself, and I know it can be time-consuming to get the details right, so I'd like to commend you for doing a solid job on the padding, text color and sizing, and using the font families in the right places.

    I hope this helps!

    Marked as helpful
  • P
    Levi•230
    @law973

    Hey there! From what I've seen, the solution looks presentable on most desktop and mobile displays (in landscape orientation as well), which is great. I'm not at all familiar with Tailwind, and there's a lot to CSS Grid, so the class naming convention and the overall styling implementation seems both daunting and impressive to me. I haven't tackled this challenge myself, but there are a couple of things I can point out that I think are worth mentioning.

    The paragraph in the main grid item (Section 2 on Desktop and Section 1 on Mobile) doesn't have "text-align: center". This is unnoticeable on most displays, but the challenges that I've tried always mention testing down to 320px in width, at which point this aspect becomes apparent. Since the h1 is centered, I believe it would be more visually appealing if that was the case for the p element as well.

    Another grid item (Section 4 on Desktop and Section 2 on Mobile) could use an adjustment of some kind in regards to its sizing, as there are certain displays where the full text can't be read, and the final word appears to be too close to the bottom at full size.

    The grid item on the upper right (Section 3 on Desktop and Section 4 on Mobile) could use a larger maximum size for its image in order to match the requested design.

    There's a span inside an h2 (Section 7 on Desktop and Section 6 on Mobile) that pokes out of the grid item box on certain display sizes.

    Lastly, the words "quicker" and "faster" could use i or em tags in order to give them the appropriate styling.

    I find it easier to point out flaws than I do to give credit where credit's due, so I imagine that up to this point my feedback may seem unduly harsh. Assuming that's the case, I would like to reiterate that overall the solution looks fantastic, and to say that I think you have the potential to be even better.

    Keep up the good work!

    Marked as helpful
  • P
    Sabine•80
    @SabineEmden
    What are you most proud of, and what would you do differently next time?

    I was able to style the custom markers for the two unordered lists for and the counters for the ordered list.

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

    For the ordered list, I styled the counters using the ::marker pseudo-element.

    Styling the list markers for the unordered lists was a bit more challenging. In the JPEG design file for the mobile layout, the markers do not sit next to the first line of text but are centered vertically if the text content of the list item wraps over two lines. I used custom markers with the ::before pseudo-element to position the markers with flexbox.

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

    I'm looking simpler CSS selectors to add the horizontal lines to the nutrition table. This is what I have now:

    tr:not(:first-child) td,
tr:not(:first-child) th {
  border-top: 1px solid var(--stone-100);
}

    Recipe page with custom list markers

    1
    P
    Levi•230
    @law973

    Looks pretty good!

    To add horizontal lines to the nutrition table, I used this in my solution:

    tr~tr {
    border-top: 1px solid var(--stone-150);
}

    The tilde symbol (~) means that the element on the right side will be styled if it is preceded by the element on the left side. In this case, table rows that have table rows before them will be styled, but table rows that don't have a table row above them won't be, which means that the line won't appear on the top of the table.

    There's a handy list here that has information on this selector and others.

    (Also good job on the custom unordered list bullets; I found those tricky as well.)

    Marked as helpful
  • P
    Levi•230
    @law973

    Hey!

    I appreciate the use of transitions on the buttons, as it looks nice and I haven't seen that too often. Using anchor elements instead of buttons might be a more fitting choice, but in any case the card is pretty good.

    Also, I had someone give me a tip about accessibility that seems relevant here. Those links in the attribution div open new windows when they're clicked on, which means they could be confusing for those using assistive technology. In cases like that, text (such as "(Opens in a new tab)") can be placed in a span inside of the anchor element, the span can be given a class (like "sr-only"), and some code like this can be placed in your CSS:

    .sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

    It won't affect the design visually, and it would help some users. (I got the code above from here.)

    One more thing: with this particular challenge, the background color makes the links in the attribution div hard to see. If you ever want to find out if certain text and background colors have enough contrast, try out a tool like the Contrast Checker.

    Happy coding!

  • Santiago Ison•130
    @1sonn
    What are you most proud of, and what would you do differently next time?

    Estoy orgulloso del tiempo que me llevo y lo bien que quedó

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

    Creo que me sigue costando un poco el tema del CSS, pero es tema de constancia

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

    Quisiera que me ayuden como seccionar el html

    QR

    1
    P
    Levi•230
    @law973

    ¡Eh!

    Estoy escribiendo esto usando un traductor en línea, así que disculpas si no es tan claro como se pretende.

    No tengo mucho que decir, ya que la solución está muy cerca del diseño solicitado. Creo que el texto alternativo de la imagen podría ser un poco más descriptivo («un código QR blanco con un fondo azul.», por ejemplo). Si se va a utilizar un encabezado, no debería saltarse el h1; debería ir siempre en orden descendente (si se necesita que el texto sea más pequeño, se le puede dar un nuevo estilo con una clase o id). Por lo que he aprendido, probablemente usaría un elemento h1 con estilo o incluso un elemento p con estilo para ese texto. Si se va a implementar HTML semántico, consideraría el uso de etiquetas de artículo o sección (quizás convirtiendo el div de caja en un elemento de artículo y el div de texto en un elemento de sección). Todo en el cuerpo podría estar envuelto en un elemento principal, aunque eso puede parecer redundante en este caso, ya que sólo hay un componente para contener y no hay encabezado o pie de página para ir fuera de una etiqueta principal.

    Aparte de estas cosas, creo que has hecho un buen trabajo. Buen trabajo.

    (Traducción realizada con la versión gratuita del traductor DeepL.com)

  • P
    Levi•230
    @law973

    Hey! I like how well your solution matches the design.

    I think using p tags instead of h1 and h2, and then styling those pieces of text using classes, might be better; one way to think of the profile card is of it being a potential component on a page, not as the main content itself, if that makes sense. Headings are meant to divide sections/other pieces of content and that's not the purpose they're serving here (I made the choice of using headings myself with my initial solution, and someone helped me by pointing this out).

    The next point may lean more towards personal preference, but I would make the background of a card link belong to the anchor element itself and not the div that contains it; this way, a user can access the link by hovering over the link's background and without having to hover over the text specifically.

    Marked as helpful
  • JuanBachurDEV•40
    @JuanBachurDEV
    What are you most proud of, and what would you do differently next time?

    The exercise looks like very similar about the example of the frontend mentor page. In the next exercise I would like write with em and rem units in CSS, I think that way is the correct form to establish or write a good code.

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

    I could centralized the card in the middle of the DOM. Previously in the last exercise I could'n because I didn't notice how to made it.

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

    I need some suggest about how to write with em and rem units in css.

    Responsive landing page using flexbox

    #accessibility
    2
    P
    Levi•230
    @law973

    Hey there! I like the way your solution turned out visually.

    Regarding the usage of rem units, there's a great article called "The Surprising Truth About Pixels and Accessibility" that I found helpful: https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/

    One other thing: the deep blue color of the links in the attribution section makes them a little hard to read when they have a dark background behind them; choosing the right colors to create enough contrast between pieces of text and their backgrounds is important. There's a tool called a Contrast Checker that's really handy in this regard: https://webaim.org/resources/contrastchecker/

    Hope this helps!

  • P
    Levi•230
    @law973

    Hey! I like that the profile is viewable on the full range of screen sizes.

    I'd suggest using anchor elements in place of the h4 elements, for a couple of reasons. Those parts of the card are intended to lead to Jessica's profile pages, so using hyperlinks would be a good choice for that. Also, it would be best to avoid skipping heading numbers if possible; going from h1 to h2 to h3 would be better than going from h1 straight to h3, for example. If an h2 needs to be smaller like an h4, it can be resized with styling.

    Using pseudo-classes such as :hover would allow the background color and text color of the links to change upon user interaction, and would help in creating a responsive and complete design.

    Marked as helpful