omerozceylan/Front-End-Development-Resources

Resources, tools, extensions and everything else about "Front-End Development".

Front-End Development Resources

Here you can find resources, tools, extensions and everything else about "Front-End Development".

---

Helpful / Useful Links | Resources | Tools | Extensions | Jobs/Careers

---

Helpful / Useful Links

• VSCode - (Web Editor)
• Codepen.io
• JSFiddle

• Can I Use

• onelang.io - (Convert programming language to another)

• Git Explorer
• explainshell.com
• Command Challange

• Component Party
• Analyzer CSS
• JSON Crack

• Ubuntu pastebin
• Carbon - (Create and Share beautiful images of your source code)

• GitHub Profile README Generator
• GitHub Contributions Chart Generator
• Github Profile README Icon Card Generator
• Github Profile README Skills Icons

• Freelancer Guide
• Uzaktan Çalışmak - [TR]

⬆ back to top ⬆

---

Resources

Document Resources | Video Resources | Courses | Certificate Programs | Trainings and Code Battles Sites | CheatSheets | Roadmaps | Source Research | Templates

Document Resources

General Resources:

• MDN Web Docs
• W3Schools
• Tutorials Point
• web.dev (Google)
• GeeksforGeeks - Web Development
• SoloLearn

CSS:

• CSS-Tricks
• cssreference.io

SASS/SCSS:

• SASS-SCSS

Bootstrap:

• Bootstrap

Tailwind CSS:

• Tailwind CSS

JavaScript:

• JavaScript.Info
• Learn JavaScript
• JavaScript30
• FreeCodeCamp

React:

• React
• React Legacy

• React Tutorial

Vue:

• Vue.js
• Vue Router

• Vue School
• LearnVue

TypeScript:

• TypeScript

• Microsoft TypeScript Handbook

⬆ back to top ⬆

Video Resources

HTML:

• [TR] - HTML Dersleri - (Enes Bayram)

CSS:

• [TR] - Sıfırdan CSS Eğitim - (Adem İlter)
• [TR] - CSS Anlat - (Adem İlter)
• [TR] - CSS Dersleri - (PROTOTURK)
• [TR] - CSS Dersleri - (Enes Bayram)
• [TR] - CSS3 Transition, Transform ve Animation Özellikleri - (Arin Yazilim)

SASS/SCSS:

• [TR] - SASS Eğitim Serisi - (Uğur Aktaş)

Tailwind CSS:

• [EN] - Tailwind CSS - Course for Beginners - (CodewithGuillaume)
• [EN] - Tailwind CSS – Course for Beginners - (freeCodeCamp.org)

• [TR] - Tailwind CSS Dersleri - (PROTOTURK)
• [TR] - Yeni Başlayanlar İçin Tailwind CSS - (Arin Yazilim)
• [TR] - Tailwind CSS - Kullanacaklar izlesin - (Adem İlter)
• [TR] - Tailwind CSS - Çok mu çirkin!? - (Adem İlter)
• [TR] - Tailwind CSS - Temel Kavramlar, CSS bilmek şart mı? - (Adem İlter)

Bootstrap:

• [TR] - Bootstrap Dersleri - (Enes Bayram)
• [TR] - Bootstrap 5 - (Arin Yazilim)

JavaScript:

• [EN] - JavaScript - Full Course - (Bro Code)
• [EN] - JavaScript - Full Course - (freeCodeCamp.org)

• [EN] - JavaScript Tutorial - Create a Card Game - (freeCodeCamp.org)
• [EN] - Build A Calculator With JavaScript Tutorial - (freeCodeCamp.org)
• [EN] - 10 JavaScript Projects in 10 Hours - Coding Challenge - (freeCodeCamp.org)
• [EN] - Build 15 JavaScript Projects - Vanilla JavaScript Course - (freeCodeCamp.org)

