Kevin Powell - Community•13mo ago

Reviewing small widget

Hi! I'm making this small widget that gives some info on recipes, and I was wondering if I'm following standard HTML/CSS procedures well or not. Any advice on how to make it more semantic/more industry standard would be great. Thanks so much! https://jsfiddle.net/k0a7L6j3/

Berry Widget - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

7 Replies

vince•13mo ago

it's not responsive though not sure if the design you have gave you a mobile version

Gmoney_123OP•13mo ago

oh its for a chrome extension not rlly meant to be responsive (at least as of now)

ἔρως•13mo ago

well, you don't use a <main>, your classes are kinda a mess and some sections could be improved this is an example of an element that could be reduced

<section class="recipe-section column left full">
        <h2 class="recipe-section-title">Apple Bundt Cake</h2>
        <div class="row recipe-section-row evenly-space">
          <ul class="column recipe-section-items full">
            <li>3 cups all-purpose flour</li>
            <li>1 teaspoon baking soda</li>
            <li>3 teaspoons ground cinnamon</li>
            <li>1/2 teaspoon ground nutmeg</li>
            <li>3 cups all-purpose flour</li>
            <li>1 teaspoon baking soda</li>
            <li>3 teaspoons ground cinnamon</li>
            <li>1/2 teaspoon ground nutmeg</li>
          </ul>
        </div>
      </section>

<section class="recipe-section column left full">
        <h2 class="recipe-section-title">Apple Bundt Cake</h2>
        <div class="row recipe-section-row evenly-space">
          <ul class="column recipe-section-items full">
            <li>3 cups all-purpose flour</li>
            <li>1 teaspoon baking soda</li>
            <li>3 teaspoons ground cinnamon</li>
            <li>1/2 teaspoon ground nutmeg</li>
            <li>3 cups all-purpose flour</li>
            <li>1 teaspoon baking soda</li>
            <li>3 teaspoons ground cinnamon</li>
            <li>1/2 teaspoon ground nutmeg</li>
          </ul>
        </div>
      </section>

you don't need the <div> around it: just put the list alone ~~in fact, i would use flex on this~~ grid turned out to be better

Gmoney_123OP•13mo ago

thanks for the help! any other specific examples of classes being messy i might be able to fix?

ἔρως•13mo ago

personally, i think it's a bad idea to use a span with a bold class, when you have the <b> element but this is very subjective, so, that's fine, but clunky (in my opinion) the .column class also sets display: flex what if you want display: grid; grid-direction: column? the .evenly-space actually sets space-between you really would benefit from sass to make all the classes you probably will want by the way, since you're making an extension, you should do something very simple that will benefit you immensely: use svg you can have a single <svg> that has a <symbol id="..."> with the <image> in it the src can have a base64 image, which then saves you a lot of troubles

Gmoney_123OP•13mo ago

wait i dont understand what u mean here i dont think i can haver a main. like i said, its for a chrome extension, so its being added on top of a webpage

ἔρως•13mo ago

i mean that you can just shove your images in the html file and have it all contained

Gaming

Programming

Reviewing small widget