Landing pages

Markup and stack

• Plain HTML5 / CSS3 / JS with no frameworks or bundlers.
• Responsive layout; decorative section backgrounds via background-size: cover.
• All images in WebP with explicit dimensions → CLS = 0.
• Copy built around trust: for beginners, for people with a bad driving-school experience, and for refreshing skills after a break.

Contact form

A contact form with server-side processing in PHP — submitted over AJAX without reloading the page.

• A honeypot field to cut off bots (a hidden field invisible to humans).
• Validation on both client and server.
• Requests are forwarded to the owner's messenger.

Performance (PageSpeed 100 / 100)

The page reaches 100 Performance on both desktop and mobile.

• Critical CSS is inlined in the head — the render-blocking stylesheet request is gone.
• The Inter font is self-hosted: a woff2 subset covering Cyrillic only, font-display: optional — zero requests to Google Fonts and no late repaint of the headings.
• The hero portrait is WebP, recompressed and marked fetchpriority=high (it is the LCP element).
• Decorative section backgrounds were compressed (one heavy background went from 579 KB to 92 KB), plus preconnect and defer on scripts.

SEO and structured data

• Schema.org / JSON-LD: LocalBusiness with an address (PostalAddress).
• Keyword-first title, a correct heading hierarchy, Open Graph and canonical.
• Meaningful alt text and semantic landmarks.

Accessibility (score 100)

• Contrast brought to WCAG AA on every element: buttons, links, form field labels and the footer.
• A main landmark, proper labels on the form fields and aria labels.
• Adequate tap targets and focus navigation.

What makes it interesting

• A benchmark for a fully optimised landing page: 100 across all three Lighthouse metrics at once — not something you see often.
• Self-hosted fonts and inline CSS remove third-party dependencies from the critical rendering path.
• The full cycle: structure and copy → markup → PHP form → optimisation → SEO.

Markup and stack

A dependency-free frontend. Fonts come from the system stack, so the page makes no requests to third-party font services at all.

• Semantic markup: a main landmark, meaningful sections and a correct heading hierarchy.
• Responsive mobile-first layout on flex/grid with a carefully worked-out mobile UX.
• Interactivity (smooth scrolling, navigation) in vanilla JS — no jQuery.
• Cross-browser support and responsiveness at every breakpoint.

Performance

Speed is designed into the page, not bolted on afterwards.

• Critical CSS is inlined straight into the head — there is no render-blocking request for an external stylesheet.
• The hero background loads with priority via preload + fetchpriority=high — it is the LCP element.
• All images were converted to WebP, each with explicit width/height → layout shift CLS = 0.
• The script is deferred so it doesn't block document parsing.

SEO and structured data

• Schema.org / JSON-LD: HomeAndConstructionBusiness with a list of services (Service), offers (Offer) and the service area.
• Keyword-first title, a correct H1–H3 hierarchy and meaningful alt text.
• Open Graph, canonical and tidy meta tags.
• Semantic landmarks for accessibility and indexing.

Accessibility

• WCAG AA contrast — dark text on the accent buttons.
• Semantic landmarks and working navigation anchors.
• Meaningful alt text and accessible contact links (phone, messengers).

What makes it interesting

• A demonstration that a fast, accessible, SEO-ready landing page can be built on a bare stack with not a single dependency.
• Performance as the priority: inlined critical CSS and LCP prioritisation give 100 / 95 in PageSpeed.
• The full cycle by one person: mockup → markup → optimisation → SEO.

Markup and stack

Responsive markup from a ready design mockup on the Bootstrap 4 grid.

• A responsive container / row / col grid at every breakpoint.
• A fixed navbar with a mobile burger menu.
• The custom decorative font BERNIER in the headings — self-hosted woff2 (a subset covering uppercase Cyrillic only: 2.19 MB OTF → 123 KB).
• Watercolour collages and background images via background-size: cover.

Interactivity (jQuery)

• An accordion in the FAQ block.
• A ₽ / $ currency switcher on the pricing cards.
• A dropdown list of paints.
• Smooth scrolling to the navigation anchors.

Performance and images

About 530 KB of excess weight was stripped from the page.

• All images were converted to WebP: the hero collage, pricing, icons and logo.
• A responsive hero via srcset — mobile gets a lighter version.
• The decorative font was re-subset to the glyphs actually used (2.19 MB → 123 KB).
• Explicit width/height, fetchpriority on the hero and preconnect to the CDN.
• PageSpeed: 97 on desktop, 82 on mobile — the mobile ceiling is held down by third-party Bootstrap + jQuery, a deliberate trade-off for a demo of markup built from a mockup.

Accessibility

• A main landmark and aria labels on the burger button.
• The brand orange and blue were brought up to WCAG AA contrast.
• A correct heading hierarchy and alt text.
• Accessibility 95 in Lighthouse.

What makes it interesting

• It shows work not only on a bare stack but with a framework too: markup from someone else's mockup on Bootstrap + jQuery.
• An atmospheric design with a custom font carefully optimised for weight.
• “Live” interactive elements without a heavy JS framework.