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.
No description
7 Replies
vince
vince14mo ago
it's not responsive though not sure if the design you have gave you a mobile version
Gmoney_123
Gmoney_123OP14mo ago
oh its for a chrome extension not rlly meant to be responsive (at least as of now)
ἔρως
ἔρως14mo 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_123
Gmoney_123OP14mo ago
thanks for the help! any other specific examples of classes being messy i might be able to fix?
ἔρως
ἔρως14mo 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_123
Gmoney_123OP14mo 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
ἔρως
ἔρως14mo ago
i mean that you can just shove your images in the html file and have it all contained
Want results from more Discord servers?
Add your server