Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Sabine• 40

    @SabineEmden

    Submitted

    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

    Levi• 90

    @law973

    Posted

    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

    0
  • Levi• 90

    @law973

    Posted

    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!

    0
  • Santiago Ison• 50

    @1sonn

    Submitted

    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

    Levi• 90

    @law973

    Posted

    ¡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)

    1
  • Levi• 90

    @law973

    Posted

    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

    0
  • JuanBachurDEV• 30

    @JuanBachurDEV

    Submitted

    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

    2

    Levi• 90

    @law973

    Posted

    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!

    0
  • Levi• 90

    @law973

    Posted

    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

    0