Nauczenie się umiejętności potrzebnych do projektowania lub tworzenia stron internetowych jest pierwszym krokiem w kierunku pracy w sieci – ale oznacza to również zapoznanie się z narzędziami tego zawodu. Dlatego właśnie stworzyliśmy listę 99 darmowych narzędzi, których będziesz potrzebować do tworzenia stron internetowych, projektowania stron internetowych lub obu.

Każdy zasób na tej liście jest darmowy i uzupełnia umiejętności, których uczymy w naszych Web Design, Web Developer i Front End Developer Blueprints (zajęcia prowadzone przez instruktora, które przeprowadzą Cię przez podstawy każdej roli).

Jak będziesz się uczyć, trzymaj tę listę pod ręką i myśl o niej jak o swojej wirtualnej skrzynce z narzędziami.

Zasoby projektowania stron internetowych

Ta lista narzędzi do projektowania stron internetowych zawiera narzędzia do projektowania stron internetowych dla początkujących, jak również zasoby projektowe, które będą Ci służyć przez całą karierę.

(powrót do góry)

Listy newsletterów

1. Creative Market
Zanim zrobisz cokolwiek innego, zapisz się na listę newslettera Creative Market. Raz w tygodniu otrzymasz wiadomość e-mail z 5 darmowymi plikami do pobrania, w tym wszystko od wzorów i czcionek po szablony i motywy.

(powrót do góry)

Oprogramowanie + aplikacje

Te programy i aplikacje internetowe zapewniają solidne podstawy do projektowania stron internetowych.

2. CoffeeCup Software
Oferują wszelkiego rodzaju darmowe aplikacje dla projektantów stron internetowych, w tym edytor HTML, kreator formularzy internetowych, projektant koszyków na zakupy i wiele innych.

3. InVision app
Wspaniałe narzędzia do prototypowania i współpracy. Możesz uzyskać wysokiej jakości makiety i prototypy w ciągu zaledwie kilku minut.

4. Pixlr
Edytuj obrazy bezpośrednio w przeglądarce.

5. Canva
Niesamowicie łatwe oprogramowanie do projektowania graficznego, z którego może korzystać każdy. Funkcja wyszukiwania i przeciągania jest tak prosta i pomocna!

6. Easel.ly
Niesamowite darmowe szablony infografik.

(powrót do góry)

Zdjęcia

Zdjęcia są krytyczną częścią projektowania stron internetowych. Te zasoby zdjęć stockowych są kluczowe, gdy potrzebujesz odpowiedniego zdjęcia właśnie teraz.

7. Unsplash
Kilka z najwspanialszych darmowych zdjęć stockowych i mnóstwo różnorodnych. Nowe obrazy są dodawane codziennie.

8. PicJumbo
Dostarczaj darmowe zdjęcia do swojej skrzynki odbiorczej, które są całkowicie darmowe do użytku osobistego i komercyjnego.

9. Gratisography
Darmowe obrazy w wysokiej rozdzielczości, które możesz wykorzystać w projektach osobistych i komercyjnych. Mają łatwe do przeglądania kategorie: zwierzęta, natura, obiekty, kapryśne i inne.

10. Compfight
Wyszukaj tony obrazów licencjonowanych do użytku osobistego i/lub komercyjnego, głównie z serwisu Flickr.

11. IM Free
Skonsolidowane zasoby do projektowania stron internetowych, w tym tony skategoryzowanych zdjęć, ikon i szablonów.

12. Stock Up
Szukaj ponad 9000 zdjęć z 26 różnych stron internetowych, wszystko w jednym miejscu.

13. Death to the Stock Photo
Zapisz się na ich listę e-mailową i otrzymuj darmowe pakiety zdjęć do swojej skrzynki pocztowej raz w miesiącu.

14. Little Visuals
Jeśli dołączysz do ich listy, otrzymasz 7 darmowych zdjęć w wysokiej rozdzielczości wysyłanych do Ciebie raz w tygodniu.

15. New Old Stock
Dostań darmowe, zabytkowe zdjęcia z publicznych archiwów.

