Skip to content

Commit 4a5b85b

Browse files
tommygonzalezatommygonzaleza
committed
First commit
0 parents  commit 4a5b85b

File tree

22 files changed

+739
-0
lines changed

22 files changed

+739
-0
lines changed

‎.github/workflows/learnpack-audit.yml

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
2+
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
3+
4+
name: Learnpack audit
5+
6+
on:
7+
push:
8+
branches: [ main ]
9+
pull_request:
10+
branches: [ main ]
11+
12+
jobs:
13+
build:
14+
15+
runs-on: ubuntu-latest
16+
17+
strategy:
18+
matrix:
19+
node-version: [20.x]
20+
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
21+
22+
steps:
23+
- uses: actions/checkout@v2
24+
- name: Use Node.js ${{ matrix.node-version }}
25+
uses: actions/setup-node@v2
26+
with:
27+
node-version: ${{ matrix.node-version }}
28+
- run: npm install @learnpack/learnpack@latest -g
29+
- run: learnpack audit --strict

‎.gitignore

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# configuration and readme
2+
!.gitignore
3+
!.gitpod.yml
4+
!.gitpod.Dockerfile
5+
!learn.json
6+
!README.md
7+
8+
# exercises
9+
!.learn/
10+
!.learn/*
11+
.learn/_app
12+
.learn/.session
13+
.learn/dist
14+
.learn/app.tar.gz
15+
.learn/config.json
16+
17+
# python compiled files
18+
*.pyc
19+
__pycache__/
20+
.pytest_cache/

‎.learn/assets/.gitkeep

Whitespace-only changes.

‎.learn/resets/01.1-applying-tailwind-in-react-components/app.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// src/components/StyledButton.js
2+
3+
// Step 1: Import React
4+
import React from 'react';
5+
6+
// Step 2: Define the StyledButton component
7+
const StyledButton = () => {
8+
// Step 3: Return a button element
9+
return (
10+
<button className="">
11+
{/* Add Tailwind CSS classes here */}
12+
Click Me
13+
14+
</button>
15+
);
16+
};
17+
18+
// Step 4: Export the component
19+
export default StyledButton;
20+
21+
// Instructions:
22+
// 1. Add Tailwind CSS classes to the button element to style it.
23+
// 2. Example classes: bg-blue-500, text-white, py-2, px-4, hover:bg-blue-700.
24+
// 3. Import and render this component in your App.js file.

‎.learn/sidebar.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"00.0-welcome": {
3+
"us": "00.0-welcome"
4+
},
5+
"01.0-introduction-to-tailwind-css": {
6+
"us": "01.0-introduction-to-tailwind-css"
7+
},
8+
"01.1-applying-tailwind-in-react-components": {
9+
"us": "01.1-applying-tailwind-in-react-components"
10+
},
11+
"01.2-responsive-design-with-tailwind": {
12+
"us": "01.2-responsive-design-with-tailwind"
13+
},
14+
"01.3-customizing-tailwind-styles": {
15+
"us": "01.3-customizing-tailwind-styles"
16+
},
17+
"01.4-advanced-tailwind-techniques": {
18+
"us": "01.4-advanced-tailwind-techniques"
19+
},
20+
"01.5-quiz-test-your-tailwind-knowledge": {
21+
"us": "01.5-quiz-test-your-tailwind-knowledge"
22+
}
23+
}

‎.learn/vscode_queue.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
[{"name":"initializing","time":1804097503.541},{"name":"configuration_loaded","time":1804102726.708},{"name":"start_exercise","time":1804500093.041,"data":"00.0-welcome"},{"name":"start_exercise","time":1803902862.666,"data":"01.0-introduction-to-tailwind-css"},{"name":"start_exercise","time":1804364955.666,"data":"01.1-applying-tailwind-in-react-components"},{"name":"open_window","time":1803764888.916,"data":"http://localhost:3000/preview"},{"name":"open_terminal","time":1803765289.958,"data":""},{"name":"connection_ended","time":1804491418.875}]

‎.vscode/schema.json

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
{
2+
"$schema": "http://json-schema.org/draft-07/schema#",
3+
"type": "object",
4+
"properties": {
5+
"language": {
6+
"type": "string",
7+
"enum": ["react", "auto", "html", "python", "node", "dom"]
8+
},
9+
"slug": {
10+
"type": "string"
11+
},
12+
"title": {
13+
"type": "object",
14+
"properties": {
15+
"us": {
16+
"type": "string"
17+
},
18+
"es": {
19+
"type": "string"
20+
}
21+
},
22+
"required": ["us"]
23+
},
24+
"repository": {
25+
"type": "string",
26+
"format": "uri"
27+
},
28+
"preview": {
29+
"type": "string",
30+
"format": "uri"
31+
},
32+
"description": {
33+
"type": "object",
34+
"properties": {
35+
"us": {
36+
"type": "string"
37+
},
38+
"es": {
39+
"type": "string"
40+
}
41+
},
42+
"required": ["us"]
43+
},
44+
"duration": {
45+
"type": "integer"
46+
},
47+
"projectType": {
48+
"type": "string",
49+
"enum": ["tutorial", "project"]
50+
},
51+
"difficulty": {
52+
"type": "string",
53+
"enum": ["easy","beginner", "medium", "hard"]
54+
},
55+
"videoSolutions": {
56+
"type": "boolean"
57+
},
58+
"bugsLink": {
59+
"type": "string",
60+
"format": "uri"
61+
},
62+
"grading": {
63+
"type": ["string", "null"],
64+
"enum": ["isolated", "incremental", null]
65+
},
66+
"editor": {
67+
"type": "object",
68+
"properties": {
69+
"version": {
70+
"type": "string"
71+
},
72+
"mode": {
73+
"type": "string",
74+
"enum": ["extension", "preview"]
75+
},
76+
"agent": {
77+
"type": "string",
78+
"enum": ["vscode", "os"]
79+
}
80+
},
81+
"required": ["version"]
82+
},
83+
"telemetry": {
84+
"type": "object",
85+
"properties": {
86+
"batch": {
87+
"type": "string",
88+
"format": "uri"
89+
}
90+
},
91+
"required": ["batch"]
92+
},
93+
"video": {
94+
"type": "object",
95+
"properties": {
96+
"intro": {
97+
"type": "object",
98+
"properties": {
99+
"us": {
100+
"type": "string",
101+
"format": "uri"
102+
},
103+
"es": {
104+
"type": "string",
105+
"format": "uri"
106+
}
107+
}
108+
}
109+
},
110+
"required": ["intro"]
111+
}
112+
},
113+
"required": [
114+
"slug",
115+
"title",
116+
"description",
117+
"duration",
118+
"difficulty",
119+
"grading"
120+
]
121+
}
122+

