Frontend Developer Olmak

Sıfırdan Frontend Developer nasıl olunur? Senior Frontend Developer olabilmek için ne öğrenmek gerekir? Firmaların Frontend Developer'dan istediği şeyleri sizin için yazdım. Hepsine tam anlamıyla hakim olmasanız bile çoğu hakkında fikir sahibi olmanız ve temel kullanımlarını bilmeniz sizi çok öne taşıyacaktır. Frontend Developer olmak için öğrenilecek şeyleri ana başlıklar halinde listede bulabilirsin.

Temel HTML Öğren

• Emmet: Emmet, geliştiriciler için; HTML, XHTML, CSS, CSS3 için kısayol dil olanağı sağlar.
• Forms: Her zaman en çok kullanacağınız HTML form yapısını temel olarak öğrenmelisiniz
• Semantic HTML: HTML tasarımınızı yaparken header, nav, main article ve daha bir çok etiketi kullanarak semantik bir yapı oluşturun.
• Temel SEO Bilgisi: HTML bir website yapıp bunu google'da görünür yapabilmek için meta etiketleri ve içeriği nasıl yöneteceğinizi öğrenin.

Temel CSS Öğren

• Selectors: id, tag ve class isimleri olarak üç seçicinin nasıl kullanıldığını öğrenmelisin
• Positioning: CSS ile nesneleri konumlandırmak için positioning önemli bir konudur
• Box Model: Margin, padding ve border özelliklerinin nasıl kullanıldığını öğrenmelisin
• Display: display inline, block, inline-block ve none özelliklerinin nasıl kullanıldığını öğrenmelisin
• Specificity
• FlexBox
• Grid
• Media Queries
• Pseudo Elements
• Pseudo Classes
• Animations

Temel JavaScript Öğren

• JS Syntax
• DOM Manipulation
• Fetch API / Ajax
• Async Await
• Event Listeners
• ES6+ JavaScript
• Promises
• Classes
• Array Methods
• Scoping
• Hoisting
• Closures

Herhangi Bir CSS Framework Öğren

• Bootstrap
• Tailwind
• Materialize
• Bulma
• Semantic UI
• Foundation

CSS Ön Derleme Tipi Öğren

• SASS / SCSS
• Postcss
• Less
• Stylus
• Stylecow

Versiyon Kontrol Sistem Temellerini Öğren

• Git
• GitHub

Paket Yönetim Temellerini Öğren

• NPM
• Yarn

JavaScript İçin Bir Framework / Kütüphane Öğren

• React
• Vue
• Angular
• Svelte
• Meteor
• Remix

React Hakkında Temel Bilgilieri Öğren

• Components
• JSX
• Props
• State
• Events
• Conditional Rendering

React-Hooks için Önemli Başlıklar

• useState
• useEffect
• useRef
• useContext
• useReducer
• useMemo
• useCallback

React UI Framworkleri Öğren

• Material UI
• Ant Design
• Chakra UI
• React Bootstrap
• Rebass
• Blueprint
• Semantic UI React

Kullanılabilecek Popüler React Paketleri

• React Router
• React Query
• Axios
• React Hook Form
• Styled Components
• Storybook
• Framer Motion

Durum Yönetimi Araçları ile React Durum Yönetimini Sağlayın

• Redux
• MobX
• Hookstate
• Recoil
• Akita

React Öğrendikten Sonra Öğrenilecek Şeyler

• Next JS
• Gatsby
• TypeScript
• React Native
• Electron

NextJS için Öğrenilecek Önemli Şeyler

• Static Site Generation
• Server Side Rendering
• Incremental Static Regeneration
• Dynamic Pages
• CSS / SASS Modules
• Lazy loading Modules
• API Routes

Uygulamalarınızı Test Edebileceğiniz Kütüphane/Framework'ler

• Jest
• Testing Library
• Cypress
• Enzyme
• Jasmine
• Mocha

Uygulamanızı Deploy Edebileceğiniz Websiteler

• Netlify
• Vercel
• Firebase
• Github Pages
• Heroku
• Render

Bilmeniz Gereken Diğer Önemli Başlıklar

• PWA
• Web Sockets
• CORS
• JSON
• RESTful APIs
• GraphQL APIs
• Basic Security
• Web Accessibility

Stil Rehberleri Kullanın

• ES Lint
• Standart
• Prettier

Opsiyonel Olarak Öğrenebilirsiniz

• Webpack
• Parcel
• SnowPack
• Rollup.js
• Gulp

Örnek Projeler

• Real Estate App
• Cryptocurrency App
• Travel Companion App
• ECommerce Web Shop
• Voice Assistant News App
• Portfolio Website
• Voice Powered Budget Tracker
• Blog App with CMS
• Social Media Web App
• Modern UI/UX Website
• Chat App
• Video Chat App
• Progressive Web Apps
• Covid-19 Tracker App
• Google Search Clone
• Premium Landing Page