Skip to content

Commit f4cfccb

Browse files
Vishal-raj-1Vishal-raj-1
committed
Add Course Curriculum
1 parent f3f76a7 commit f4cfccb

File tree

4 files changed

+427
-0
lines changed

4 files changed

+427
-0
lines changed

‎Course Curriculum/CSS/README.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# Let's Dive Into CSS 🎨💻
2+
3+
In this tutorial, you’ll learn:
4+
5+
👋 Introduction to CSS methods & precedence.
6+
🖋️ Understanding CSS syntax, selectors, and values.
7+
🎯 CSS selectors and specificity for styling.
8+
🆒 Working with CSS fonts for size, family, and style.
9+
🌈 Using CSS colors effectively for visual interest and readability.
10+
🎨 Creating backgrounds and gradients with CSS.
11+
🔲 Creating borders and shapes, like triangles and circles with CSS.
12+
📦 Understanding the CSS box model for element layout.
13+
📝 Formatting CSS text with properties.
14+
🔗 Creating CSS links and customizing appearance.
15+
🖼️ Changing element rendering with CSS display property.
16+
📐 Positioning elements with CSS, using absolute, relative, fixed, and sticky positioning.
17+
18+
### Watch Now
19+
20+
[https://www.youtube.com/watch?v=Qu0dbQxm6II&list=PLSH9gf0XETou_b8C3SJm8rk69Z41eUgbQ](https://www.youtube.com/watch?v=Qu0dbQxm6II&list=PLSH9gf0XETou_b8C3SJm8rk69Z41eUgbQ)
21+
22+
We hope that you found the tutorial video helpful in understanding the basic concepts of CSS, You can refer this notes 📝 for quick revision.
23+
24+
### 📝 Notes:
25+
26+
[CSS CheatSheet](https://www.notion.so/CSS-CheatSheet-dd999a7ecc094e279adc15092b0cfacb)
27+
28+
### 📌🔨 **Task:**
29+
30+
- You need to design all the assignments you have solved so far using CSS.
31+
- Apply your knowledge of CSS syntax, selectors, box model, layout, typography, colors, and backgrounds to the design.
32+
- Use at least two different fonts and two different colors to create a visually appealing design.
33+
- You should also use one background gradient to add depth and texture to your design.
34+
- Feel free to use other CSS properties you have learned to enhance the design and make it unique
35+
36+
**Don’t worry about responsive design, we will implement responsive design after learning flexbox and grid.**
37+
38+
# Learn CSS Flexbox Like a Pro
39+
40+
In this tutorial, you’ll learn:
41+
👋 Introduction to CSS Flexbox
42+
📐 CSS Flexbox Basics
43+
👉 Understanding the Display Property
44+
🔀 Using the Flex-Direction Property
45+
🌯 Controlling Flex Items with Flex-Wrap Property
46+
🌀 Combining Flex-Direction and Flex-Wrap with Flex-Flow Property
47+
🤝 Aligning Items Horizontally with Justify-Content Property
48+
👥 Aligning Items Vertically with Align-Items Property
49+
🌇 Aligning Multiple Lines with Align-Content Property
50+
🔲 Adding Space Between Elements with Gap Property
51+
🔢 Modifying the Order of Elements with Order Property
52+
📈 Expanding Elements with Flex-Grow Property
53+
📉 Shrinking Elements with Flex-Shrink Property
54+
📏 Setting the Default Size of Elements with Flex-Basis Property
55+
💪 Combining Flex-Grow, Flex-Shrink, and Flex-Basis with Flex Property
56+
🙋 Aligning Individual Elements with Align-Self Property
57+
58+
### Watch Now
59+
60+
[https://www.youtube.com/watch?v=3nLglJtUHjA&list=PLSH9gf0XETou_b8C3SJm8rk69Z41eUgbQ&index=4&ab_channel=VishalRajput](https://www.youtube.com/watch?v=3nLglJtUHjA&list=PLSH9gf0XETou_b8C3SJm8rk69Z41eUgbQ&index=4&ab_channel=VishalRajput)
61+
62+
We hope that you found the tutorial video helpful in understanding the basic concepts of Flexbox, You can refer this notes 📝 for quick revision.
63+
64+
### 📝 Notes:
65+
66+
[CSS Flexbox CheatSheet](https://www.notion.so/CSS-Flexbox-CheatSheet-44b703fb87064fad9fc7857c6f70e136)
67+
68+
### 📌🔨 **Task:**
69+
70+
1. Now, you have all required knowledge to completely design the assignment you solved earlier.
71+
2. Create your portfolio, it should contain all section and it’s should be responsive. You can inspiration from this portfolio.
72+
73+
[pporta - Made with Clipchamp (1).mp4](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f8f55fe0-fe58-4a1b-b26d-99f13f7f1efe/pporta_-_Made_with_Clipchamp_(1).mp4)
74+
75+
📣 **It's time to showcase your portfolio! Share it on LinkedIn and Twitter, tag me, and use #FrontendWithVishal to connect with other developers and get feedback on your work**.**.**
76+
77+
# Watch Tutorial video on CSS Grid:
78+
79+
In this tutorial, you’ll learn:
80+
81+
👋 Introduction to CSS Grid and its comparison with Flexbox.
82+
🖥️ Coding Introduction to create a Grid layout.
83+
🔲 Understanding the display property and grid-template-columns and rows for defining the grid structure.
84+
🔁 Repeat keyword for defining a pattern of columns or rows.
85+
💻 justify-items, justify-content, align-items, and align-content for alignment of items on the grid.
86+
🌉 row-gap, column-gap, and gap property for adding space between rows and columns.
87+
📏 grid-column-start, grid-column-end, grid-row-start, grid-row-end, and grid-area for defining grid lines and grid areas.
88+
🖼️ Using grid-template-areas for a more visual way of defining grid areas.
89+
🎨 Enhancing layout design with additional CSS properties.
90+
91+
### Watch Now
92+
93+
[https://www.youtube.com/watch?v=ULp7wPJ-rzQ&list=PLSH9gf0XETou_b8C3SJm8rk69Z41eUgbQ&index=5&ab_channel=VishalRajput](https://www.youtube.com/watch?v=ULp7wPJ-rzQ&list=PLSH9gf0XETou_b8C3SJm8rk69Z41eUgbQ&index=5&ab_channel=VishalRajput)
94+
95+
We hope that you found the tutorial video helpful in understanding the basic concepts of CSS Grid, You can refer this notes 📝 for quick revision.
96+
97+
### 📝 Notes:
98+
99+
[CSS Grid CheatSheet](https://www.notion.so/CSS-Grid-CheatSheet-a5e9df2cbe804c098e9982c175f6b748)
100+
101+
### 📌🔨 **Task:**
102+
103+
🎉👨‍💻 Encourage to create beautiful layouts using CSS Grid like below and share on social media.
104+
105+
![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0ec248ed-afa5-4c70-9e8f-345b949ef532/Untitled.png)
106+
107+
**Try to complete this assignment by yourself. If you want to learn more about css grid you can refer this blog.**
108+
109+
[Learn CSS Grid by Building 5 Layouts in 17 minutes](https://www.freecodecamp.org/news/learn-css-grid-by-building-5-layouts/)
110+
111+
### Read more about media queries for responsive design:
112+
113+
[CSS Media Queries](https://www.w3schools.com/css/css3_mediaqueries.asp)
114+
115+
**📣👨‍💻Attention Students!👩‍💻📣**
116+
117+
Congratulations on completing the CSS, CSS Flexbox, and CSS Grid tutorials! Now it's time to level up your skills and learn about Git and Github. These tools are essential for version control and collaboration in web development

‎Course Curriculum/Git & GitHub/README.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Introduction to Git & GitHub 🎬
2+
3+
In this tutorial, you’ll learn:
4+
5+
👋 Introduction to Git and GitHub and their importance in version control for developers.
6+
💻 Understanding the basics of Git and how it works with repositories, branches, and commits.
7+
📥 Downloading Git and Git Bash and initializing a repository with git init.
8+
🔍 Checking the status of your repository and using the working directory, staging area, and repository in Git.
9+
📝 Adding files to the staging area with git add and committing changes with git commit.
10+
📜 Viewing the commit history with git log and configuring user information with git config.
11+
🔄 Resetting changes with git reset and restoring files with git restore.
12+
🌐 Creating a repository on GitHub and adding a remote with git remote.
13+
📤 Pushing changes to GitHub with git push and pulling changes with git pull.
14+
👨‍💻 Contributing to open-source projects by forking a repository, cloning it with git clone, and raising a pull request on GitHub.
15+
👀 Reviewing pull requests on GitHub and next steps for improving Git and GitHub skills.
16+
17+
[https://youtu.be/ng_3YZHnz8U](https://youtu.be/ng_3YZHnz8U)
18+
19+
### 📝 Notes:
20+
21+
[Git CheatSheet](https://www.notion.so/Git-CheatSheet-5f456fe3db924771bf83414017f50c57)
22+
23+
[GitHub CheatSheet](https://www.notion.so/GitHub-CheatSheet-2319242c12764d5fb7f1f9c48a9c6d62)
24+
25+
### **📌🔨 Task:**
26+
27+
1. 📂 Create a repository named **Frontend Developer Essential,** and upload all your completed and upcoming assignments there.
28+
2. 📣 Share your **GitHub profile** on LinkedIn and Twitter using **#FrontendWithVishal**, and mention me to get feedback on your work.
29+
3. 🆕 Moving forward, create a new repository for each project we will build.
30+
4. 🌐 **Host the Portfolio** on GitHub **** you built after the CSS Flexbox video and share it on LinkedIn and Twitter using **#FrontendWithVishal**, and mention me to get feedback on your work.

‎Course Curriculum/HTML/README.md‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# Let's Learn HTML! 📝👨‍💻
2+
3+
In this tutorial video, you will learn:
4+
5+
📝 Introduction to HTML
6+
🔧 Setting up the HTML boilerplate
7+
📌 Adding a title to an HTML page
8+
🚀 Using the Live Server extension
9+
📚 HTML heading tags
10+
📖 HTML paragraph tag
11+
↩️ Adding line breaks and horizontal lines in HTML
12+
🎨 HTML elements and tags
13+
💪 Formatting text in HTML using bold and italic tags
14+
🔗 Creating links (anchor tags) in HTML
15+
📝 Creating lists in HTML, including unordered and ordered lists
16+
📊 Creating tables in HTML
17+
📝 Creating forms in HTML, including text inputs, labels, checkboxes, radio buttons, date inputs, number inputs, color inputs, file inputs, and submit/reset buttons
18+
🖼️ Adding images to an HTML page
19+
📺 Embedding YouTube videos and other web pages using the iframe tag
20+
🎧 Adding audio and video to an HTML page
21+
🌐 Introduction to HTML semantic tags
22+
📝 HTML assignment to practice the concepts learned in the tutorial video.
23+
24+
By the end of this tutorial, you will have a basic understanding of HTML and will be able to create simple web pages and forms. 🙌
25+
26+
### Watch Now
27+
28+
[https://youtu.be/EOwWXNBKtBM](https://youtu.be/EOwWXNBKtBM)
29+
30+
We hope that you found the tutorial video helpful in understanding the basic concepts of HTML, You can refer this notes 📝 for quick revision.
31+
32+
### 📝Notes:
33+
34+
[HTML CheatSheat](https://www.notion.so/HTML-CheatSheat-b37807acb74e4bf3a30dc91a79a94ae3)
35+
36+
### 📌🔨 **Task:**
37+
38+
- Follow along with the video and learn about HTML basics such as elements, tags, and the structure of an HTML page.
39+
- Practice using HTML tags such as headings, paragraphs, lists, tables, forms, and multimedia.
40+
- Get familiar with semantic tags that help to make the HTML code more meaningful and easier to understand.
41+
42+
# ⚒️Assignments for Practice
43+
44+
👨‍💻📝 Now that you have completed the HTML tutorial video and reviewed the HTML cheatsheet, it's time to put your knowledge into practice by completing the HTML assignments. 🚀
45+
46+
[https://youtu.be/OS1TZKl9IP4](https://youtu.be/OS1TZKl9IP4)
47+
48+
[HTML List Assignment](https://www.notion.so/HTML-List-Assignment-a73e04fdd5304a5a86cac874a62f39ca)
49+
50+
[Price Details Table](https://www.notion.so/Price-Details-Table-cb3ddd3a478d47b8a63f9557985e1fc2)
51+
52+
[Registeration Form Assignment](https://www.notion.so/Registeration-Form-Assignment-ae891d5389724fe3a381f5665d8c6e30)
53+
54+
[Portfolio](https://www.notion.so/Portfolio-bff9dbf3b31a4178a3747294bc3ee4fa)
55+
56+
🚀 Don't forget to share your learning and assignments on LinkedIn and Twitter using **#FrontendWithVishal** to showcase your skills to potential employers!
57+
📝 After completing each assignment, you'll need to **update the Google Sheet** to show your progress in the course (Link of the google sheet will be available on WhatsApp group)
58+
59+
👏 Congratulations on completing the HTML tutorial video and assignments! 🎉👨‍💻📝
60+
61+
Now, it's time to move on to the next module of the Frontend Developer Essential Course: CSS. In this module, you will learn how to style your HTML pages and make them look more visually appealing. We're excited to continue this journey with you! 💪🎓

0 commit comments

Comments
 (0)