twitter ui practise 다운로드 - twitter ui practise 소스 코드 다운로드

twitter ui practise

AI 소스 코드

1.0.0

다운로드

트위터 UI 연습 클론

이 프로젝트의 목표는 다음 JS에 대해 배우는 것입니다. 저의 배경은 기본적인 JavaScript 지식을 가진 HTML 및 Tailwind CSS에 대한 경험을 가진 웹 디자이너입니다. 나는 Twitter 앱의 홈페이지 UI를 재현하려고 노력했다. 원래와는 거리가 멀고 많은 결함이 있다고 확신합니다. 제안이나 개선 사항이 있으시면 알려주십시오. 가장 중요한 것은 재미 있고 새로운 것을 배우는 것입니다.

Twitter-demo.mp4.mp4

시작하기

저장소를 복제 할 때

npm install
npm run dev

체크 아웃 스토리 북은 구성 요소를 분리하여 볼 수 있습니다

npm run storybook

문제

오른쪽 패널은 트위터와 동일한 동작을 따르지 않습니다. 스크롤하면 스크롤하면 고정되지만 바닥 글 링크를 볼 수 있어야합니다.

스택

다음 .js
테일 윈드 CSS
어근
스토리 북
Vercel

자원

내가 팔로우하고 복제품을 만들기 위해 저장소와 비디오를 확인했습니다.

Tru Narla
콜비 페이록
스티븐 테이
이 롭
플로렌 틴

저게 뭐에요?

package.json을 확인하면 몇 가지를 설명해 드리겠습니다.

클래스 분산 저자 : 버튼과 같은 것들에 대한 변형을 만들 수 있습니다. 디자이너라면 Figma의 구성 요소 변형과 같습니다.
클래스 이름 : Radix UI 구성 요소와 같은 구성 요소를 스타일링하는 경우 Tailwind CSS를 사용할 때는 긴 CSS 유틸리티 클래스를 가질 수 있습니다. 호버, 애니메이션, 반응 형, 레이아웃 및 기타 클래스가있을 수 있습니다. 이제 별도의 줄로 그룹화 할 수 있습니다.