Member Avatar for versan

Hello,

Let me get started, i am newbie in designing websites, the problem is that i have got a image of the index page of the website which my friend wants me to create. I am not good in photoshop or dreamViewer either, I have some programming knowledge. Now i need guidance so that i create the website totally out of css. Since i dont know to slicing and remaining process please help me or suggest me a better idea.

Thanks in Advance :)

  • 2 Contributors
  • 4 Replies
  • 112 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by versan

Dani AI

Generated

A practical, modern way to turn your image into a CSS-only page: build a semantic HTML skeleton, use CSS Grid/Flexbox for placement, and avoid slicing images wherever possible. was right to start with breaking the design into blocks; for the next steps are a clear workflow and a minimal starter template to practice on.

Step-by-step workflow:

  • Sketch a simple wireframe and list page regions (header, nav, hero, content, sidebar, footer).
  • Create semantic HTML for those regions so content is accessible and easy to style.
  • Use CSS Grid for the overall page and Flexbox for smaller components (nav, toolbars).
  • Replace UI decoration with CSS (gradients, shadows) or SVGs and use background-image only for true photographic art.
  • Make it responsive with meta viewport and a few media queries; test with browser dev tools.

A tiny starter HTML skeleton:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="site-header">Logo / Banner</header>
  <nav class="site-nav">Navigation</nav>
  <main class="site-main">
    <article class="content">Main content</article>
    <aside class="sidebar">Sidebar</aside>
  </main>
  <footer class="site-footer">Footer</footer>
</body>
</html>

A minimal layout example using Grid and a couple of tips:

* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; }

.site-main {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 20px;
}

/* responsive change */
@media (max-width: 800px) {
  .site-main { grid-template-columns: 1fr; }
}

Troubleshooting notes: use browser dev tools to inspect layout and computed styles, set max-width:100% on images to prevent overflow, and prefer box-sizing: border-box to avoid painful math. If old browsers must be supported, provide a Flexbox fallback or use an autoprefixer. For clear, up-to-date guides on Grid and Flexbox see the MDN learning articles: CSS Grid and Flexbox.

Recommended Answers

All 4 Replies

Member Avatar for hericles

Do you know HTML and CSS? If you are provided with an image of how the page should look you need to create a template that mimics that look by using HTML and CSS to place the required elements in the correct places.
The first step would be to identify the block elements that make up the page - header with banner, where the navigation is, number of columns, etc - and place them correctly and then start adding the colors, images, text, etc.

Member Avatar for versan

i know html and css but the problem is that i am not good with layouts. Can you please suggest me some good materials to learn layouts???

Member Avatar for versan

i really appreciate your help. Went to the link.. the content is so good and thanks again for the help :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.