Advice on workflow

[jongieoaquiera]

Hi there, I just started doing the the responsive web design curriculum and I’m on the 3rd project. I just want to ask, what is your thought process or your approach when creating webpage? I mean I’m somewhat okay on html side but when it comes to styling, especially grouping stuff (div this, div that) , I get so confused. So yeah, any advice will be very much appreciated. THANKS!

[Roma]

Welcome to the forums @jongieoaquiera. Styling is hard and I’m not the best at it but here are some things to think about. (Others will chime in)

Sketch something out on paper. How do you want your page to appear? You probably don’t want to just start coding and then try and move things around hoping that in the end it will be something pleasing.

When you write your HTML it’s hard to visualize how you’ve set everything up with here a div there a div everywhere a div div. Or maybe you’ve set things up semantic wise. It’s difficult to visualize.
What you can do is create a universal selector like this

* {
  border: solid 1px red;
}

to see how all your elements look. You can also take that property: value; pair (change the color if needed) and put it in one of your selectors to narrow things down a bit.

When working on responsiveness, start with the narrow view (mobile) design first and then work your way wider, adding breakpoints where needed for the wider design.
Using relative units will also help with responsiveness.

When thinking do I use flexbox or do I use grid? Fall back on this. As a general rule of thumb, use Flexbox for single axis (either X or Y) layout, and use Grid for 2-axis layout.

Another thing you can do to help is post each of your projects in the #project-feedback subforum and ask for feedback. There’s a community that gives good advice.

[miku86]

Hey there,

nice to meet you!

1. I think in boxes and draw them with with excalidraw or pencil & paper.

2. Then I make every box a div with visible borders until it is a copy of my concept from #1

3. Then I replace all divs with better-fitting semantic elements.

[jongieoaquiera]

Hey!

@Roma

What you can do is create a universal selector like this

* {
  border: solid 1px red;
}

to see how all your elements look. You can also take that property: value; pair (change the color if needed) and put it in one of your selectors to narrow things down a bit.

ohhh, I tried placing this snippet in my CSS and it shows this little boxes. I’ll use this until I get a little better on styling.

@Roma

When thinking do I use flexbox or do I use grid? Fall back on this. As a general rule of thumb, use Flexbox for single axis (either X or Y) layout, and use Grid for 2-axis layout.

thanks for mentioning when to use flexboxes and grid, It is confusing as well about when I should use which. I’ll keep this in mind.

Appreciate your response @Roma Thanks!!!