16. Cupcake
Darmowe, wysokiej jakości zdjęcia autorstwa Jonasa Nilssona Lee.

17. Pexels
10 nowych darmowych zdjęć stockowych każdego dnia.

18. Magdeleine
1 darmowe zdjęcie high-res dziennie.

19. SplitShire
Darmowe, wysokiej jakości zdjęcia stockowe autorstwa włoskiego fotografa.

20. ISO Republic
Wysokiej jakości zdjęcia stockowe przeznaczone dla kreatywnych.

21. Paul Jarvis
Zapisz się, aby otrzymać 20 najlepszych zdjęć Paula Jarvisa za darmo.

(back to top)

Symbole + Ikony

Szukasz symboli lub ikon do wykorzystania na swojej stronie internetowej? Nie szukaj dalej.

22. Pixeden
Tony darmowych zestawów ikon, w tym ikony pogodowe, ikony społecznościowe, ikony liniowe i wiele innych.

23. Iconmonstr
Ponad 2800 odważnie graficznych ikon w kilku różnych stylach.

24. Captain Icon
Ponad 350 darmowych ikon wektorowych do projektów mobilnych i internetowych.

25. Linear Icons
Czcionka ikon ze 170 różnymi ikonami do wyboru.

26. Font Awesome
Czcionka symboli, która umożliwia dodawanie symboli do stron internetowych.

27. Fontello
Generuje pakiety czcionek ikon.

28. flaticon
Ściągnij ikony wektorowe lub dołącz ikony jako czcionki internetowe.

29. The Noun Project
Szukaj rzeczownika, otrzymaj darmowy symbol lub ikonę.

30. Endless Icons
Biblioteka darmowych ikon.

31. Perfect Icons
Dostosuj i zoptymalizuj ikony mediów społecznościowych dla swojej witryny.

32. iconSweets
60 darmowych wektorowych ikon Photoshopa.

33. Round Icons
Darmowe, dziwaczne i profesjonalne zestawy ikon.

(powrót do góry)

Czcionki

Czcionki są tak istotną częścią projektu, że łatwo je przeoczyć. Zamiast tego zajrzyj tutaj i znajdź czcionki, które przeniosą Twój projekt na wyższy poziom.

34. Google Webfonts
Dodaj czcionki do swojej witryny za pomocą kilku kliknięć.

35. typegenius
Generator parowania czcionek.

36. Font Squirrel
Setki całkowicie darmowych czcionek.

37. Beautiful Web Type
Sprawdź kolekcję najpiękniejszych fontów Google Webfonts.

38. Lost Type
Piękne czcionki typu pay-what-you-can.

(powrót do góry)

Kolory

Potrzebujesz pomocy w wybraniu najlepszych kolorów dla Twojego projektu? Te narzędzia kolorów są do Twojej dyspozycji.

39. Material UI
Galeria kolorów Material Design i flat design do wykorzystania w Twoich projektach.

40. Paletton
Zacznij od dowolnego koloru, a otrzymasz paletę (z 5 odcieniami każdego koloru) opartą na kilku różnych schematach kolorystycznych: monochromatycznym, sąsiadującym, triadowym, tetradowym lub niestandardowym.

41. Design Seeds
Tony wielkie palety kolorów wzięte z fotografii. Możesz wyszukiwać według słów kluczowych lub podobnych kolorów.

42. Adobe Color Wheel
Wybieraj spośród różnych typów par kolorów i zapisuj swoje palety kolorów.

43. Material Palette
Generuj paletę kolorów na podstawie 2 kolorów.

44. Flat UI Color Picker
Nazwa mówi wszystko.

45. Flat UI Colors
Ditto.

46. Bootflat
Płaski selektor kolorów.

47. Coolors
Generator palety kolorów.

48. Skala Color
Darmowy próbnik kolorów do pobrania.

49. BrandColors
Sprawdź, jakich dokładnie kolorów używają największe marki.

50. 0 to 255
Znajdź idealną odmianę koloru, której szukasz.

