HTML and CSS Editor
Edit HTML and CSS together in HCODX. Preview styling changes, test selectors and build layouts with a browser-based code editor.
Keep the meaning in HTML and the presentation in CSS
A stable layout starts with a document that makes sense before any color or grid rule is applied.
If a card appears in the wrong place, first inspect the HTML nesting. If it appears in the right place but at the wrong size, inspect the CSS selector and computed layout. Mixing these questions wastes time because browsers repair broken markup and still paint something on the screen.
HCODX lets you edit and preview front-end files in the browser. Keep your selectors close to the structure they describe: a class such as .card is easier to maintain than a long chain of element names that breaks when you add a wrapper.
Document order
Read the page with CSS disabled: headings, paragraphs and links should still make sense.
Selector scope
Prefer purpose-named classes so a change to one card does not unexpectedly restyle every article.
Preview loop
Change one rule, observe the result, then continue; several simultaneous changes obscure the cause.
A card grid that responds without breakpoint guesswork
This small example separates content from layout and lets the grid adapt to available width.
Put the articles in index.html and the rule in styles.css. The minmax() value sets the smallest comfortable card width; auto-fit decides how many columns fit. Narrow the preview and watch the cards wrap before adding a media query.
If the grid overflows, check the width of content inside each card. Long unbroken strings, images without max-width: 100%, and fixed-width children can force a track wider than intended.
<!-- index.html -->
<main class="card-grid">
<article class="card"><h2>Draft</h2><p>Write the structure.</p></article>
<article class="card"><h2>Style</h2><p>Adjust the presentation.</p></article>
</main>
/* styles.css */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.card { padding: 1.25rem; border: 1px solid #b7bac6; }A three-pass check when the preview looks wrong
Treat markup, selector matching and available space as separate problems.
Only add JavaScript after the static structure and layout are sound. For click behavior, continue in the HTML, CSS and JavaScript editor.
When the HTML class is right but the style still loses
A matching selector is only the first check. The cascade decides which declaration is applied.
Suppose a card has class="card featured", but a later .featured rule changes its background. The .card rule is not broken; it is being overridden. Inspect both rules and their order before adding !important, which can make the next change harder.
Use a component modifier deliberately. Keep the base spacing in .card and put only the changed surface color in .card--featured. Then a future card variation can be understood from the HTML class list and the CSS without guessing which unrelated global rule wins.
<!-- index.html -->
<article class="card card--featured">
<h2>Featured note</h2>
<p>One specific message.</p>
</article>
/* styles.css */
.card { padding: 1.25rem; background: white; }
.card--featured { background: #d8ff55; }A flexible grid can still overflow because of its contents
The grid rule may be responsive while an image, URL or code sample inside one track refuses to shrink.
Start by finding the element that extends beyond the viewport. An image with its original intrinsic width can push a card wider than the grid intended; max-width: 100% allows it to shrink within its container. A long unbroken string needs wrapping or a deliberate horizontally scrollable region. Hiding overflow on the entire page only conceals the symptom and can clip useful content.
Grid and flex children also have automatic minimum sizes. In a split layout, a code block can keep its column wide unless the track and child are allowed to shrink. The minmax(0, 1fr) track and min-width: 0 child below make that constraint explicit; the code block itself scrolls horizontally, keeping its content accessible.
<!-- index.html -->
<div class="layout">
<article class="layout__copy"><h2>Guide</h2><p>Readable text.</p></article>
<pre class="layout__code"><code>long_unbroken_example_line</code></pre>
</div>
/* styles.css */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.layout > * { min-width: 0; }
.layout__code { overflow-x: auto; }
img { max-width: 100%; height: auto; }Check typography after the grid stops overflowing
A layout can fit the viewport and still be uncomfortable to read.
Watch multi-line headings
At narrow widths, verify that a large heading’s line-height leaves visible space between letterforms and that no word is clipped. Use a responsive size rather than one rigid desktop size.
Give paragraphs room
Test body line-height and measure against the actual font. Dense lines and overly wide text columns make a technically correct layout hard to follow.
Separate adjacent blocks
Use consistent margins or container gap so links, captions and code samples do not visually merge with surrounding paragraphs.
Check zoom and long content
Increase browser zoom and replace a short sample with a long real title or URL. Components should expand rather than overlap or hide text.
HTML and CSS editing questions
Give the layout a real test
Start with a small document, add one stylesheet and resize the preview as you work.
Instant HTML Runner & Viewer with Live Preview
Need to run a short HTML, CSS and JavaScript snippet? The HTML Runner Online has a focused editing surface with live output.
Open HTML Runner Online