• [TR] - JavaScript - (PROTOTURK)
• [TR] - 30 Günde JavaScript - (PROTOTURK)
• [TR] - Modern Javascript - (Mehmet Pekcan)
• [TR] - JavaScript Eğitim Serisi - (Uğur Aktaş)
• [TR] - JavaScript Dersleri - (Enes Bayram)
• [TR] - JavaScript Karmaşası - (Arin Yazilim)
• [TR] - Uygulamalı Javascript Dersleri - (Arin Yazilim)
• [TR] - Frontend Calisma Grubu - (Fatih Acet)

React:

• [EN] - React State Management – Intermediate Course - (freeCodeCamp.org)

• [TR] - React + Tailwind = UI Clone Projeleri - (PROTOTURK)
• [TR] - React Örnekleri - (PROTOTURK)
• [TR] - ReactJS Basit Uygulamalar - (Uğur Aktaş)
• [TR] - Yeni Başlayanlar İçin React - (Arin Yazilim)
• [TR] - React'la Site Yapımı - (Uğur Coşkun)
• [TR] - ReactJS Eğitim Seti 2022 - (PC Uzmanı)
• [TR] - React ile Twitter Klonu - (Adem İlter)

React Hooks:

• [TR] - React-Hooks - (Uğur Coşkun)
• [TR] - React Hooks - (codingwithdidem)
• [TR] - React Hooks - (Ali Özkan)
• [TR] - React Custom Hooks - (Ali Özkan)

React Redux:

• [TR] - ReactJS Redux - (Uğur Aktaş)
• [TR] - React - Redux - (Uğur Coşkun)

React Context:

• [TR] - React Context - (Ali Özkan)

Next.js:

• [TR] - Next.js v13 İlk Bakış - (Mehmet Pekcan)
• [TR] - Sıfırdan İleri Seviye Next.js (v13) - (Mehmet Pekcan)
• [TR] - Next.js öğreniyorum - (Adem İlter)

Vue:

• [EN] - Vue.js - Course for Beginners [2021] - (freeCodeCamp.org)

• [TR] - Vue3 Bootcamp - (Kablosuz Kedi)
• [TR] - Vue eklentisi nasıl yazılır/paketlenir/npm'e gönderilir - (Adem İlter)

Nuxt.js:

• [EN] - Nuxt 3 - Full Course for Beginners - (CodewithGuillaume)

• [TR] - NuxtJS - (Abdullah Uğraşkan)

TypeScript:

• [TR] - TypeScript Dersleri - (PROTOTURK)

Figma:

• [TR] - Türkçe Figma Eğitimi - (Adem İlter)

Uncategorized

Adem İlter - [TR]

• [TR] - İpuçları - (Adem İlter)
• [TR] - HTML+CSS Öğreniyoruz (+ SASS/SCSS) - (Adem İlter)
• [TR] - Kendi Web Sitemizi Yapalım - (Adem İlter)
• [TR] - Frontend Araçları - (Adem İlter)
• [TR] - Türkçe Sözlük Mobil Uygulaması - (Adem İlter)

PROTOTURK - [TR]

• [TR] - Front-end Alıştırmaları

Yunus Eş - [TR]

• [TR] - Zero to Hero - FrontEnd Developer
• [TR] - Herkes İçin Programlama

Arin Yazilim - [TR]

• [TR] - İleri HTML - CSS - SASS Dersleri - (Arin Yazilim)
• [TR] - Yeni Başlayanlar İçin Context API - Hooks - (Arin Yazilim)

Mehmet Pekcan - [TR]

• [TR] - Örneklerle Frontend - HTML, CSS, JS - (Mehmet Pekcan)
• [TR] - Örneklerle Frontend - React.js - (Mehmet Pekcan)

codingwithdidem - [TR]

• [TR] - React Testing Library & Jest - (codingwithdidem)
• [TR] - Twitter Klonu Yapıyoruz (Tailwindcss & ReactJS & Firebase Firestore) - (codingwithdidem)
• [TR] - Chatify Chat Uygulaması - (Hooks, Redux, Firebase, Figma) - (codingwithdidem)

Yazılım Bilimi - [TR]

• [TR] - HTML,CSS, Flexbox ve Bootstrap Dersleri