51. Colour Lovers
Przeglądaj palety kolorów użytkowników i dodaj własne do społeczności.

52. Palette for Chrome
Generuje palety kolorów na podstawie obrazów.

(powrót do góry)

Tła + tekstury

Zdjęcia, czcionki i kolory to nie koniec projektu – potrzebujesz również tła i tekstur, które utrzymają je wszystkie razem. Znajdź swoje za pomocą tych narzędzi.

53. Pattern8
Tony zabawnych, odważnych i jaskrawych powtarzających się wzorów do wyboru.

54. Repeat-X Repeat-Y
Niesamowite powtarzające się wzory z całego świata.

55. Texture King
Wszystkie tekstury, jakich można sobie zażyczyć: grunge, rdza, tynk, beton, brud i wiele innych.

56. Patternico
Twórz swoje własne wzory używając ikon Font Awesome. Dostosuj kolor tła, rozmiar płótna i przezroczystość kształtu.

57. Subtle Patterns
Darmowe wzory do pobrania.

58. Lost and Taken
Darmowe tekstury w wielu kategoriach, w tym kartonowe, kamienne, metalowe, bąbelkowe, bezszwowe i inne.

59. BG Patterns
Twórz bezszwowe wzory z konfigurowalnymi kolorami, kształtami i nie tylko.

(powrót do góry)

UI (User Interface) Kits/Guides

Web design to coś więcej niż tylko atrakcyjność wizualna. Sposób, w jaki interfejs użytkownika witryny „czuje się” dla użytkownika jest również czynnikiem krytycznym. Te narzędzia pomogą upewnić się, że Twój własny projekt UI jest w punkt.

60. 55+ Elements Free UI Kit
Czysty, nowoczesny zestaw UI. Pamiętaj, aby poszukać na stronie Behance, gdzie znajdziesz mnóstwo świetnych zasobów od innych projektantów!

61. Oh no, not another UI Kit
Prosty, płaski, open source’owy mobilny i webowy UI kit, który jest dostarczany jako plik PSD.

62. PSD Booster Freebies
Tony wspaniałych darmowych materiałów do Photoshopa, w tym zestawy UI, motywy i inne.

63. Material Design Guidelines
Oficjalny przewodnik po standardach Google Material Design.

(back to top)

Web Development Resources

Po zaprojektowaniu strony internetowej, musi ona zostać opracowana! Niezależnie od tego, czy pracujesz po obu stronach procesu (projektując i budując witrynę), czy też budujesz witrynę w oparciu o czyjeś projekty, te narzędzia deweloperskie pomogą Ci uczynić ten projekt wirtualną rzeczywistością.

(powrót do góry)

Nazwy domen Wyszukiwarki

Nazwy domen są w sercu witryny internetowej – są bezpośrednim adresem, pod którym użytkownicy mogą znaleźć Twoją witrynę online. Ale internet to zatłoczone miejsce i może być trudno znaleźć dokładnie taką nazwę domeny, jaką chcesz. Te narzędzia pomogą Ci dowiedzieć się z nazwy chcesz jest dostępny, i stworzyć jeden, że JEST, jeśli pierwszy wybór nie jest.

64. Namemesh
Potężna wyszukiwarka nazw domen, która pomoże Ci znaleźć domeny, które są krótkie, zabawne, wspólne, podobne i różne inne kwalifikatory.

65. Nameboy
Wprowadź słowo kluczowe lub dwa i otrzymaj listę dostępnych domen, które je zawierają.

66. Panabee
Opisz, czego chcesz w dwóch słowach, a Panabee wygeneruje listę potencjalnych nazw domen.

67. Impossibility
Generuj losowe nazwy domen na podstawie jednego słowa.

68. LeanDomainSearch
Wyszukaj nazwę domeny według słów kluczowych.

(back to top)

Frameworks, Templates, Code Packs, + Themes

Czasami będziesz musiał zakodować każdą część strony internetowej od zera, ale czasami nie będziesz. Oto lista frameworków, szablonów, pakietów kodu i motywów, których możesz użyć, aby skrócić ciężki lifting.

