Best way to contain lot's of different patterns

[oocopperpot]

Hey guys,

I’m giving the below challenge a shot but I wanted to know the best way to tackle a container that has lots of different shapes in terms of their own containers.

For different patterns inside the phone would you just create divs such as .div class=“upper-pattern”, div class=“first-text-message” etc etc. Mine so far (obviously my naming could be a bit better)

I’m also worried about it getting very confusing with lot’s of containers.

     i,e
<div class="main-div-con">

    <div class="inner-card">
      <div class="mobile-image-con">
        <div class="top-pattern"></div>
        <div class="first-message">That sounds great. I’d be happy with that.</div>
        <div class="second-message">Could you send over some pictures of your dog, please?</div>
        <div class="dog-pic-row">

Are divs usually the way to do this?

Thank you.

[kevinSmith]

Well, irl, this would be rendered dynamically in JS, but looking at it based on your criteria…

Could you have classes for left and right messages? You could have an additional class for the styling in the last two and concatenate the class names?

[oocopperpot]

Thank you, managed to cut by doing the method you mentioned!

I’ve finished the page now, the challenge is HTML/CSS only but interested in how the JS works with it.

Usually then if you were to use pure HTML/CSS would it just be empty divs and then just styling in CSS?

[kevinSmith]

Well, we’re getting a little ahead of ourselves, but if it’s just HTML and CSS then all the content needs to be in the HTML. You style with CSS in your HTML or in a separate CSS file.

With JS you can have an empty div that you dynamically fill with content. Things like React are built around reusable components that lend themselves to this perfectly.

[oocopperpot]

What I mean is if you are designing something with pure HTML/CSS you obviously need a lot of empty containers, but are divs the correct container or doesn’t it matter?

I have the result I want from divs but I’m still new to learning about correct usage of things due to SEO and correct readability of a webpage but I assume this isn’t that important for pure design as in my example.

[kevinSmith]

Yeah, div is kind of the default container. There is also semantic HTML that you can use, which is better, when it is applicable.

[oocopperpot]

Thank you, I definitely need to learn more about these.

With JS I’m still on basic functions so will be a short while before I’m designing.

[Sylvant]

Using pure HTML/CSS you need just enough elements/containers to separate and order your content correctly, the way you want it to be rendered. Ofc if you wish to produce some additional visual effects, you could implements some divs with shapes, colors etc, tho i never found much interest in that. Div’s are the standard containers for HTML, but there are other tags which serve different purposes and in certain situations, can do a better job, as they often offer additional styling under the hood and can make your page a lot more ‘readable’ from a programmers perspective, on telling whats what.
You can further check on the internet for different HTML tags and those that are more commonly used.
Its also good practice to use a HTML/CSS validator sources, which often can tell you when you did not write your code cleanly and even give you additional suggestions on how things should work.
JS is what can bring the logic in webpages, as well as handling more conveniently other practices which are by default innate to HTML and CSS, so dont work yourself too hard before you move to JS. Thats when you can make your page more responsive to user interaction and data exchange.

[oocopperpot]

Fantastic, thank you!

Very insightful. Going to give the validator a check, not used it in a while and going to check some other possible tags. I did use a span in a few, I had no real reason to but it felt ‘right’ so that’s something I need to learn more about!