What do you think about my html?
Is it written well? If not how can I improve it? Are my class names written well? I had a tough time with it.
<main class="main">
<section class="design-description-1">
<div class="container">
<div class="design-description-1__row">
<div class="design-description-1__col-1">
<h2 class="design-description-1__heading">Made custom for you</h2>
<p class="design-description-1__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
neque, rerum dolores deleniti quisquam maiores deserunt ipsum.
Tempora quos perspiciatis sapiente quas, itaque iure inventore
aliquid eius minima aliquam natus?
</p>
</div>
<div class="design-description-1__col-2">
<img src="/images/image-01.jpg" alt="" />
</div>
</div>
</div>
</section>
<section class="design-description-2">
<div class="container">
<div class="design-description-2__row">
<div class="design-description-2__col-1">
<h2 class="design-description-2__heading">Created with care</h2>
<p class="design-description-2__text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est
neque, rerum dolores deleniti quisquam maiores deserunt ipsum.
Tempora quos perspiciatis sapiente quas, itaque iure inventore
aliquid eius minima aliquam natus?
</p>
</div>
<div class="design-description-2__col-2">
<img src="/images/image-02.jpg" alt="" />
</div>
</div>
</div>
</section>
</main>4 Replies
You're using classes more as ids, not reusable styles. Hard to say much more without seeing your styles and layout, but what's different between
design-description-1__row and design-description-2__row ? Are the styles the same? Is there one or two properties that differ? Would need more information.
Same question for __col-1, __col-2, __heading, __text
Also , just to inform you for the future you can use 3 backticks to make full code blocks , looks like you've used one on each side of this block.
Additionally, if you go to a new line use 3 backticks then the name of the language like
'''html
<div ... />
'''
Or
'''css
.my-class {
display: flex;
...
}
'''
Or
'''js
const myVar= 3;
...
'''
It will use proper highlighting foe the language in question, them close with three more at the end.
I've used single quotes instead of backticks here to be able to show examples withiut it avtually formatting the markdown but just replace with backticks amd it will make lovely code blocks ✨️The code looks fine, but the class names could be better managed. I’d recommend avoiding unique class names for everything and instead using a more reusable approach like BEM.
Here is my CSS, give me as much critisim as possible so that I can learn to do better.
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", serif;
font-size: 1.3rem;
}
.container {
max-width: 1128px;
margin: 0 auto;
/* background-color: green; */
}
.hero {
min-height: 660px;
background-color: #f3eed9;
display: flex;
justify-content: center;
align-items: center;
}
.hero__heading-primary {
font-size: 3.7rem;
}
.hero__text {
text-align: center;
color: #824936;
font-family: "Playfair Display", serif;
padding: 0 2em;
}
.hero__heading-secondary {
letter-spacing: 0.5rem;
margin-bottom: 0.5em;
}
.design-text {
color: #824936;
/* background-color: lightblue; */
padding: 4em 2em;
}
.design-text__heading {
margin-bottom: 1.5em;
text-align: center;
font-family: "Playfair Display", serif;
}
.design-text__row {
display: flex;
justify-content: space-between;
}
.design-text__row > div {
flex-basis: 45%;
}
.design-description-1__row {
display: flex;
justify-content: space-between;
}
.design-description-1__row > div {
flex-basis: 45%;
}
.design-description-1__heading {
margin-bottom: 0.5em;
font-family: "Playfair Display", serif;
}
.design-description-1 {
background-color: #222c2a;
color: #f3eed9;
padding: 3.5em 2em;
}
.design-description-1__col-2 {
/* border: 3px solid white; */
}
img {
max-width: 100%;
}
.design-description-2__row {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
.design-description-2__row > div {
flex-basis: 45%;
}
.design-description-2__heading {
margin-bottom: 0.5em;
font-family: "Playfair Display", serif;
}
.design-description-2 {
background-color: #824936;
color: #f3eed9;
padding: 3.5em 2em;
}
.design-description-2__col-2 {
/* border: 3px solid white; */
}
@clevermissfox thanks I am trying to get used to itAs @clevermissfox has already touched on, you have a lot of redundant repetition in your code, defining the same code/styling for 2, basically identical, elements twice.
For example you have these:
They are essentially the same, only changing the background color.
It would be simpler to create a single class for both of them to define the general styles and then add an extra class to define which "container they are.
Likewise, these children elements are basically the same:
So, making use of the added "card-1" and "card-2" on the parent elements these could become:
Basically you could simplify and reduce both your HTML and CSS by unifying the class names (assuming that they are basically the same element)
You also don't need to define a class for everything.
For example both elements have an h2
You have defined identital styles for both of these.
You could have just left them as h2 tags with no class name: