HTML- en CSS-reviewProgrammeertraining

HTML- en CSS-review: layoutbugs en responsive oplossingen

Meestal klaar in 15 minutenRevisies inbegrepenKwaliteitscontrole
Pakketten
BetaalbeschermingDetails
  • Revisies binnen het pakket zijn gratis.
  • Reageer je niet binnen 3 dagen na levering, dan wordt het werk automatisch goedgekeurd.

Het geld wordt bij betaling gereserveerd en pas vrijgegeven als je het werk goedkeurt.

HTML- en CSS-review: layoutbugs en responsive oplossingen

Voorbeeldresultaat

Voorbeeld voor het pakket Standaard

Code review: Python order-import script for a small online shop

What the code does

  1. Reads orders.csv from the shop export.
  2. For each order line, finds the product by SKU in stock.xlsx and subtracts the quantity.
  3. Writes the updated stock back and logs totals to import_log.txt.

The structure is clear and functions are well named. Most issues are about input that does not look the way the script expects.

Bugs and weak spots

#LineSeverityIssue
148HighThe same CSV can be imported twice; there is no check for already processed order IDs. This is the most likely cause of negative stock.
272Highint(row["qty"]) crashes on empty or "2.0" values from refunded orders.
395MediumSKU lookup is case-sensitive: "gt-101" and "GT-101" are treated as different products.
4130MediumThe file is opened without encoding="utf-8", so product names with accents break on Windows.
5201LowBare except: hides real errors and makes the log useless.

Corrected fragments

Issue 1: skip orders already imported

processed = load_processed_ids("processed_orders.txt")
for row in reader:
    if row["order_id"] in processed:
        continue
    # ... existing logic ...
    processed.add(row["order_id"])
save_processed_ids("processed_orders.txt", processed)

Why: each order is applied once, even if you run the script on the same file again.

Issue 2: read quantity safely

raw = (row.get("qty") or "").strip()
try:
    qty = int(float(raw))
except ValueError:
    log.warning("Order %s: bad quantity %r, skipped", row["order_id"], raw)
    continue

Why: refunded or partial lines are skipped with a clear note instead of stopping the whole import.

Issue 3: normalise SKUs

sku = row["sku"].strip().upper()

Apply the same .strip().upper() when building the stock dictionary.

Style and readability

  • process() is 90 lines long; split it into read_orders, apply_to_stock, write_report.
  • Replace magic column numbers (row[7]) with header names.

Please test each fix on a copy of your files: we read the code but did not run it.

Client: owner of a tea shop who wrote a 310-line Python script that imports orders from a CSV export into the stock spreadsheet Problem reported: "Sometimes stock goes negative, and the script crashes on some files."

De klant en alle details zijn verzonnen.

Over deze dienst

Layoutbugs komen meestal door een paar oorzaken: een vaste breedte die op telefoons overloopt, een flex- of grid-container die verkeerd is ingesteld, een z-index die niet werkt door een stacking context, of media queries die elkaar tegenwerken. Plak je HTML en CSS met screenshots van hoe het eruitziet en hoe het eruit zou moeten zien, dan leggen wij uit waarom de layout stukgaat en geven we gecorrigeerde CSS. Ook noteren we snelle winst voor toegankelijkheid, zoals alt-teksten, formulierlabels en de volgorde van koppen.

Wat is inbegrepen

  • Wat je krijgtEen schriftelijke review op de bestelpagina: waarom de layout stukgaat, gecorrigeerde HTML- en CSS-fragmenten voor desktop en mobiel, en opmerkingen over toegankelijkheid. Premium voegt een plan toe om de stylesheet op te ruimen tot herbruikbare klassen.
  • LayoutoplossingenFlexbox, grid en overflow
  • Responsive regelsMedia queries die niet botsen
  • Stapelen en z-indexWaarom elementen achter andere verdwijnen
  • Semantische HTMLKoppen, landmarks, knoppen
  • Basis van toegankelijkheidAlt-teksten, labels en contrast

Hoe het werkt

  1. 1
    BriefingJe plakt de code en screenshots
  2. 2
    LezenWij zoeken de regels die de layout breken
  3. 3
    ReviewJe ontvangt gecorrigeerde CSS en opmerkingen

Wat we van je nodig hebben

De HTML en CSS als geplakte tekst, screenshots van het probleem op desktop en telefoon, de browsers waarin het gebeurt en hoe het eruit moet zien.

We vragen je:

  • Is het gewone CSS of een framework?
  • Bij welke schermformaten en in welke browsers gaat het mis?
  • Hoe moet het onderdeel eruitzien?
  • Is de pagina gebouwd in een sitebuilder of met de hand geschreven?

Pakketten vergelijken

PakkettenBasisOpmaak tot 100 regels€ 14StandaardOpmaak tot 400 regels€ 32PremiumTot 1.000 regels met een stylesheetplan€ 62
Levertijd1 dag2 dagen3 dagen
Revisies123
Regels codetot 100tot 400tot 1.000
Gecorrigeerde fragmentenJaJaJa
Opruimplan voor de stylesheetNeeNeeJa
Bestellen BasisBestellen StandaardBestellen Premium

Betaalbescherming

Je betaalt bij het bestellen, maar het geld wordt alleen vrijgegeven voor goedgekeurd werk.

  • Vaste prijsDe prijs van het pakket verandert niet meer nadat je hebt betaald.
  • Het geld wordt gereserveerdBij betaling wordt het bedrag alleen gereserveerd. Het gaat pas naar de dienst als je het werk goedkeurt.
  • Gecontroleerd vóór leveringElk resultaat doorloopt een kwaliteitscontrole voordat het bij jou komt, en je ziet het op de bestelpagina voordat je het goedkeurt.
  • Gratis revisiesVraag wijzigingen binnen je briefing aan, zo vaak als het pakket toestaat.
  • Goedkeuring na 3 dagenKeur je het werk binnen 3 dagen na levering niet goed en vraag je ook geen wijzigingen, dan wordt het automatisch goedgekeurd. Schrijf je na levering in de chat van de bestelling, dan wacht de bestelling; zodra we hebben geantwoord, kunnen we de 3 dagen opnieuw laten ingaan en melden we dat in de chat.
  • Opnieuw doen of volledige terugbetalingPast het resultaat niet bij je briefing en hebben de revisies dat niet opgelost, of duurt het werk meer dan twee keer zo lang als de levertijd, schrijf dan in de chat van de bestelling: we doen het werk opnieuw of betalen het volledige bedrag terug.
Hoe het werkt →

Vragen en antwoorden

Controleren jullie het in echte browsers?

Nee, wij lezen de code en je screenshots. Controleer de gecorrigeerde CSS in je browsers voordat je publiceert.

Kunnen jullie een pagina repareren die in Wix of Tilda is gemaakt?

Alleen de eigen code die je daar toevoegt. De layout van de builder zelf wordt in de editor bestuurd, niet in code die je kunt sturen.

Is dit een volledige toegankelijkheidsaudit?

Nee. Wij noteren duidelijke problemen in de code die je stuurt; een volledige audit vraagt om testen met schermlezers op de live pagina.

Staat je antwoord er niet bij?

Pakketten