Udemy

Platform

Türkçe

Language

Web Development

Category

Projelerle İleri Css ve Flexbox | 2021

Flexbox, sass ve ileri css tekniklerini kullanarak profesyonel web sayfaları geliştirin.

4.82 (70 reviews)

Students

37 hours

Content

Jan 2021

Last Update
Regular Price


What you will learn

En çok tercih edilen layout yöntemi olan FLEXBOX, flexbox'ın çalışma mantığı ve flexbox ile layout oluşturma

Sürdülebilir ve yeniden kullanılabilir css yazma

Web sitelerini bilgisayarlar, tabletler ve cep telefonlarına uyumlu hale getirmek için gelişmiş media sorguları yazma

Css Architecture, BEM Metadolojisi, Sass

Kompleks animasyonlar oluşturma ve kullanma

İleri Css ve flexbox ile responsive web siteleri geliştirme


Description

  • Yılardır Css öğrenmeye çabalıyorum fakat istediğim seviyeye gelemedim

  • Css 'in çalışma mantığını bir türlü anlayamıyorum

  • Sitemdeki yapıları istediğim gibi hizalayamıyorum, divler de sürekli kaymalar oluyor ve buna engel olamıyorum.

  • Tarayıcılar css'i nasıl yorumluyor bilmiyorum

  • Css ve Css3 ile ilgili yeni teknolojiler neler?

  • Sitelerimi tüm cihazlara uyumlu hale nasıl getirebilirim?

  • Web sitem için nasıl animasyon oluşturabilirim?

  • Büyük websiteleri için sürdürülebilir css nasıl yazılır?

vb. sorularınız varsa doğru kurstasınız. Css'i yüzeysel bir şekilde anlatan, demode yöntemler kullanarak proje geliştiren kurslardan farklı olarak PROJELERLE İLERİ CSS TEKNİKLERİ VE FLEXBOX | 2021 kursu 30+ saat kapsamı ve zengin içeriğiyle sizlere çok şey katacak. Bu kursla birlikte; aklınızda ki Css ile ilgili tüm sorulara cevap verecek, modern teknik ve yöntemleri öğrenerek css bilginizi İLERİ SEVİYEYE taşıyacaksınız. Kurs boyunca Css ile ilgili çok fazla teorik bilgiler öğrenecek ve bu bilgilerin hemen hemen hepsini uygulamalarla beraber pratiğe dönüştüreceksiniz.

Peki kurs boyunca neler öğreneceksiniz:

  1. Css geliştiricilerin sürekli karşı karşıya kaldıkları hizalama sorunlarını ortadan kaldırmak ve esnek web sayfaları oluşturmak için en çok tercih edilen layout yöntemi olan FLEXBOX'ı en ince ayrıntısına kadar örneklerle beraber öğreneceğiz. Bölüm sonunda  flexbox kullanarak website layout ve sing-up page sayfası oluşturacağız.


  2. Css'in arka planda nasıl çalıştığını öğreneceğiz. Tarayıcılarımız css'i nasıl yorumlar, cascading, value processing, İnheritance, visual formatting model, positioning and flow gibi konulara değineceğiz


  3. Sitemizi bilgisayarlar, tabletler ve telefonlara uyumlu hale getirebilmek için Responsive Design öğreneceğiz. Flexiable layouts, Media queries, relative units, responsive Image, resolution switching, density switching, art direction gibi Responsive Design'ı ilgilendiren konuları uygulamalı şekilde öğreneceğiz.


  4. Yeniden kullanılabilir css yapıları nasıl oluşturulur, büyük projelerde sürdürülebilir css nasıl yazılır, css kodları nasıl genişletilebilir gibi soruların yanıtları için Moduler Css öğreneceğiz. BEM metadolojisi, css architecture konularını öğreneceğiz.


  5. En popüler css preprocessor olan SASS'ı detaylı şekilde öğreneceğiz: Sass'da yer alan variable, mixin, extend, function gibi kavramları öğreneceğiz.


  6. Transition ve animation konularını uygulamalı şekilde öğrenecek, kompleks animasyonlar geliştireceğiz.


  7. İleri css seçiciler, etkili css seçicileri yazma, pseudo class ve elemets, prefix kullanımı, SVG images, font seçimi gibi css de kafa karıştıran, yanlış bilinen ya da uygulanan konulara değineceğiz


  8. Ve son olarak kursun başından sonuna kadar gördüğümüz flexbox ,sass, modüler css, responsive design  ve daha bir çok tekniği kullanarak sürdürülebilir ve yeniden kullanılabilir css mimarisine sahip, geniş ekranlar, laptoplar, tabletler ve cep telefonları ile uyumlu kapsamlı bir websitesi geliştireceğiz. 

Bu kursun sonunda css' de kullandığınız her yapının ve  yazdığınız her bir satır kodun çalışma mantığını kavrayacak, modern css tekniklerini etkili şekilde kullanarak profesyonel web sayfaları geliştirme yolunda büyük bir adım atacaksınız.