‎.vscode/settings.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"files.autoSave": "afterDelay",
3+
"files.autoSaveDelay": 700,
4+
"editor.minimap.enabled": false,
5+
"workbench.editorAssociations": {
6+
"*.md": "vscode.markdown.preview.editor"
7+
},
8+
"json.schemas": [
9+
{
10+
"fileMatch": ["learn.json"],
11+
"url": "./.vscode/schema.json"
12+
}
13+
]
14+
}

‎README.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!-- hide -->
2+
3+
# Styling with Tailwind in React
4+
> By [@yourusername](https://twitter.com/yourusername)
5+
<!-- endhide -->
6+
7+
<!-- In this overview add only bullets of the course sections -->
8+
Enhance your React applications with Tailwind CSS, a utility-first CSS framework that streamlines the styling process. In this course, you will:
9+
10+
1. Understand the fundamentals of Tailwind CSS and its utility-first approach.
11+
2. Learn how to apply Tailwind classes in React components.
12+
3. Create responsive designs that adapt to various screen sizes.
13+
4. Customize Tailwind's default styles to fit your project's needs.
14+
5. Explore advanced techniques, including pseudo-classes and animations.
15+
16+
This course is designed for developers who want to elevate their front-end skills and create visually appealing applications efficiently. Join us as we dive into the world of Tailwind CSS and React!
17+
18+
## Local Installation
19+
20+
To get started, clone the repository and follow the steps below:
21+
22+
1. Install LearnPack, the package manager for learning tutorials. Make sure you have Node.js version 14+:
23+
24+
```bash
25+
$ npm i @learnpack/learnpack -g
26+
```
27+
28+
2. Start the tutorial/exercises by running the following command at the same level where your `learn.json` file is located:
29+
30+
```bash
31+
$ learnpack start
32+
```
33+
34+
## Frequently Asked Questions (FAQ)
35+
36+
**Q: Do I need prior experience with React to take this course?**
37+
A: While some familiarity with React is helpful, the course is designed to guide you through the basics of integrating Tailwind CSS with React.
38+
39+
**Q: Can I use Tailwind CSS with other frameworks?**
40+
A: Yes! Tailwind CSS can be used with various frameworks, including Vue, Angular, and even plain HTML.
41+
42+
**Q: What if I encounter issues during the course?**
43+
A: Feel free to reach out for help or consult the [Tailwind CSS documentation](https://tailwindcss.com/docs) for additional resources.
44+
45+
Get ready to transform your React applications with Tailwind CSS! If you have questions or need further information, don't hesitate to [Ask Rigobot](https://4geeks.com/ask?query=tailwind-css). Happy coding! 🚀

‎exercises/00.0-welcome/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
---
2+
readingTime:
3+
minutes: 1.07
4+
words: 214
5+
fkglResult: 9.15
6+
---
7+
8+
# `00.0` Welcome
9+
10+
Welcome to **Styling with Tailwind in React**! 🎉
11+
12+
In this course, you will learn how to enhance your React applications using Tailwind CSS. Tailwind is a utility-first CSS framework that helps you style your applications quickly and easily. By the end of this course, you will be able to:
13+
14+
- **Understand Tailwind CSS**: Learn the basics of Tailwind and how its utility-first approach works.
15+
- **Apply Tailwind in React**: Discover how to effortlessly add Tailwind classes to your React components.
16+
- **Create Responsive Designs**: Use Tailwind's responsive utilities to build layouts that look great on all devices, including mobile phones.
17+
- **Customize Your Styles**: Find out how to modify and extend Tailwind's default styles to meet your project's specific needs.
18+
- **Explore Advanced Techniques**: Dive into advanced styling methods using Tailwind's features, such as pseudo-classes and animations.
19+
20+
This course is perfect for new front-end developers who are just starting to create components and pages in React. You will participate in practical coding exercises that provide hands-on experience, making your styling process faster and more efficient.
21+
22+
Get ready to transform your React applications with Tailwind CSS! If you want to learn more about Tailwind CSS, feel free to [Ask Rigobot for more information](https://4geeks.com/ask?query=what-is-tailwind-css).
23+
24+
Let's dive in and start styling with confidence! 🚀

0 commit comments

Comments
 (0)