Budget: 7000 UAH Deadline: 5 days
Hello. I will be able to fulfill all the requirements for layout optimization, I will go through each point with verification and testing. I have extensive experience in web development on html, css, js, wordpress.
Website: https://deniz-estate.com/ru/
Problems:
For each language version of the website, it is necessary to specify the current ones in the <Head> tag:
<link rel="alternate" hreflang="ru" href="https://deniz-estate.com/ru/" />
<link rel="alternate" hreflang="uk" href="https://deniz-estate.comua/" />
<link rel="alternate" hreflang="pl" href="https://deniz-estate.com/pl/" />
<link rel="alternate" hreflang="en" href="https://deniz-estate.com/en/" />
It is necessary for the module to automatically convert images to WebP format
Install and configure the Gum Image Optimizer module
Verify that WebP images are actually delivered to browsers
Ensure that the server correctly serves WebP versions instead of the original (JPEG/PNG), if supported by the browser
Check the .htaccess file
Enable and test Lazy Load
If a plugin (e.g., WP Rocket, native lazy load, Gum) is used, ensure that:
Lazy Load is enabled
All <img> tags have the attribute loading="lazy"
Check sizes and responsiveness
All images should have specified width and height
Fix srcset and sizes so that the browser loads the required size
Check caching
Ensure images are cached on the browser side (expires, cache-control)
Run Lighthouse test
Run the page through Google Lighthouse (in DevTools)
Ensure there are no warnings regarding images (size, format, lazy load, etc.)
Images load quickly without breaking the layout
No duplicates or excess weight
WebP works
Lighthouse image metrics show no errors
Are properly marked (<button> or <a>)
Work with keyboard
Are accessible for screen readers
Meet WCAG 2.1 and Lighthouse recommendations
Use only native tags:
<button> — for actions (submit, close, open, etc.)
<a href="..."> — for page navigation
Prohibit using <div> or <span> as buttons (unless role="button" + tabindex + handling Enter/Space — but better to replace with <button>)
For buttons in forms:
Explicitly specify type="submit" or type="button"
(by default <button> = submit, which can cause unwanted behavior)
All buttons should be accessible via Tab
Buttons should activate with keys:
Enter
Space
All buttons should have:
Either visible text (<button>Download</button>)
Or aria-label="Download" — if the button contains only an icon
Goal: Improve accessibility for users with special needs and comply with WCAG standards.
Actions to take:
The element .iti__selected-flag should not be focusable by itself unless it manages input.
Remove tabindex="0" and role="combobox" from elements that are not active controls.
Ensure that keyboard navigation (Tab) moves strictly between interactive elements (input, select, button).
Actions to take:
Ensure that the form contains a button with type="submit" or an input with type="submit".
If missing — add:
Actions to take:
Leave aria-label or aria-labelledby if no label exists, but it is preferable to use <label> as the main means.
If there is field validation, add aria-describedby="message-id" and aria-invalid="true" on error.
Test manually:
Tab key should move sequentially through:
the "Name" field;
the "Email" field;
the phone field;
the submit button.
Enter/Space keys should activate submission and clickable elements.
There should be no "jumps" or focus on decorative blocks.
Identify all third-party scripts being loaded (e.g., analytics, fonts, widgets).
Implement lazy loading for non-essential scripts.
Use async or defer when including third-party JS resources where possible.
Optimize the order of third-party services so they do not block critical page rendering.
Use contrast checking tools (e.g., WebAIM Contrast Checker).
Verify that the contrast between text and background meets WCAG minimum requirements:
AA level: at least 4.5:1 for normal text, 3:1 for large text.
AAA level (recommended): 7:1 for normal text.
Goal: Maintain proper HTML structure and improve content perception by assistive technologies.
Actions to take:
All <li> tags should only be used inside lists <ul>, <ol>, or <menu>.
Exclude cases such as:
<li> outside a parent list;
<div><li>...</li></div> without nesting inside <ul> or <ol>.
Replace incorrect <li> with <div>, <p>, or other semantically appropriate tags if needed.
Ensure list structures are logical and properly nested (nested lists display and style correctly).
Goal: Ensure proper operation with assistive technologies (screen readers, VoiceOver, etc.).
Actions to take:
Check all role attributes for correctness and necessity.
Exclude cases such as:
Assigning role="button" to <button> — this is redundant;
role="link" on <a> with href — also redundant;
Using deprecated roles or non-existent values.
Use only valid values from the official WAI-ARIA specification.
Verify that all ARIA roles are logical in context, for example:
role="navigation" — for menu blocks;
role="dialog" — for modal windows;
role="alert" — for error and warning notifications.
Goal: Ensure proper navigation and link behavior on the site.
Actions to take:
All <a> tags must have a filled href attribute. Avoid:
href="";
href="#" — only if used with JavaScript, and then with preventDefault() (in popup forms).
For external resources — absolute URLs with https:// protocol and rel="nofollow noopener noreferrer".
If the link opens in a new tab (target="_blank"), be sure to add:
rel="noopener noreferrer" — for security (to prevent window.opener vulnerability).
After implementing all points, conduct an audit:
- Lighthouse (in Chrome DevTools, "Audit" or "Check" tab);
- axe DevTools — for in-depth accessibility testing.
It is recommended to record test results with screenshots before and after changes.
Budget: 7000 UAH Deadline: 5 days
Hello. I will be able to fulfill all the requirements for layout optimization, I will go through each point with verification and testing. I have extensive experience in web development on html, css, js, wordpress.
Budget: 20000 UAH Deadline: 18 days
Hello!
Ready to help, but it will take quite a long time to get everything in order, so the budget is not small.
Budget: 8000 UAH Deadline: 5 days
Hello! I specialize in WordPress, and I am ready to carefully make all the edits according to the list with testing at the end and screenshots.
Budget: 20000 UAH Deadline: 14 days
Hello, I will complete the project in 2 weeks, I know HTML CSS JS. Price 20,000 UAH. I can do your project later.
There is an active production site with a product catalog, model cards, and informational pages. Frontend stack: — Next.js; — React; — TypeScript; — existing component system; — staging and production environments. There is an approved visual direction and design for the new homepage. It is necessary to implement it into the existing project, adapt it for desktop/tablet/mobile, and bring all main types of pages on the site to a unified updated style. A complete redesign of the product and changes to business logic are not required. MANDATORY SCOPE 1. New homepage — implement the homepage according to the provided design; — maintain existing functionality, links, and routing; — correctly connect approved sections and CTAs; — use existing data and APIs; — ensure correct display of dynamic content. Main types of sections: — header/navigation; — hero; — informational blocks; — model/offering cards; — analytical or market insight blocks; — CTA sections; — footer. The exact composition of sections will be provided to the selected performer along with the layout. 2. Responsive It is necessary to implement: — desktop; — tablet; — mobile; — intermediate resolutions; — correct behavior of grids, cards, menus, buttons, and typography; — absence of horizontal scrolling and visual conflicts. 3. Typography and general styles — implement new approved fonts; — unify sizes, weights, line-height, and spacing; — update styles for buttons, cards, fields, badges, and headings; — use common design tokens or CSS variables where possible; — avoid duplicating styles separately for each page unnecessarily. 4. Unification of existing pages Check and bring to the new style the main types of pages: — catalog; — model card / PDP; — informational pages; — header; — footer; — forms; — modal windows; — existing CTAs; — loading / empty / error states, if they are already present in the project. This is about the visual unification of existing components, not a complete individual redesign of each page. 5. Catalog Check: — card grid; — images; — name, reference, and price; — filters and sorting; — buttons and links; — desktop/mobile display; — loading and empty states; — absence of visual shifts during loading. 6. PDP Check: — gallery; — main information block; — price and CTA; — analytical sections; — tables and metrics; — About Watch; — desktop/mobile layout; — long names, references, and missing data. It is necessary to maintain current functionality and existing API contracts. 7. Header and Footer — unified style across all pages; — responsive navigation; — mobile menu; — correct active/hover/focus states; — absence of discrepancies between the homepage, catalog, and PDP. 8. Interface states For dynamic blocks, check: — loading; — empty data; — API error; — insufficient data; — missing image; — missing price; — long text; — mobile display. There is no need to develop new complex business logic. It is necessary to correctly visualize already existing states. 9. Quality and performance — do not worsen SEO and current indexing; — maintain correct metadata and semantic HTML; — avoid critical layout shifts; — optimize images and fonts; — consider reduced motion for animations; — check basic accessibility: focus states, contrast, keyboard navigation; — do not include heavy libraries without justified necessity. 10. Staging and QA — deploy changes on staging; — check main types of pages; — check desktop, tablet, and mobile; — fix visual and responsive bugs; — after acceptance, perform production deployment; — ensure bug fixes for the implemented scope for at least 7 calendar days after deployment. RESULT OF WORK — Pull Request with frontend code; — implemented new homepage; — responsive desktop/tablet/mobile; — unified fonts, cards, and basic UI components; — visually agreed catalog, PDP, and informational pages; — staging deployment; — fixing identified visual errors; — production deployment; — brief description of modified components; — 7-day bug-fix period after acceptance. ACCEPTANCE CRITERIA 1. The homepage matches the provided design. 2. All sections work correctly on desktop, tablet, and mobile. 3. Header and footer are uniform across all pages. 4. Catalog and PDP visually correspond to the new system. 5. Current functionality of the site is not disrupted. 6. API contracts and backend logic are not changed without agreement. 7. No horizontal scrolling and critical layout shifts. 8. Fonts and images load correctly. 9. Loading, empty, and error states are displayed without breaking the layout. 10. Changes are checked on staging and deployed to production. 11. Visual errors identified during acceptance are fixed within the agreed scope. WHAT IS NOT REQUIRED — backend development; — changes to business logic; — creation of a new catalog or CMS; — development of a new API; — complete redesign of each informational page; — new user features not present in the layouts; — development of a complex design system from scratch; — creation of a new project instead of improving the existing one; — changes to the SEO structure without separate agreement. REQUIREMENTS FOR THE PERFORMER — confident in Next.js / React / TypeScript; — experience working with existing production projects; — quality responsive layout; — experience implementing designs from Figma; — component approach; — confident working with CSS / CSS Modules / Tailwind or the existing project system; — understanding of Core Web Vitals; — Git / Pull Request workflow; — ability to work through staging. IN RESPONSE, IT IS MANDATORY TO INDICATE 1. Fixed price for the full mandatory scope. 2. Completion time in working days. 3. Estimate in hours. 4. When you are ready to start. 5. Links to 2–3 relevant projects on Next.js/React. 6. Experience working with catalogs, product cards, or analytical interfaces. 7. What will be needed for an accurate estimate before starting work. 8. Does the price include: — staging; — responsive QA; — production deployment; — bug fixes; — 7-day bug-fix period. Template responses without reviewing the requirements and without a specific estimate will not be considered. Access to production is not provided at the first stage. Work begins after a limited code review and is deployed through staging.
TECHNICAL TASK Update of the online store bp.ua About the project An active online perfume store on OpenCart 2.x. It needs to be migrated to OpenCart 4.x, the design and functionality updated, while preserving all data, integrations, and SEO. The site is bilingual (Ukrainian + Russian). We are looking for a performer (or team) for backend and frontend. You can respond to one part or both.Part 1. Backend (OpenCart 4)Migration Deployment of a clean OpenCart 4.x (latest stable branch), PHP 8.1+. Data transfer: products, categories, attributes, options, brands, customers, orders, reviews, content pages. Preservation of SEO-URL (pretty URLs) one-to-one; a map of 301 redirects from old addresses. No direct upgrade from 2.x → 4.x: only clean deployment + controlled transfer.API integration with the supplier (priority) Porting existing custom exchange modifications with the supplier's server (prices + stock). Automatic synchronization on schedule (cron), error log, manual launch. Hiding/status for items that are out of stock. Support for a catalog of 2,000+ items.Modules Nova Poshta: selection of branches/parcel lockers, auto-generation of shipping documents from the admin panel. Payment: integration of payment system (LiqPay / Fondy / WayForPay — to be agreed), cash on delivery. Checkout: server logic, guest order, statuses, customer notifications. Mass import/update of products from the price list (xlsx/csv), linking photos by article/barcode.Bilingualism (uk / ru) Two languages of the store: uk-UA (main) and ru-RU. Bilingual fields for products, categories, content pages, meta tags. Separate SEO-URLs for each language, hreflang tags, canonical URLs. 301 redirects from old URLs of both languages (check the current scheme: /ru/, subdomain or parameter). Emails to the customer — in the client's session language.Blog Preserve the existing articles section https://blog.bp.ua/. Transfer existing articles (uk/ru) while preserving URLs and 301 redirects where necessary. Bilingualism, correct SEO markup of articles. The blog section must remain editable from the admin panel.SEO (server-side) Replacing third-party SEO module with native OC4 mechanism. Generating sitemap.xml (separate language branches), correct robots.txt. Microdata Schema.org (Product, Offer, BreadcrumbList, Article for the blog).Performance and security Cache (OPcache + built-in OC4), query optimization, gzip/brotli, HTTP/2. Images: WebP, resize with caching. HTTPS, 2FA in the admin panel, current patches, daily backups. Core Web Vitals in the "green" zone on mobile.Work order All work is conducted on staging. The old site operates until full testing of the new one. Switching to production — with the possibility of rollback for 30 days. Part 2. Frontend (design + layout)Design Style: minimalist, premium, lots of "air", focus on product photos. Mobile-first approach (most traffic is mobile). Design system in Figma: palette, typography, components, states. Mockups of key screens (desktop + mobile): homepage, catalog, product card, brand page, cart, checkout, search, blog, and article page.Layout Semantic HTML5, clean CSS, responsive (mobile-first). Integration into twig templates of OpenCart 4 (not static), working with live data. Images: WebP, lazy-load, srcset. Font with full Cyrillic (uk/ru). Cross-browser compatibility: Chrome, Safari, Firefox, Edge + iOS/Android. Core Web Vitals: LCP < 2.5 s, CLS < 0.1, INP < 200 ms (mobile).Interface functionality Facet filters for the catalog: brand, type, volume, note, gender, price. Product card: photo, description, notes, format/volume, reviews, "people also buy". Quick view, wishlist, comparison, badges (new, hit, limited quantity). Responsive checkout with minimal steps, auto-fill for Nova Poshta. Blog section: list of articles and article page in the site's style.Bilingualism (uk / ru) Language switcher in the header, correct on mobile. Layout considers different line lengths in both languages. All theme text — through language variables of OC4 (no "hardcoded" text). Acceptance and collaborationWhat to deliver upon completion Backend: access (server, DB, admin panel, repository), brief documentation on modifications and cron, deployment/rollback instructions, list of third-party modules. Frontend: Figma file with design system and screens, theme code (twig + CSS/JS), instructions for changing banners/content.Acceptance criteria (brief)
https://www.figma.com/design/bSzGOmDb3scdsBgjR3hHLb/Robo?node-id=0-1&p=f https://robo.org.ua/index.php?route=product/product&path=145802278&product_id=237 Task: redesign the product and reviews page on the main page The website is already developed and fully operational. The designer has prepared a new design in Figma that needs to be implemented on the existing site. It is necessary to: code the new design according to the layout; integrate it into the current site; adapt the pages for mobile devices, tablets, and computers; check the correct operation of buttons, forms, menus, and other elements; ensure maximum accuracy in matching the layout. There is no need to develop the site from scratch — only the redesign and replacement of the current design with the new one are required.
About the project: A selling landing page is required for an author's online intensive on the active corporate website of a law firm. Website platform: WordPress. Expected page URL: site/online_intensive1. Design and structure:There is a ready prototype in the form of clean HTML/CSS code (includes texts, structure, color scheme, responsiveness, and vertical video testimonials 9:16). The code will be provided to the performer.Design task: Use this code as a basis, but do not just copy it. Improvements in UX/UI are encouraged, including the addition of neat micro-animations, shadows, and modern effects (features) that will make the page more attractive and selling while maintaining a strict corporate style.2. Integration with CMS (Editability):Critically important: The landing page must not hang on the site as "bare" HTML code. The page needs to be assembled using a visual builder (Elementor) or implemented through flexible fields (ACF).The client must have the ability to easily change any texts, links, rates, and photos directly from the WordPress admin panel without interfering with the code.3. Technical requirements and responsiveness:Full responsiveness of cross-browser layout: Desktop, Tablet, Mobile. The page must display correctly on all types of devices (including the proportions of 3 vertical video testimonials).High performance: Basic loading speed optimization (Google PageSpeed) is mandatory. Images must be compressed and converted to WebP format, scripts and styles must be minified.4. Feedback form (Lead generation):The landing page has an application form (Name, Phone). It needs to be fully functional.All applications must be instantly sent to the corporate email: [email protected] is necessary to configure sending via SMTP server or use a reliable plugin (WPForms / Contact Form 7) to ensure that applications do not end up in the "Spam" folder.5. Multilingualism:The current site implies the presence of three languages (RUS, KAZ, ENG).As part of the project, the performer must set up multilingualism for the new landing page (using the built-in site plugin).During the task execution, the client will provide ready translations of the text into Kazakh and English. The performer must create and format these additional language versions of the page.6. Integration with the main site:Set up a transition to the landing page from the main site.A new button or menu item (for example, "Online Intensive") must be added to the main menu (in the header) of the active site salyk.net, which will lead to the address /online_intensive.Additionally: create a language switch function rus/eng/kaz in the style of the site.
A virus has currently infiltrated the website. The site is not functioning properly. In particular, the main page is not working correctly. We need a developer who can fix this error as soon as possible.