Screenshots

Projelerle İleri Css ve Flexbox | 2021
Projelerle İleri Css ve Flexbox | 2021
Projelerle İleri Css ve Flexbox | 2021
Projelerle İleri Css ve Flexbox | 2021

Content

Flexbox Giriş

Css Layout Oluşturma Teknikleri

Flexbox nedir ?

Flexbox Çalışma Mantığı

Flexbox Tarayıcı Desteği

Tek Boyutluluk Nedir ?

display:flex

Flexbox Properties

Container Properties

Container Properties

flex-direciton

flex-direction uygulama

justify-content

justify-content uygulama

align-items

align-items uygulama

flex-wrap

flex-wrap uygulama

align-content

align-content uygulama

flex-flow

flex-flow uygulama

Item Properties

Item Properties

flex-grow

flex-grow uygulama

flex shrink

flex-shrink uygulama

flex-basis

flex-basis uygulama

flex

flex uygulama

order

order uygulama

align-self

align-self uygulama

Flexbox ile Layout Oluşturma

layout-giriş

layout-temel

layout-header

layout-left-side

layout-cards

layout-boxes

layout-images

Flexbox ile Sign-up Page Oluşturma

Sign-up Page Giriş

Visual Studio Code kurulumu

Sign-up Page analiz

Sign-up Page container

Sign-up Page left-side-1

Sign-up Page left-side-2

Sign-up Page right-side

Sign-up Page right-side-content

SVG nedir?

Sign-up Page 'de SVG kullanımı

Sign-up Page form-1

Sign-up Page form-2

Css Arkaplanda Nasıl Çalışır?

Css Terminolojisi

Tarayıcılar Css'i nasıl yorumlar?

Cascading nedir?

Value Processing

Inheritance (Miras)

Css Wide Keywords

Visual Formatting Model

Box Types

Positioning and Flow

Box Types Örnek

Float Örnek

Position Örnek

Stacking & Stacking Levels

Stacking Context

Stacking Context & z-index

Stacking Context Örnek

box-sizing : border-box

Responsive Design

Responsive Design nedir ?

Fixed, Fluit, Adaptive ve Responsive Kavramları

Flexiable Layouts

Flexiable Layouts Örnek

Flexbox ile Flexiable Layouts

Relative Units

Relative Units Uygulama

Media Queries

Media Queries Uygulama

Media Queries Uygulama-2

Media Queries Uygulama-3

Media Query'ler de Mantıksal Operatörler

Mantıksal Operatörler Uygulama

Media Query ve Font-based Unitlerin Beraber Kullanımı

Responsive Image

Same Size

Same Size Uygulama

Different Size

Art Direction

Dekstop First - Mobil First

Viewport Meta Tagı

Modüler Css

Modüler Css nedir?

Modüler Css yazmak için nelere ihtiyacımız var ?

Block - Element - Modifier (BEM)

BEM örnek-1

BEM örnek-2

Dosya-Klasör Mimarisi

Css Prepocessors

Sass

Sass nedir?

Sass Syntax

Variable

Variables-2

Nesting

Extend-1

Extend-2

Mixin

Operators

if-else Condition

Interpolation

Loops (for, each, while)

Function

İleri Css Seçiciler Yazma & Pseudo Classes & Pseudo Elements

Basic & Combinators Selectors

Pseudo Classes

Pseudo Elements

İleri Css Seçiciler & Pseudo Classes and Elements Örnek

Etkili Css Seçicileri Yazma -1

Etkili Css Seçicileri Yazma -2

Transitions & Animations

Transition & Animation nedir?

transition-property & transition-duration & transition

transition-delay & transition-timing-function

transform-1

transform-2

transform-origin

transtion & transform

Card Uygulaması-1

Card Uygulaması-2

Card Uygulaması-3

Card Uygulaması-4

Card Uygulaması-5

Card Uygulaması-6

perspective

translateZ & transform-style

backface-visibility

Card-7

Animation-1

Animation-2

Animation-3

Animation-4

Mercansoft Web Sitesi

Proje Giriş

Proje Temel

Header Html

Header Css

Nodejs Kurulumu

Npm ve Node-sass Kurulumu

7-1 Sass Architecture Uygulama

Button

Social Nav

Navigation devam

Section Info-1

Section Info-2

Section Feature-1

Section Features-2

Section Workflow-1

Section Workflow-2

Section Counter-1

Section Counter-2

Section Card-1

Section Card-2

Section Card-3

Section Idea

Section Comment-1

Section Comment-2

Prefix nedir?

Footer-1

Footer-2

Footer-3

Contactus-1

Contactus-2

Responsive Giriş

Navigation Responsive Yapımı

Nav-button

Nav-button Animation

Nav-bottom Animation

Header Responsive Yapımı

Section Info Responsive Yapımı

Footer Responsive Yapımı

