How to use CSS step by step to build webpage based on design

Scenario:

  1. I’ve received design to develop webpage as per ( instagram password reset page)

  2. First I write html file using relevant tags which is straight forward

  3. But I’m not getting what steps to follow with CSS ( where to start ) so that I make webpage look like design

3.1 start styling individual element ?
3.2 start from top to bottom ?

Are there any good practices wrt CSS as I’m finding it quite hard to use compared to HTML, JS which are straight forward.

Best,
Vikram

Hi @vikramvi !

Start from the top and work your way done.

You can start with the instagram logo.
Then move to the form in the middle.
Then design the elements in the form.
Lastly, design the footer.

Hope that helps!

Thanks for inputs. I’ll work on this strategy and get back with my learnings for review & corrections

I hear you. I’m in a similar situation. I’m not new to programming so picking up html and js was easy enough, but css is challenging to me. You thought you knew and try something and the page won’t appear as you expected. Coming up with a correct layout is not simple. After experimenting with different ways, Bootstrap is my first choice now for layout (I’m taking a Bootstrap class on Udemy). When I become more experienced (I hope I will eventually), I may go with a straight flex box. I start by dividing the page into main sections and work on each section from top to bottom. One mental model that helps me to think about css is that each div is like a transparent cellophane sheet which you can lay side by side or stack (nest) up. You can color them, cut them into fixed sizes, make them expandable/shrinkable, and so forth.

I wish there are resources out there that will let us practice in small pieces. Something like “make this layout/design/component using this and that css features” instead of “design this complete web page using any techniques you like.” Many resources on the Internet explain things with examples, but never gave any practical small exercises. There may be out there, but I have not found them. Has anybody?

1 Like

Something like “make this layout/design/component using this and that css features” instead of “design this complete web page using any techniques you like.” …

That would a great idea for developers to pick up CSS skills faster

Ok, after many months of pain with CSS; I think I’ve found a better way to style with much lesser headaches.

Thanks to the below 2 articles which helped me to reduce my CSS related headaches drastically

  1. Steps to replicate a design with only HTML and CSS - DEV Community

  2. Follow these steps to become a CSS Superstar

STEPS

  1. Take a piece of paper, pencil and eraser

  2. Draw elements and wrapper around them

  3. From this start adding HTML first and later styling starting from external wrapper to innermost wrapper and later individual elements styling

  4. This way it is much easier to place elements in place without doing trial and error
    This trial and error way of styling had given me loads of headaches in the past :exploding_head:

  5. I’m still now sure how to choose wrapper thought, is it per element , set of elements; am still playing around it

  6. If somebody is new I suggest to use Responsive Web Developer, to practice CSS skills

  7. Also I’m using tailwind css which is much cleaner and easier to use than traditional CSS where you end up writing loads of classes, selectors argh

Let me know what do you think of this methodology

Best,
Vikram

Today found a youtube video of 2014 where author has neatly explained how to start with Paper + Pen then move on to add HTML Elements and at last CSS.

I highly recommend anyone who is learning CSS to go through this video. I wonder why some other popular youtubers, paid udemy courses didn’t cover this easier way of learning and implementing CSS

Found one more useful video which will surely help those learning web development.

Till few weeks back, I use to afraid of CSS but slowly getting that confidence that I can handle this beast as well

# From idea to layout: How I approach designing a site

cc: @twotani I’ve compiled some really nice resources in last few threads, you may want to check as well.