Member Avatar for arvindikchari

Hello

I have an image of a Joomla layout that I like, so I am planning to create a new css website layout based on this joomla template. But I am new to css. Can some one code the basic framework for the layout looking at the image attached with this message. Thanks

19316-joom-b.jpg 143.78 KB
  • 3 Contributors
  • 2 Replies
  • 93 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

posted a screenshot of a Joomla-style page and asked for a starter CSS framework. made a good point about learning the fundamentals, and 's budget question is relevant if hiring is an option. A concise, modern workflow makes the task manageable and produces a reusable layout rather than a one-off page.

First, map the visible regions (header, top navigation, main column, sidebar(s), footer) and build a small semantic HTML skeleton. Then implement layout with CSS Grid for the overall page and Flexbox for horizontal groups (navigation, toolbars). Start mobile-first: stack sections by default and add a media query to switch to a multi-column grid at the desired breakpoint. Recreate decorative elements with CSS (gradients, box-shadow, border-radius) and use SVG or sprite icons instead of many small images. A minimal HTML scaffold looks like:

<header></header>
<nav></nav>
<main>
  <article></article>
  <aside></aside>
</main>
<footer></footer>

Troubleshooting tips: enable box-sizing: border-box early, use the inspector to outline elements when spacing looks wrong, and prefer Grid/Flexbox over floats for new work. If time or budget is limited, build a single fixed-width pass first, then iterate to responsive. For up-to-date guides on Grid and Flexbox, see the MDN CSS layout learning area: MDN CSS layout guide.

Recommended Answers

All 2 Replies

Member Avatar for buddylee17

How much are you willing to spend?

Member Avatar for MJ Pieterse

that template you included, has a lot of style to it, so i would suggest, that although you are new, that you start learning the code to do it yourself.

i would suggest that you visit sitepoint.com and read up on some of thier CSS crash courses like: the CSS crash course and they also get quite specific with their The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition and Build Your Own Web Site The Right Way Using HTML & CSS.

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.