⬆ back to top ⬆

Courses

• Frontend Masters
• Udemy
• Google Digital Garage
• Scrimba

• Patika.dev - [TR]

• Geleceği Yazanlar - [TR]

• BTK Akademi - [TR]

• Bilgeİş - [TR]

  
  

⬆ back to top ⬆

Certificate Programs

• freeCodeCamp
• HackerRank
• Udemy
• Google Digital Garage

• Patika.dev - [TR]
• Geleceği Yazanlar - [TR]
• BTK Akademi - [TR]
• Bilgeİş - [TR]

⬆ back to top ⬆

Training and Code Battles Sites

• HackerRank
• freeCodeCamp
• Frontend Mentor
• CodeWars
• CSSBattle

• JavaScript is Weird

⬆ back to top ⬆

CheatSheets

General CheatSheets:

• OverAPI.com
• DEVHINTS.IO
• Cheatography

VSCode CheatSheet:

• Emmet

Specific CheatSheets:

• HTML-CSS (Web Development Tutorials)
• HTML
• Flexbox
• Grid
• Tailwind CSS
• JavaScript Cheatsheet
• Responsive Web Design
• Git
• Git
• Git

⬆ back to top ⬆

Roadmaps

General Roadmap:

• roadmap.sh

Front-End Roadmaps:

• WebSkills
• Front-End Developer Roadmap

⬆ back to top ⬆

Source Research

• DevDocs
• Design Resources
• Free JavaScript Resources
• Web Development Resources
• Free for Developers
• Dev Resources
• Public APIs

• Türkçe Kaynaklar - [TR]

⬆ back to top ⬆

Templates

Figma Templates:

• UntitledUI - (UI kit and design system for Figma)
• DopeUI - (Templates for Figma)
• FreeFigmaTemplates - (Templates for Figma)

General Templates:

• HTMLrev - (Landing page HTML templates)
• HTML5 UP - (Responsive HTML5 and CSS3 Site Templates)
• GrayGrids - (HTML, Bootstrap, Tailwind Templates)
• UIdeck - (HTML Templates, Bootstrap Themes, Tailwind, and React Templates)

Tailwind CSS Template:

• Tailwind Templates - (Templates of Tailwind CSS)

Bootstrap Template:

• Bootstrap Made - (Templates of Bootstrap)

⬆ back to top ⬆

---

Tools

Icons | Colors | Fonts | Stock Media Resources | CSS Generators | Ready to use (...) | Hosts | API

Icons:

• Icônes - (Icon Explorer)
• SVGPS
• Font Awesome
• Bootstrap Icons
• Hero Icons

• Google Icons
• Tabler Icons
• Line Icons
• Icon Scout
• Remix Icon
• CSS.gg
• ionicons
• Feather Icons
• Flaticons
• Boxicons
• Simple Icons
• IcoMoon
• Iconoir
• Phosphor
• Glyphs Icons
• IconPark
• Bunch Icons

⬆ back to top ⬆

Colors:

• 147 Colors
• uiGradients
• coolors
• Colorsinspo
• Color Hunt
• colorsandfonts.
• colordesigner
• colorshadowlord/
• Shadowlord - Tints and Shades Colors

⬆ back to top ⬆

Fonts:

• Google Fonts
• fontpair
• fontspace
• fontfabric
• fontshare

⬆ back to top ⬆

Stock Media Resources:

• Pexels
• Unsplash
• pixabay
• Lorem Picsum
• Freepik
• Storyset
• Undraw

⬆ back to top ⬆

CSS Generators:

• Glassmorphism Generator

  • Glassmorphism Generator
  • Glassmorphism Generator
  • Glassmorphism Generator
  • Glassmorphism Generator
• Gradient

  • Gradient
  • Gradient
  • Gradient
• Mesh Gradient

  • Mesh Gradient
  • Mesh Gradient
• Background Wave SVG Generator

  • Custom Shape Dividers
  • Background Wave SVG Generator
  • Background Wave SVG Generator
• Border Radius Generator

  • Blobmaker
  • Fancy Border Radius Generator
