5 ms·

Now without modifying the HTML, how would I get the author's name only to appear on the right of the author image with the other text underneath? And add a line

Now without modifying the HTML, how would I get the author's name only to appear on the right of the author image with the other text underneath? And add a line break before the company name? And make the word "tiny" use a small font? And if you need to modify the HTML, were the extra tags added 100% only for semantic reasons and not for presentation reasons?

Yzupnick 5y ago
I often have trouble writing CSS. Here is how I approached this challenge. https://jsfiddle.net/mwabc719/ https://jsfiddle.net/mwabc719/ Anyone have good advice on a better way?
- mgkimsal 5y ago
  You modified the HTML. And... I didn't see the output described in the parent in your fiddle. ?
- chrisseaton 5y ago
  > without modifying the HTML > Here is how I approached this challenge ...but you modified the HTML?
  - dragonwriter 5y ago
    > ...but you modified the HTML? The original challenge includes questions that apply only if the resolution involves HTML modifications, which (contrary to the earlier text viewed in isolation) indicates that such modifications are not invalid in response to the challenge.
    - Yzupnick 5y ago
      Yah, maybe I should have been explicit, but I think my HTML change as semantically important. (My interpretation of the last line of the challenge.)
      - deleted 5y ago
        [deleted]
      - deleted 5y ago
        [deleted]
