About html design

Hi, friends
I know HTML and CSS. But I am not able to apply when I code. I am confused about how many div needs in this section and how to adjust them. Anyone can help me so that I can understand how to convert PSD to HTML.

Can you post a screen shot of the Image you are looking to design into a website? You’ll have to break it down into containers and figure out the positioning of each.

Suppose, I have to make google home page design. How to judge from design how to adjust div for it.

Hello harry.

There is this really useful resource: freeCodeCamp
Specifically, if you do the Responsive Web Design Projects, as they start off with a PDS, and run you through to a finished product.

You find them by clicking on Responsive Web Design Certification, and scroll to the bottom of that list.

Hope this helps

thanks for contributing.

There are some PSD to HTML converters online. A quick www.qwant.com search will reveal some.

I was trying to create google home page and was trying adding background images in CSS. I want to add an icon between images and sign in. I have tried to apply a background image to the li tag as well as anchor tag but the image not coming. I need to help to fix it.

Why copy/plagiarise? try to come up with your own idea and widen your learning process. Why not create a harry007 search page? Be creative and have more fun with a project. You’ll feel more satisfied when you’ve done it?

Here’s an example I just made:

But I am a new guy in this field bro. Ideas not come to easy initially. Have you build something with your own idea? Can I see your work please to get inspired?

The FCC projects link posted above are a great starting point.

There is a process in learning how to layout out a website and getting everything to look the way you want. If you work through any of the examples there we can help you learn, just post a CodePen link of your progress and we’ll help :slight_smile:

As you are new, I recommend learning how to do things first, and then apply those ideas. As @pjonp mentioned, follow the FCC curriculum and complete the projects.
Unfortunately, there’s no easy fix to learning, you have to learn or become a forum leach.


Much of that is far more advanced than what I can do, but you can have a go at making a simplified version.

I’m still learning so my examples below aren’t particularly great:
https://8886688.xyz/hotel/ (the buttons below images are inactive. This was more for trying layouts)
https://8886688.xyz/themoonnews/ (Just a front page - no active links. Trying out how columns work)

Please see my demo work https://deliciousrecipestoeat.blogspot.com/

It is showing some errors while testing in w3validator. I dont understand what kind of errors in code. Can you help me, I have given address above.