• Box-Shadow - Gradiend Box-Shadow

  • Box-Shadow
  • Box-Shadow
  • Gradient Box-Shadow
• Grid Generator

  • Grid Generator
  • Grid Generator

• Flexbox Generator

• Neumorphism Generator

• Text Gradient

• Gradient Text-Shadow

• Tailwind CSS Gradient Generator

• Accordion Slider Generator

• CSS Stripes Generator

• Keyframes Generator

• Loader Animations

• CSS / SCSS color variables generator

⬆ back to top ⬆

Ready to use (...) :

• Tailwind UI - (Official Components of Tailwind CSS - By the makers of Tailwind CSS)
• Flowbite - (Components of Tailwind CSS)
• Headless UI - (Components of Tailwind CSS for Vue/React)
• daisyUI - (Components of Tailwind CSS for Vue, React, ...)
• Material Tailwind - (Components Library for Tailwind CSS and Material Design)
• Tailblocks - (Ready-to-use Tailwind CSS Blocks)

• uiverse - (Buttons-Loaders-Checkboxes-Toggle Switches-Inputs-Cards)
• Box-Shadows
• Gradient Buttons
• Buttons
• Collection of CSS Animations
• Animate.css - (CSS Animations Library)
• Popular Layouts and Patterns
• 50 Free SVG Mesh Gradients
• A free collection of 208 SVG Doodles

⬆ back to top ⬆

Hosts:

• Firebase (Google)
• AWS (Amazon)
• Azure
• Cloudflare
• DigitalOcean
• 000webhost

• Supabase

• Vercel
• Netlify
• GitHub Pages

⬆ back to top ⬆

API:

• The Movie Database
• TVDB - (TV and Movie Databases)
• Supabase
• Pocket API
• Kuzzle
• V-Calander - (on Vue.js)
• Here Developer
• Asana
• HTTP Cats

⬆ back to top ⬆

---

Extensions

Browser Extensions | VSCode Extensions

Browser Extensions:

• ColorZilla
• Dimensions
• WhatFont
• Wappalyzer
• WhatRuns
• VisBug
• CSS Peeper
• CSSViewer
• Web Developer
• Window Resizer
• React Developer Tools
• Vue.js devtools
• Lighthouse
• Selectext - Copy text from videos!

⬆ back to top ⬆

VSCode Extensions:

• Live Server
• Live Share
• ESLint
• Prettier - Code formatter
• Tailwind CSS IntelliSense
• Tailwind Documentation
• GitLens — Git supercharged
• CSS Peek
• Live Sass Compiler
• Quokka.js
• Console Ninja
• Turbo Console Log
• Markdown Preview Enhanced

• Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more
• ES7+ React/Redux/React-Native snippets
• JavaScript (ES6) code snippets
• Vue Language Features (Volar)
• TypeScript Vue Plugin (Volar)
• Vetur
• Vue VSCode Snippets

• Better Comments
• Color Highlight
• indent-rainbow
• Material Theme
• Material Icon Theme
• Deepdark Material Theme
• Power Mode
• vscode-faker
• CodeSnap

⬆ back to top ⬆

---

Jobs/Careers

Jobs | Remote | Freelance

Jobs:

• TalentGrid
• coderspace

• Relocate
• Crossover
• Coolever

• Gençlere Destek - [TR]

• { kod, ilan } (Kodilan.com) - [TR]
• Kariyer.net - [TR]

⬆ back to top ⬆

Remote:

• Remote In Tech - (A list of semi to fully remote-friendly companies in tech)

• Remote
• We Work Remotely

• NoDesk
• Arc
• Jobspresso
• remote|ok.
• Remote.co
• Remotive

⬆ back to top ⬆

Freelance:

• Upwork
• fiverr

• Armut - [TR]
• bionluk - [TR]

⬆ back to top ⬆

---

My accounts on social networks:

• Twitter: @emr3rden
• Instagram: @emr3rden
• Codepen: @emr3rden
• LinkedIn: @emr3rden
• Website: emr3rden.github.io