69. WP-Flex
Pusty, responsywny szablon motywu WordPress, który jest zgodny z oficjalnymi najlepszymi praktykami i wymaganiami WordPress Codex.

70. Foundation
Zaawansowany responsywny framework, który jest jednym z najpopularniejszych na świecie.

71. Ionic
Twórz aplikacje mobilne przy użyciu technologii internetowych, które znasz i kochasz.

72. Initializr
Szybko wygeneruj szablon oparty na HTML5 Boilerplate.

73. Materialize
Nowoczesny, responsywny framework oparty na specyfikacji Google Material Design.

74. WordPress Plugin Boilerplate
Jeśli chcesz tworzyć wtyczki do WordPressa, Plugin Boilerplate jest ustandaryzowanym, zorientowanym obiektowo punktem wyjścia.

75. Front-end Boilerplate
Podstawowy punkt wyjścia do tworzenia stron internetowych, abyś nie musiał za każdym razem odtwarzać wszystkiego od nowa.

76. HTML5 Boilerplate
Pierwszy i najlepszy. Darmowy kod HTML5 boilerplate.

77. HTML5 UP
Darmowy, w pełni responsywny szablon HTML5.

78. 1 Line CSS Grid Framework
Szablon dla CSS, który ma tylko 1 linię długości!

79. 960 Grid System
Faworyt Skillcrush.

80. Starkers for WordPress
Podstawowy szablon do stworzenia swojego pierwszego motywu WordPress.

81. Barebones for WordPress
Darmowy szablon WordPress dla programistów.

82. Underscores
Szablon WordPress do zbudowania zupełnie nowego motywu.

83. Sage for WordPress
Motyw startowy WordPressa oparty na HTML5 boilerplate i Bootstrap.

84. Whiteboard for WordPress
Czysty, podstawowy motyw WordPress dla programistów.

85. Bootstrap
Odpowiedzialny framework HTML, CSS i JS.

86. Bootswatch
Darmowe motywy dla Bootstrapa.

(powrót do góry)

Przewodniki po stylach kodowania

Nie możesz zacząć kodować bez nauczenia się podstawowych umiejętności, ale gdy już je zdobędziesz, czas nauczyć się, jak kodować artystycznie. Te przewodniki nauczą cię najlepszych praktyk kodowania, które podniosą twoją pracę ponad poziom podstawowy.

87. Web Field Manual
Zbiór zasobów, najlepszych praktyk, inspiracji i materiałów referencyjnych dla nowoczesnego kodowania. Istnieją również sekcje wypełnione narzędziami i dodatkowymi zasobami oraz informacjami specyficznymi dla danego języka.

88. Google Developers Web Fundamentals
Wyczerpujące źródło najlepszych praktyk tworzenia stron internetowych, prosto od Google. Idealne zarówno dla nowych programistów, jak i tych, którzy chcą ulepszyć swoje projekty.

89. Deployments Best Practices
Zanim wdrożysz witrynę lub aplikację, sprawdź te najlepsze praktyki, aby mieć pewność, że wszystko pójdzie gładko.

90. GitHub
Własny przewodnik po stylach kodu GitHuba.

91. Google
Przewodnik po stylach kodu Google.

92. Mozilla
Przewodnik po stylu kodu od profesjonalistów z Mozilli.

(powrót do góry)

Weryfikacja kodu

Skończyłeś z tą stroną? Nie tak szybko. Zanim oznaczysz projekt jako „skończony”, skorzystaj z tych narzędzi, aby zawiązać luźne końce w kodzie i sprawdzić, czy spełniasz standardy dostępności, stylu i najlepszych praktyk branżowych.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(back to top)

Czy jesteś gotowy, aby połączyć te narzędzia z umiejętnościami, których potrzebujesz, aby zarabiać pieniądze w branży technicznej? Sprawdź naszą stronę z programami, aby znaleźć kurs Skillcrush Blueprint, który jest dla Ciebie odpowiedni. W ciągu zaledwie trzech miesięcy możesz zostać zakwalifikowany do rozpoczęcia pracy w sieci.