Wersja strony
Wymagane: Wykonanie responsywnej strony internetowej Pixel Perfect na podstawie makiety stworzonej w Figma. (link do makiety poniżej)
Celem jest stworzenie responsywnej strony internetowej https://zoodom.ua oraz zgodnej z W3C (będzie sprawdzane), poprawnie wyświetlającej się na urządzeniach mobilnych, tabletach i komputerach stacjonarnych, spełniającej nowoczesne wymagania UX/UI oraz wymagania Google dotyczące optymalizacji mobilnej w 2024 roku.
Technologie: Użycie HTML5, CSS3, JavaScript (ES6+), SCSS/LESS (w razie potrzeby). Wykonanie powinno być wieloplatformowe (Chrome, Safari, Firefox, Edge) i responsywne dla wszystkich głównych rozdzielczości ekranów.
1. Rozdzielczości ekranów i punkty przerwania
Aby zapewnić poprawne wyświetlanie na wszystkich urządzeniach, należy skonfigurować następujące punkty przerwania (pośrednie rozdzielczości powinny wyświetlać bloki bez przesunięć i bez poziomych przewijania):
- Urządzenia mobilne:
- Minimalna rozdzielczość: 320px (na przykład, iPhone SE, starsze smartfony).
- Główna rozdzielczość mobilna: 360px – 414px (na przykład, iPhone X, Galaxy S10).
- Tablety:
- Minimalna rozdzielczość: 768px (na przykład, iPad Mini).
- Tablety (portret): 768px – 1024px (na przykład, iPad).
- Tablety (krajobraz): 1024px – 1366px (na przykład, iPad Pro).
- Komputery stacjonarne:
- Minimalna rozdzielczość: 1280px.
- Rekomendowane rozdzielczości dla komputerów stacjonarnych: 1440px i więcej
Dla każdego punktu przerwania powinny być przypisane odpowiednie style, zapewniające optymalne wyświetlanie treści.
2. Wymagania techniczne dotyczące wykonania
- Siatka: Użycie systemu siatki (CSS Grid) w celu zapewnienia responsywności makiety (bez konstruktorów. Możliwość użycia Flexboxa jest dopuszczalna przy uzasadnieniu).
- Animacje i przejścia: Zastosowanie animacji CSS powinno być płynne i minimalne, z uwzględnieniem wydajności na urządzeniach mobilnych. (życzenia dotyczące animacji w załączonym pliku)
Gdzie są suwaki - automatyczne przewijanie elementów co 3 sekundy.
- Optymalizacja obrazów: Obrazy powinny być dostosowane do różnych rozdzielczości z użyciem formatów WebP i kompresji bezstratnej. Powinny być również wdrożone mechanizmy do lazy loading obrazów.
- Ikony i grafika: Używać SVG dla ikon i grafiki, co zapewni wysoką jakość na wszystkich ekranach.
- Typografia: Rozmiary czcionek powinny dynamicznie zmieniać się w zależności od rozdzielczości ekranu.
- Media queries: Wszystkie media queries powinny być jasno zorganizowane i wspierać główne punkty przerwania.
3. Weryfikacja i testowanie
- Testowanie wykonania powinno być przeprowadzane na rzeczywistych urządzeniach, a także w emulatorach przeglądarek w celu potwierdzenia poprawnej pracy na wszystkich wspieranych rozdzielczościach i systemach operacyjnych (iOS, Android).
Priorytetowe rozmiary ekranów do testów:
1. 393x873:
- Xiaomi Mi 10T, Mi 10T Pro
- Xiaomi Redmi Note 9 Pro
- Xiaomi Redmi Note 9
2. 390x844:
- iPhone 14
- iPhone 13 i 13 Pro
- iPhone 12 i 12 Pro
3. 360x800:
- Samsung Galaxy S20
- Honor 7X
- Huawei P40 Lite
4. 414x896:
- iPhone 11 Pro Max
- iPhone 11
- iPhone Xr
5. 430x932:
- iPhone 14 Pro Max
6. 393x851:
- Google Pixel 5
- Xiaomi Mi 10 Pro
- Xiaomi Redmi Note 8 Pro
7. 412x915:
- OnePlus 7T
Priorytetowe przeglądarki do testów:
Chrome i Safari
- Obowiązkowa weryfikacja wykonania pod kątem przepełnienia treścią. Wykonanie nie powinno się łamać:
- przy dodawaniu większej ilości tekstu do elementów;
- przy używaniu obrazków o niewłaściwych rozmiarach;
- tekst nie powinien wypadać z obiektów;
- przepełnienie blokami treści nie prowadzi do naruszenia siatki.
- Weryfikacja przez Google Mobile-Friendly Test i narzędzie PageSpeed Insights w celu oceny wydajności i zgodności z mobilnymi standardami.
4.SEO.
-Osobno SEO zostanie dostarczona informacja dotycząca metadanych na stronach.
5. Projekt.
- Projekt stworzony z perspektywą rozwoju projektu. Dlatego zostaną podane dodatkowe wyjaśnienia, które bloki nie muszą być obecnie wykonane.
- W razie potrzeby istnieje możliwość wprowadzenia poprawek w projekcie (wykonawca projektu jest dostępny).
6. Podsumowanie
Wykonanie powinno być zrealizowane z uwzględnieniem wszystkich powyższych parametrów (ale nie ograniczając się do nich w celu osiągnięcia najlepszych wyników), w tym wymagań dotyczących responsywności i optymalizacji dla urządzeń mobilnych.
Po zakończeniu pracy nad wykonaniem, przewidziany jest okres na testowanie - jedna tydzień od momentu otrzymania ostatnich uwag.
7. Funkcjonalność. Zostanie dostarczony wstępny dokument opisujący funkcjonalność bloków i elementów. Jestem gotów omówić niejasne elementy funkcjonalne w projekcie, zarówno wstępnie, jak i w trakcie współpracy.
Makieta do wykonania: https://www.figma.com/design/RPrjahTERmhbN3g9uKL6Eo/%D0%97%D0%BE%D0%BE%D0%B4%D1%96%D0%BC_website?node-id=0-1&node-type=canvas
Jeśli są dodatkowe pytania lub potrzebne są wyjaśnienia dotyczące konkretnych sekcji, jestem gotów odpowiedzieć.
Załączniki 1
Opinia zleceniodawcy o współpracy z Igor K.
Wersja stronyŚwietna robota! Wykonawca podszedł do zadania z wysokim poziomem profesjonalizmu, szczególnie w kwestiach optymalizacji technicznej. Animacje zostały wykonane w pełnej zgodności z naszymi przykładami i życzeniami, nadając stronie dynamikę i nowoczesny wygląd. Cała praca została wykonana starannie. Mimo że w trakcie pracy niektóre elementy musiały zostać dostosowane do rzeczywistych warunków zastosowania projektu na różnych urządzeniach, zmiany były wprowadzane sprawnie. Dziękuję za uwagę do szczegółów i odpowiedzialne podejście do projektu.
-
548 2 0 Witam, jestem zainteresowany waszym projektem.
Będę szczęśliwy, mogąc włożyć swoje doświadczenie i wysiłki w jego udaną realizację.
Z niecierpliwością czekam na waszą decyzję.
-
445 1 1 👋 Dzień dobry!
💫 Niedawno pracowałem nad podobnym zadaniem, więc mogę szybko i jakościowo wykonać Twoje zadanie.
⏰ Jestem gotów przystąpić do pracy jak najszybciej.
💰 Koszt: 4000 UAH.
⏱️ Czas realizacji: 2 dni.
🌟 Pracuję bez zaliczki.
… 🎨 Zrealizowane projekty:
🔗 https://www.voxloud.com/it/en
🔗 https://www.thehomehub.net
🔗 https://www.elmont.com.ua
🔗 https://go.voxloud.com/activate_now/signup
🔗 https://vlad-yermolayev.github.io/specteh/dist
📩 Napisz, omówimy szczegóły.
-
481 2 1 Dzień dobry. Mój zbieracz Gulp + webpack w pełni spełnia wszystkie Twoje wymagania i jestem gotów przystąpić do realizacji pracy nad projektem. Biorąc pod uwagę, że masz pewne bloki, które nie muszą być teraz kodowane, cena, którą ustaliłem, ma 10% zniżki. Masz również możliwość rezygnacji z animacji, co również będzie zniżką w cenie o 5%. W ostatniej pracy samodzielnie robiłem projekt, więc poprawki w projekcie nie stanowią dla mnie problemu.
-
1773 25 0 Witaj, Rusłan. Zajmowałem się przez długi czas tworzeniem podobnych stron w firmach komercyjnych. Doskonale rozumiem Twoje TZ i życzenia dotyczące realizacji.
Biorąc pod uwagę wszystkie możliwe poprawki i niuanse:
Termin wykonania: 10 dni.
Koszt: 12000 UAH
Moja strona: https://dmytro-kuzan.vercel.app/
-
362 Gotowy do wykonania szablonu zgodnie ze wszystkimi standardami, mam wiedzę na temat SEO, optymalizuję kod HTML nie dodając zbędnych elementów. Doświadczenie w szablonach ponad 20 lat
Czas realizacji od 2-5 dni
-
2036 22 0 Witaj!
Będę zadowolony ze współpracy. Zawsze jestem w kontakcie. Proszę pisać.
Przykłady prac https://web.khorol.com.ua
-
239 Witam!
Zainteresowała mnie wasza propozycja dotycząca rozwoju.
Cena i terminy mogą być skorygowane w trakcie komunikacji, wyjaśnień i rozwoju strony.
Będę zadowolona, mogąc włożyć wysiłek i swoje doświadczenie w pomyślną realizację.
Portfolio:Freelancehunt
…
Czekam na waszą decyzję!
-
2238 24 0 Cześć, Ruslan!!!
Jestem gotowy szybko i jakościowo wykonać szatę graficzną twojej strony!
Wynikiem będzie czysty kod HTML/CSS/JS bez użycia zewnętrznych, ciężkich bibliotek. Tworzę z pełną adaptacją i kompatybilnością między przeglądarkami, przestrzegając wszystkich nowoczesnych technologii, co pozwala moim projektom osiągać wysoką prędkość ładowania zgodnie z Google Page Speed, co pozytywnie wpływa na SEO.
Jestem gotowy omówić zadanie w prywatnej korespondencji.
Moje ostatnie prace:
… https://s-iteost.vercel.app/index.html - landing
https://sanyok185.github.io/Top-10/home.html - wielostronicowy
https://sanyok185.github.io/PLUGIT/main.html - wielostronicowy
https://sanyok185.github.io/Property/home.html - wielostronicowy
https://sanyok185.github.io/Proyavlennya/ - landing
https://sanyok185.github.io/StanDesk/ - landing
https://sanyok185.github.io/Bruden/home.html - sklep
https://sanyok185.github.io/VPNit/home.html - wielostronicowy
-
343 Gratulacje Vitaly.
Ponad 9 lat doświadczenia w programowaniu,
html, css, js, sass, scss, pug, webback, design responsywny i więcej
strona optimal_ai -
https://boyko1396.github.io/optimal_ai/dist/index.html
cena 5500, czas realizacji 4 dni
https://github.com/boyko1396 - mój github:)
-
2656 40 0 Witam, zrobię, piszcie, będę zadowolona ze współpracy
Witam, zrobię, piszcie, będę zadowolona ze współpracy
-
7828 96 0 Witaj. Mogę stworzyć responsywną stronę internetową według szablonu w Figmie.
Do tworzenia użyję html, css i js oraz metodologię BEM.
Portfolio:Freelancehunt
Pisz, chętnie nawiążę współpracę z Tobą.
-
448 4 0 Witam!
Zapoznałem się z wymaganiami projektu oraz animacjami, które należy zrealizować na stronie. Biorąc pod uwagę liczbę i złożoność animacji, takich jak przewijanie bloków, ruch ikon, płynne zmiany kolorów oraz animacje elementów przy najechaniu.
Orientacyjny czas realizacji wszystkich prac to 10-14 dni, uwzględniając adaptację animacji do różnych urządzeń oraz testowanie.
Jeśli odpowiadają Państwu warunki, chętnie omówię szczegóły i rozpocznę pracę.
Z poważaniem,
… Wiaczesław
-
531 3 0 Dzień dobry, Rusłan!
Będę zadowolony z współpracy z Tobą i wykonania zamówienia w najkrótszym czasie. W swojej pracy zwracam szczególną uwagę na niezawodność kodu, jakość stworzonej strony oraz wygodę użytkownika. Moje strony są responsywne, dostosowane do różnych przeglądarek i mają animacje. Odpowiadają makietom (perfect pixel). Jestem gotów omówić akceptowalną dla Ciebie cenę. Jestem gotów natychmiast przystąpić do pracy.
Oto link do mojego portfolio:
Freelancehunt
Powody, dla których warto ze mną pracować:
- Czysty i minimalistyczny kod dla Twojego łatwego zrozumienia.
- Zawsze gotów omówić Twoją wizję gotowego produktu.
… - Łatwa komunikacja.
- Głęboki interes w zrozumieniu głównej idei swojej wizji.
Mogę Ci pomóc w:
- HTML5 i CSS3.
- JavaScript.
- Metodologia BEM.
- Kompatybilność z różnymi przeglądarkami (Firefox, Chrome, Opera, Safari).
- Jeśli to konieczne, najpierw mobilny.
- Nowoczesny i responsywny design.
- Złożona animacja CSS/JS.
- Efekt paralaksy.
- Praca z makietami Figma.
- Pixel Perfect Conversion.
- Realizacja w jasnym i ciemnym motywie.
- Automatyczne przełączanie motywu strony przy zmianie motywu systemu operacyjnego.
- Przełączanie między jasnym a ciemnym motywem za pomocą przełącznika.
Z poważaniem,
Bohdan Gotra
-
1048 3 0 Witaj.
Czy potrzebna jest wyłącznie szata graficzna, czy integracja z określoną platformą e-commerce?
Jestem gotów omówić szczegóły i rozpocząć pracę! :)
Miłego dnia!
-
155 1 0 Dzień dobry.
Wykonam skład szybko i jakościowo.
__________________________________
-
Доброго вечора, надайте інформацію, під яку систему готується верстка?
Питання до потенційних виконавців, ви дійсно не цінуєте свою працю і свій труд з пропозиціями 5-14к?
-
Я что то пропустил? Почему Flex проигрывает уже Гридам? Я понимаю если надо делать mansory сетку это без вариантов Грид. Но почему обычный Flex будет хуже 3 для 3х колонок, чем Грид? Очень заинтересовало, буду благодарен за пояснения
-
Aktualne zlecenia dla freelancerów w kategorii Układ HTML i CSS
Szukam osoby, która pomoże wypełnić stronę agencji reklamowej na WordPressie.Stworzyłem w Kload strony i teraz wszystko to zrobiłem na WordPressie. Szukam osoby, która będzie mogła pomóc wypełnić treścią stronę. Szybko i jakościowo, pewnie trzeba będzie wygenerować niektóre zdjęcia w GPT. Postaram się pomóc. Stron jest około 15. AI tekst, Układ HTML i CSS ∙ 40 minut temu ∙ 14 ofert |
Trzeba stworzyć stronę z PDF, czy to możliwe?Projekt jest już całkowicie narysowany, ale mamy go tylko w formacie PDF, ponieważ plik Figma został utracony... Mogą wystąpić różnice w nim. To jest do zaakceptowania. Czy trzeba go narysować w Figma? A może lepiej zrealizować i umieścić na CMS, a jeśli tak, to na jakim?… Układ HTML i CSS, Programowanie stron internetowych ∙ 41 minut temu ∙ 39 ofert |
Rozwój sklepu internetowego WordPress + WooCommerce# Development of an Online Store for Agricultural Equipment The design mockup is currently in the final stages of development. I fully understand that without a ready mockup, the final estimate will be inaccurate. However, if you have already implemented similar e-commerce… Content Management Systems, Układ HTML i CSS ∙ 8 godzin 34 minuty temu ∙ 51 ofert |
Wykonawca do multi-page advertoriala strony (Health Media) — vibe-coding, czysty kod
546 PLN
Trzeba stworzyć wielostronicową stronę internetową w stylu health media, na wzór healthinsider.news. Nie tylko landing page — pełnoprawna pseudo-redakcyjna strona (advertorial), pod którą będzie płynął ruch z Meta Ads. WAŻNE: zadanie realizowane jest poprzez vibe coding… Układ HTML i CSS, Programowanie stron internetowych ∙ 15 godzin 52 minuty temu ∙ 49 ofert |
Aktualizacja projektu na stronieTrzeba zaktualizować design istniejącej strony internetowej używając HTML, CSS, JS: odświeżyć wygląd, uczynić go nowoczesnym i responsywnym na urządzenia mobilne. Wymagana jest dodanie płynnych animacji i interaktywnych elementów. Układ HTML i CSS, Javascript & Typescript ∙ 1 dzień 20 godzin temu ∙ 86 ofert |