Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/naufaldi/workshop-grid-code
https://github.com/naufaldi/workshop-grid-code
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/naufaldi/workshop-grid-code
- Owner: naufaldi
- Created: 2023-11-19T20:02:52.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2023-11-25T14:38:18.000Z (about 1 year ago)
- Last Synced: 2024-10-18T22:54:07.223Z (3 months ago)
- Language: JavaScript
- Size: 1.2 MB
- Stars: 0
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Next.js, TailwindCSS, and Shadcn/ui Workshop: Mastering Grid Layouts
Welcome to the "Mastering Grid Layouts" workshop! This workshop is designed to teach you how to effectively use Grid layouts in web development, utilizing the power of Next.js, TailwindCSS, and Shadcn/ui.
## Overview
In this workshop, we'll dive deep into creating responsive and modern web layouts using the Grid system. We'll start with the basics of Grid layouts, move on to advanced techniques, and see how to integrate these layouts seamlessly with Next.js and TailwindCSS, enhanced by Shadcn/ui components.
### What You'll Learn
- Basics of CSS Grid layouts.
- Advanced Grid techniques for complex designs.
## Prerequisites
- Basic knowledge of HTML & CSS.
- Familiarity with React and Next.js.
- Node.js and npm/yarn installed on your machine.
## Setup
1. **Clone the Repository:**
```bash
git clone https://github.com/naufaldi/workshop-grid-code
cd workshop-grid-code
```
2. **Install Dependencies:**
```bash
npm install
# or
yarn
```
3. **Run the Development Server:**
```bash
npm run dev
# or
yarn dev
```
Visit `http://localhost:3000` to view the project.
## Resources
- [Next.js Documentation](https://nextjs.org/docs)
- [TailwindCSS Grid Documentation](https://tailwindcss.com/docs/grid-template-columns)
- [Shadcn/ui GitHub Repository](https://github.com/shadcn/ui)
## Feedback and Contributions
Your feedback is valuable to us! Feel free to open an issue or submit a pull request to contribute to this workshop.
---
Happy Coding! 🚀