Kerrick 5y ago
It's possible if you substitute "without modifying the HTML" with "without modifying the HTML for styling purposes." That's because the HTML is adversely and unnecessarily bare-bones, missing semantic markup that the CSS could hook into if needed. Specifically: - There must be a logical reason for wanting to make the word "tiny" use a small font, so that word is missing a tag that represents that prosaic intent. I've used , but depending on how you'd verbalize the word "tiny" (which is what you're representing both with making it use a smaller font and with wrapping it in a semantic tag), you might also wish to use or another tag. - Similarly, there is missing semantic markup inside the <figcaption> for the person's name, job title and company. Those are semantically separate concepts for each other, but for some reason the example HTML was written without semantically differentiating them. This is much like trying to represent two paragraphs of prose with just a couple newlines, rather than actually wrapping each in a tag. To fix this error, I've added tags as necessary to implement the semantic hCard microformat -- independently of styling. - I've also added the recommended attributes to the image tag, because it was missing. (And for the sake of the Codepen, I replaced the image's src with a placeholder so as not to hotlink from tailwind's site.) Given those improvements to the semantic structure of the HTML, here's how you can make the author's name appear on the right, with the quote underneath, with a line break before the company name, and "tiny" in a small font: https://codepen.io/Kerrick/pen/KKXgPYw https://codepen.io/Kerrick/pen/KKXgPYw
- seanwilson 5y ago
 > There must be a logical reason for wanting to make the word "tiny" use a small font > - Similarly, there is missing semantic markup inside the <figcaption> for the person's name, job title and company. Those are semantically separate concepts for each other, but for some reason the example HTML was written without semantically differentiating them. Presentation/visuals aren't always tied so closely with logic though. "To make it look nice" is a valid reason. As I said, this experiment has failed. All modern website designs use divs + classes everywhere for styling. I agree extra semantic tags would be useful but at some stage you're going to be forcing yourself to come up with semantic reasons to add a tag when there isn't one. > I've also added the recommended attributes to the image tag, because it was missing. Related: alt="" is best practice for when an image tag is for presentation purposes only because images don't have to be there for semantic reasons.
BurningPenguin 5y ago
I tried it just for the lolz and without changing a single bit of HTML. It's absolutely disgusting and nobody in their right mind should do this EVER! Only tested in Chrome, it might fail in other browsers. And on mobile it will very likely break. https://codepen.io/BlindPenguin/pen/GRMjjvq https://codepen.io/BlindPenguin/pen/GRMjjvq I'm off scrubbing my hands with a wire brush and abrasive cleaner.
z3t4 5y ago
You don't use CSS to move stuff around. If you for example want to place paragraph-1 below paragraph-2 you simply move it in the HTML. And if you want to add a line break you add in the HTML. If you want to make a word tiny, you can use the HTML element. Here is the CSS for my example body { font-family: sans-serif; background: #e4e5f8 } figure { text-align: center; background: #fff; border-radius: 1rem; padding: 1.5rem; max-width: 40rem; } figure img { border-radius: 50%; width: 7rem; height: 7rem; object-fit: cover; } figure blockquote { font-size: 1.125rem; margin: 1rem; } figure b { color: #0ea5e9; display: block; } The trick is to keep things simple. Then when you have mastered the rules, you can break the rules. eg. when you can style semantic HTML however you want without adding div's and CSS classes, that's when you can start adding a little div and class here and there just to keep things even more simple. Simple code is most of the time faster to load, and easier to maintain.

Yzupnick 5y ago

I often have trouble writing CSS. Here is how I approached this challenge. https://jsfiddle.net/mwabc719/ https://jsfiddle.net/mwabc719/ Anyone have good advice on a better way?

mgkimsal 5y ago
You modified the HTML. And... I didn't see the output described in the parent in your fiddle. ?
chrisseaton 5y ago
> without modifying the HTML > Here is how I approached this challenge ...but you modified the HTML?
- dragonwriter 5y ago
  > ...but you modified the HTML? The original challenge includes questions that apply only if the resolution involves HTML modifications, which (contrary to the earlier text viewed in isolation) indicates that such modifications are not invalid in response to the challenge.
  - Yzupnick 5y ago
    Yah, maybe I should have been explicit, but I think my HTML change as semantically important. (My interpretation of the last line of the challenge.)
    - deleted 5y ago
      [deleted]
    - deleted 5y ago
      [deleted]

Kerrick 5y ago

It's possible if you substitute "without modifying the HTML" with "without modifying the HTML for styling purposes." That's because the HTML is adversely and unnecessarily bare-bones, missing semantic markup that the CSS could hook into if needed. Specifically: - There must be a logical reason for wanting to make the word "tiny" use a small font, so that word is missing a tag that represents that prosaic intent. I've used , but depending on how you'd verbalize the word "tiny" (which is what you're representing both with making it use a smaller font and with wrapping it in a semantic tag), you might also wish to use or another tag. - Similarly, there is missing semantic markup inside the <figcaption> for the person's name, job title and company. Those are semantically separate concepts for each other, but for some reason the example HTML was written without semantically differentiating them. This is much like trying to represent two paragraphs of prose with just a couple newlines, rather than actually wrapping each in a tag. To fix this error, I've added tags as necessary to implement the semantic hCard microformat -- independently of styling. - I've also added the recommended attributes to the image tag, because it was missing. (And for the sake of the Codepen, I replaced the image's src with a placeholder so as not to hotlink from tailwind's site.) Given those improvements to the semantic structure of the HTML, here's how you can make the author's name appear on the right, with the quote underneath, with a line break before the company name, and "tiny" in a small font: https://codepen.io/Kerrick/pen/KKXgPYw https://codepen.io/Kerrick/pen/KKXgPYw

seanwilson 5y ago
> There must be a logical reason for wanting to make the word "tiny" use a small font > - Similarly, there is missing semantic markup inside the <figcaption> for the person's name, job title and company. Those are semantically separate concepts for each other, but for some reason the example HTML was written without semantically differentiating them. Presentation/visuals aren't always tied so closely with logic though. "To make it look nice" is a valid reason. As I said, this experiment has failed. All modern website designs use divs + classes everywhere for styling. I agree extra semantic tags would be useful but at some stage you're going to be forcing yourself to come up with semantic reasons to add a tag when there isn't one. > I've also added the recommended attributes to the image tag, because it was missing. Related: alt="" is best practice for when an image tag is for presentation purposes only because images don't have to be there for semantic reasons.

BurningPenguin 5y ago

I tried it just for the lolz and without changing a single bit of HTML. It's absolutely disgusting and nobody in their right mind should do this EVER! Only tested in Chrome, it might fail in other browsers. And on mobile it will very likely break. https://codepen.io/BlindPenguin/pen/GRMjjvq https://codepen.io/BlindPenguin/pen/GRMjjvq I'm off scrubbing my hands with a wire brush and abrasive cleaner.

z3t4 5y ago

You don't use CSS to move stuff around. If you for example want to place paragraph-1 below paragraph-2 you simply move it in the HTML. And if you want to add a line break you add in the HTML. If you want to make a word tiny, you can use the HTML element. Here is the CSS for my example body { font-family: sans-serif; background: #e4e5f8 } figure { text-align: center; background: #fff; border-radius: 1rem; padding: 1.5rem; max-width: 40rem; } figure img { border-radius: 50%; width: 7rem; height: 7rem; object-fit: cover; } figure blockquote { font-size: 1.125rem; margin: 1rem; } figure b { color: #0ea5e9; display: block; } The trick is to keep things simple. Then when you have mastered the rules, you can break the rules. eg. when you can style semantic HTML however you want without adding div's and CSS classes, that's when you can start adding a little div and class here and there just to keep things even more simple. Simple code is most of the time faster to load, and easier to maintain.