Section Features Responsive Yapımı

Section Workflow Responsive Yapımı

Section Counter Responsive Yapımı

Section Cards Responsive Yapımı

Section Idea Responsive Yapımı

Section Comment Responsive Yapımı

Contactus Responsive Yapımı

Geniş Ekranlar için Responsive Yapımı

Animation Section Info

Son Düzenlemeler-1

Son Düzenlemeler-2


Reviews

O
Okan17 August 2021

Hocanın anlatımı olsun, konuların üstünde durması olsun gayet güzel. Yeteri kadar uygulama yaparak konunun pekişmesini sağlıyor ama hocam bazı videolarınızdaki ses kalitesi gerçekten çok kötü. Kulaklık takmadan duymak gerçekten zor oluyor bazen. Bunun dışında beni tatmin eden bir kurs oldu umarım yeni kurslar oluşturursunuz ve ses sorununu halledersiniz.

M
Mentor14 August 2021

İlk 7 dersi izledim ve düşündüm ki, şimdilik 4 puan vereyim. 4-den aşağı puan vermek vicdansızlık olur. Kursun sonunda css ile ilgili sorunlarım çözülürse 5 yıldız yapacağım puanı. Teşekkürler hocam! Edit : Specifity-ni bu kursdan iyi anlatan göremedim! Teşekkürler, hocam. Bir hocaya nasıl iyi öğretilir sorusunun cevapı bu kursda) Azerbaycandan büyük sevgiler. 5 yıldız verdim, sen bunu 10 yıldız olarak düşün artık)

O
Oğuzhan19 July 2021

Kurs benim için çok faydalıydı. Henüz kursun an itibari ile yarısına geldim sayılır. Temel css bilgisine sahiptim, flexbox hakkında pek bilgim yoktu ama bu kurs sayesinde baya bilgilendiğimi düşünüyorum. Ayrıca bildiğimi sandığım ama bilmediğim birçok şey de mevcutmuş. Ben gayet memnun kaldım yani yorumlarda bazı arkadaşlar beğenmemişler ama hocam güzel güzel anlatmış. (Temel css bilgisine sahip olmanız önemli, hocanın anlattıklarını daha hızlı kavrayabiliyorsunuz doğal olarak) Hocamın emeklerine de teşekkürlerimi sunuyorum..

E
Eren21 June 2021

Hocamızın, anlattıkları çok güzel ve değerli ancak sadece değerli olması yetmiyor. Kendisi en başta sorularıma cevap verdi ancak sonrasında cevap beklemekten yoruldum. Videolarda, iler ki konularda bahsedeceğim dediği şeyleri bir türlü bulamadım. kendisine soruyorum söylüyor ancak öyle bir ders yok eğitimde. bulamadım yardım edin diyorum cevap yok. Anlatım karmaşık, diksiyon çok duraksıyor. Kendisi bilgili ancak bunu iyi aktaramıyor. Yeni ve daha iyi eğitimlerinizde görüşmek üzere

M
Mirey30 May 2021

Great Class, Thank you so much for the informations , each info has helped me develope my skills as it was a big problem for me not to know and master flexbox and just because of that, i was forced to use ready helpers like bootstrap ------- Hocam, verilen bilgiler için çok teşekkür ederim, bilgilerin her biri diğerinden değerlidir. Flexbox'u iyi bilmediğimden , projelerimde Bootstrap gibi hazır yardımcı ortamlar kullanmak zorunda kalıyordum, ama şimdi eksiklerimi geliştirmiş oldum verdiğiniz bilgiler sayesinde. Emeğinize sağlık !!

İ
İSMAİ9 April 2021

Ben genellikle kursun yüzde 30unu tamamlamadan puan vermem yorum yazmam ama bu kursun sadece yedi dersini izledim ve beş yıldız verdim, aşırı tavsiye ederim, flexbox konusunu çok iyi anlatıyor hocam, kursta ilerledikçe yorumumu güncelleyeceğim, kurs sadece flexboxtan ibaret değil, en az bir o kadar önemli olan responsive tasarımda var

A
Ahmet21 January 2021

Çok açık ve sade bir anlatım olmuş. Gayet güzel ve anlaşılır olmuş. Kursu aldığıma kesinlikle pişman olmadım. Teşekkürler

İ
İsmai̇l20 January 2021

Kurs hocası gerçekten konuya hakim ve css ince ayrıntılarına kadar anlaşılır bir şekilde anlatıyor. CSS hakkında ileri düzey bilgi ve tecrübe sahibi olmak isteyenlere şiddetle tavsiye ederim. Teşekür ediyorum. Emeğinize sağlık.

C
Can18 January 2021

Henüz inceleme imkanım olmadı ama kolay bir şekilde yükledim. İyi gibi görünüyor. Kullandıkça daha net yorum yapabileceğim.


2805347

Udemy ID

2/9/2020

Course created date

1/16/2021

Course Indexed date
Bot
Course Submitted by