added icons in cheatsheet and curriculum

Vishal-raj-1 · Vishal-raj-1 · commit a90140264c28 · 2023-04-10T12:36:26.000+05:30
diff --git a/CheatSheets/CSS Flexbox-Cheatsheet.md b/CheatSheets/CSS Flexbox-Cheatsheet.md
@@ -1,3 +1,6 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/css.png" width="200px" />
+
+
 # CSS Flexbox CheatSheet
 
 ### Display Property
@@ -126,4 +129,4 @@
 
 ## Learn More about CSS Flexbox from here:
 
-[![Learn More about CSS Flexbox from here](http://img.youtube.com/vi/3nLglJtUHjA/0.jpg)](http://www.youtube.com/watch?v=3nLglJtUHjA "CSS Crash Course")
+[![Learn More about CSS Flexbox from here](http://img.youtube.com/vi/3nLglJtUHjA/0.jpg)](http://www.youtube.com/watch?v=3nLglJtUHjA)
diff --git a/CheatSheets/CSS Grid-CheatSheet.md b/CheatSheets/CSS Grid-CheatSheet.md
@@ -1,3 +1,5 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/css.png" width="200px" />
+
 # CSS Grid Cheatsheet
 ## 1. Grid container properties
 
@@ -136,4 +138,4 @@
 
 ## Learn More about CSS Grid from here:
 
-[![CSS Grid Tutorial for Beginners](https://i.ytimg.com/vi/ULp7wPJ-rzQ/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAF_KnaTkQYj55zEN0fDGX-74JVKQ)](https://www.youtube.com/watch?v=ULp7wPJ-rzQ&ab_channel=VishalRajput "CSS Grid Tutorial for Beginners")
+[![CSS Grid Tutorial for Beginners](https://i.ytimg.com/vi/ULp7wPJ-rzQ/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAF_KnaTkQYj55zEN0fDGX-74JVKQ)](https://www.youtube.com/watch?v=ULp7wPJ-rzQ&ab_channel=VishalRajput)
diff --git a/CheatSheets/CSS-CheatSheet.md b/CheatSheets/CSS-CheatSheet.md
@@ -1,3 +1,5 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/css.png" width="200px" />
+
 # CSS CheatSheet
 
 ## Adding CSS to HTML (3 methods & precedence)
@@ -336,4 +338,4 @@ div {
 # Learn More about CSS from here:
 
 
-[![CSS Crash Course](http://img.youtube.com/vi/Qu0dbQxm6II/0.jpg)](http://www.youtube.com/watch?v=Qu0dbQxm6II "CSS Crash Course")
+[![CSS Crash Course](http://img.youtube.com/vi/Qu0dbQxm6II/0.jpg)](http://www.youtube.com/watch?v=Qu0dbQxm6II)
diff --git a/CheatSheets/Git-Cheatsheet.md b/CheatSheets/Git-Cheatsheet.md
@@ -1,3 +1,5 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/git.png" width="200px" />
+
 # Git CheatSheet
 
 
@@ -28,4 +30,4 @@
 
 # Learn More about Github from here:
 
-[![Learn Git and GitHub from scratch](http://img.youtube.com/vi/ng_3YZHnz8U/0.jpg)](http://www.youtube.com/watch?v=ng_3YZHnz8U "Learn Git and GitHub from scratch")
+[![Learn Git and GitHub from scratch](http://img.youtube.com/vi/ng_3YZHnz8U/0.jpg)](http://www.youtube.com/watch?v=ng_3YZHnz8U)
diff --git a/CheatSheets/GitHub-Cheatsheet.md b/CheatSheets/GitHub-Cheatsheet.md
@@ -1,3 +1,5 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/github.png" width="200px" />
+
 # GitHub CheatSheet
 
 # **How to Contribute to an Open Source Project**
@@ -57,4 +59,4 @@ Remember, contributing to open source is a collaborative effort, and it's import
 
 # Learn More about GitHub from here:
 
-[![Learn Git and GitHub from scratch](http://img.youtube.com/vi/ng_3YZHnz8U/0.jpg)](http://www.youtube.com/watch?v=ng_3YZHnz8U "Learn Git and GitHub from scratch")
+[![Learn Git and GitHub from scratch](http://img.youtube.com/vi/ng_3YZHnz8U/0.jpg)](http://www.youtube.com/watch?v=ng_3YZHnz8U)
diff --git a/CheatSheets/HTML-CheatSheet.md b/CheatSheets/HTML-CheatSheet.md
@@ -1,3 +1,5 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/html.png" width="200px" />
+
 # HTML CheatSheet
 
 ## Basic Structure
@@ -190,4 +192,4 @@
 
 # Learn More about HTML from here:
 
-[![HTML Crash Course](http://img.youtube.com/vi/EOwWXNBKtBM/0.jpg)](http://www.youtube.com/watch?v=EOwWXNBKtBM "HTML Crash Course")
+[![HTML Crash Course](http://img.youtube.com/vi/EOwWXNBKtBM/0.jpg)](http://www.youtube.com/watch?v=EOwWXNBKtBM)
diff --git a/CheatSheets/JS-CheatSheet.md b/CheatSheets/JS-CheatSheet.md
@@ -1,3 +1,5 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/js.png" width="200px" />
+
 # JavaScript CheatSheet
 
 ### ****Adding JavaScript to a web page****
@@ -315,4 +317,4 @@ console.log(sum); // 6
 
 ## Learn More about JS from here:
 
-[![JavaScript Tutorial for Beginners](https://img.youtube.com/vi/9Shi7sbrHqY/sddefault.jpg)](https://www.youtube.com/watch?v=9Shi7sbrHqY&ab_channel=VishalRajput "JavaScript Tutorial for Beginners")
+[![JavaScript Tutorial for Beginners](https://img.youtube.com/vi/9Shi7sbrHqY/sddefault.jpg)](https://www.youtube.com/watch?v=9Shi7sbrHqY&ab_channel=VishalRajput)
diff --git a/CheatSheets/JavaScript DOM-Cheatsheet.md b/CheatSheets/JavaScript DOM-Cheatsheet.md
@@ -1,3 +1,5 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/js.png" width="200px" />
+
 # JavaScript DOM Cheatsheet
 
 ### What is DOM?
@@ -84,4 +86,4 @@ myButton.addEventListener("click", function() {
 
 
 ## Learn More about JavaScript DOM from here:
-[![JS DOM Tutorial for Beginners](https://i.ytimg.com/vi/85jzHRTVdsc/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDs_B6goLnSFqU6x2aesa56jJmg_Q)](https://www.youtube.com/watch?v=85jzHRTVdsc&t=5s&ab_channel=VishalRajput "JS DOM Tutorial for Beginners")
+[![JS DOM Tutorial for Beginners](https://i.ytimg.com/vi/85jzHRTVdsc/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDs_B6goLnSFqU6x2aesa56jJmg_Q)](https://www.youtube.com/watch?v=85jzHRTVdsc&t=5s&ab_channel=VishalRajput)
diff --git a/Course Curriculum/CSS.md b/Course Curriculum/CSS.md
@@ -1,3 +1,5 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/css.png" width="200px" />
+
 # Let's Dive Into CSS 🎨💻
 
 [![CSS Crash Course](http://img.youtube.com/vi/Qu0dbQxm6II/0.jpg)](http://www.youtube.com/watch?v=Qu0dbQxm6II)
@@ -17,11 +19,11 @@ In this tutorial, you’ll learn:
 - 🖼️ Changing element rendering with CSS display property.
 - 📐 Positioning elements with CSS, using absolute, relative, fixed, and sticky positioning.
 
-### 📝 Notes:
+# 📝 Notes:
 
 [CSS CheatSheet](https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/CheatSheets/CSS-CheatSheet.md)
 
-### 📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 - You need to design all the assignments you have solved so far using CSS.
 - Apply your knowledge of CSS syntax, selectors, box model, layout, typography, colors, and backgrounds to the design.
@@ -53,11 +55,11 @@ In this tutorial, you’ll learn:
 - 💪 Combining Flex-Grow, Flex-Shrink, and Flex-Basis with Flex Property
 - 🙋 Aligning Individual Elements with Align-Self Property
 
-### 📝 Notes:
+# 📝 Notes:
 
 [CSS Flexbox CheatSheet](https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/CheatSheets/CSS%20Flexbox-Cheatsheet.md)
 
-### 📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 1. Now, you have all required knowledge to completely design the assignment you solved earlier.
 2. Create your portfolio, it should contain all section and it’s should be responsive. You can inspiration from this portfolio.
@@ -81,11 +83,11 @@ In this tutorial, you’ll learn:
 - 🖼️ Using grid-template-areas for a more visual way of defining grid areas.
 - 🎨 Enhancing layout design with additional CSS properties.
 
-### 📝 Notes:
+# 📝 Notes:
 
 [CSS Grid CheatSheet](https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/CheatSheets/CSS%20Grid-CheatSheet.md)
 
-### 📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 🎉👨‍💻 Encourage to create beautiful layouts using CSS Grid like below and share on social media.
 
diff --git a/Course Curriculum/Git-GitHub.md b/Course Curriculum/Git-GitHub.md
@@ -1,3 +1,6 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/github.png" width="200px" />
+
+
 # Introduction to Git & GitHub 🎬
 
 [![Git & GitHub Crash Course](http://img.youtube.com/vi/ng_3YZHnz8U/0.jpg)](http://www.youtube.com/watch?v=ng_3YZHnz8U)
@@ -17,13 +20,13 @@ In this tutorial, you’ll learn:
 - 👀 Reviewing pull requests on GitHub and next steps for improving Git and GitHub skills.
 
 
-### 📝 Notes:
+# 📝 Notes:
 
 [Git CheatSheet](https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/CheatSheets/Git-Cheatsheet.md)
 
 [GitHub CheatSheet](https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/CheatSheets/GitHub-Cheatsheet.md)
 
-### **📌🔨 Task:**
+# **📌🔨 Task:**
 
 1. 📂 Create a repository named **Frontend Developer Essential,** and upload all your completed and upcoming assignments there.
 2. 📣 Share your **GitHub profile** on LinkedIn and Twitter using **#FrontendWithVishal**, and mention me to get feedback on your work.
diff --git a/Course Curriculum/HTML.md b/Course Curriculum/HTML.md
@@ -1,35 +1,54 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/html.png" width="200px" />
+
 # Let's Learn HTML! 📝👨‍💻
 
 [![HTML Crash Course](http://img.youtube.com/vi/EOwWXNBKtBM/0.jpg)](http://www.youtube.com/watch?v=EOwWXNBKtBM)
 
 In this tutorial video, you will learn:
 
-- 📝 Introduction to HTML
-- 🔧 Setting up the HTML boilerplate
-- 📌 Adding a title to an HTML page
-- 🚀 Using the Live Server extension
-- 📚 HTML heading tags
-- 📖 HTML paragraph tag
-- ↩️ Adding line breaks and horizontal lines in HTML
-- 🎨 HTML elements and tags
-- 💪 Formatting text in HTML using bold and italic tags
-- 🔗 Creating links (anchor tags) in HTML
-- 📝 Creating lists in HTML, including unordered and ordered lists
-- 📊 Creating tables in HTML
-- 📝 Creating forms in HTML, including text inputs, labels, checkboxes, radio buttons, date inputs, number inputs, color inputs, file inputs, and submit/reset buttons
-- 🖼️ Adding images to an HTML page
-- 📺 Embedding YouTube videos and other web pages using the iframe tag
-- 🎧 Adding audio and video to an HTML page
-- 🌐 Introduction to HTML semantic tags
-- 📝 HTML assignment to practice the concepts learned in the tutorial video.
+📝 Introduction to HTML
+
+🔧 Setting up the HTML boilerplate
+
+📌 Adding a title to an HTML page
+
+🚀 Using the Live Server extension
+
+📚 HTML heading tags
+
+📖 HTML paragraph tag
+
+↩️ Adding line breaks and horizontal lines in HTML
+
+🎨 HTML elements and tags
+
+💪 Formatting text in HTML using bold and italic tags
+
+🔗 Creating links (anchor tags) in HTML
+
+📝 Creating lists in HTML, including unordered and ordered lists
+
+📊 Creating tables in HTML
+
+📝 Creating forms in HTML, including text inputs, labels, checkboxes, radio buttons, date inputs, number inputs, color inputs, file inputs, and submit/reset buttons
+
+🖼️ Adding images to an HTML page
+
+📺 Embedding YouTube videos and other web pages using the iframe tag
+
+🎧 Adding audio and video to an HTML page
+
+🌐 Introduction to HTML semantic tags
+
+📝 HTML assignment to practice the concepts learned in the tutorial video.
 
 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. 🙌
 
-### 📝Notes:
+# 📝Notes:
 
 [HTML CheatSheat](https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/CheatSheets/HTML-CheatSheet.md)
 
-### 📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 - Follow along with the video and learn about HTML basics such as elements, tags, and the structure of an HTML page.
 - Practice using HTML tags such as headings, paragraphs, lists, tables, forms, and multimedia.
diff --git a/Course Curriculum/JavaScript.md b/Course Curriculum/JavaScript.md
@@ -1,3 +1,6 @@
+<img src="https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/Assets/Icons/js.png" width="200px" />
+
+
 # Mastering the JavaScript Language: From Basics to Advanced 🚀
 
 [![JavaScript Crash Course](http://img.youtube.com/vi/9Shi7sbrHqY/0.jpg)](http://www.youtube.com/watch?v=9Shi7sbrHqY)
@@ -28,13 +31,13 @@ In this tutorial, you’ll learn about programming aspect of JavaScript:
 - 🏹 Arrow functions
 - 🗜️ Map vs filter vs reduce
 
-### Notes:
+# 📝 Notes:
 
 [JavaScript CheatSheet](https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/CheatSheets/JS-CheatSheet.md)
 
 **👨‍💻📝 Now that you have completed the JavaScript tutorial video and reviewed the JavaScript cheat sheet, it's time to put your knowledge into practice by completing the JavaScript assignments. 🚀**
 
-📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 Complete JavaScript basics challenges from this website [https://www.jschallenger.com/javascript-practice](https://www.jschallenger.com/javascript-practice)
 
@@ -59,11 +62,11 @@ Complete JavaScript basics challenges from this website [https://www.jschallenge
 - 🎨 Changing style of HTML element using JavaScript
 - 📝 Task 2: Creating a Counter Program
 
-### Notes:
+# 📝 Notes:
 
 [JavaScript DOM Cheatsheet](https://github.com/Vishal-raj-1/Frontend-Development-Essentials/blob/main/CheatSheets/JavaScript%20DOM-Cheatsheet.md)
 
-### 📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 1. Complete JavaScript DOM challenges from this website: [JavaScript Dom Exercises](https://www.jschallenger.com/javascript-dom-exercises)
 2. As your initial mini project, create a simple miniature counter application with buttons for increasing, decreasing, and resetting the count, design it using CSS, and share it on LinkedIn or Twitter with the hashtag **#FrontendWithVishal**, I will provide you with feedback on the post.
@@ -91,7 +94,7 @@ In this tutorial, you will build your first fully working project. I have give s
 - 🗑️ Deleting Notes
 - 🔑 Essential Features You Should Implement
 
-### 📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 Add the following features to the Google Keep clone built in the previous tutorial:
 
@@ -139,7 +142,7 @@ Good luck with the assignment!
     ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/eb8c2549-03fb-4c86-9b36-c6b37e58ce84/Untitled.png)
     
 
-### 📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 1. Complete the project, make it responsive.
 2. Deploy your fully working frontend project on GitHub and host it. Share the project's link on LinkedIn and Twitter using the hashtag **#FrontendWithVishal** to showcase your skills and connect with the community
@@ -166,7 +169,7 @@ Good luck with the assignment!
     ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/905767e4-6c54-4586-b19d-01bf7e2a479e/Untitled.png)
     
 
-### 📌🔨 **Task:**
+# 📌🔨 **Task:**
 
 1. Add these filter on repos, repository should be sorted on the basis of these filters
 
diff --git a/README.md b/README.md
@@ -5,16 +5,30 @@
 
 ## Welcome to frontend developer essential course !!
 
-- 👨‍💻 In this batch, you'll learn the **basics of HTML, CSS, JavaScript, Git, and GitHub from scratch**.
-- 🎓 We provide you with everything you need to learn and excel in the Frontend Developer Essential Course!
-- 💻 You'll have access to **20+ assignments to practice what you learn, 10+ cheat sheets to revise and reinforce your knowledge, and 100+ questions to test your understanding**.
-- 📈 Plus, we have a leaderboard to track your progress and keep you motivated.
-- 🚀 And don't forget to share your projects and assignments on LinkedIn and Twitter using #FrontendWithVishal for at least 30 days to showcase your skills to potential employers!
-- 📝 After completing each assignment, you'll need to submit it for review by me.
-- 🔍 Once I've reviewed your work, 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)
-- 🙋‍♀️ If you need any help or have any questions related to the assignments or projects, our WhatsApp community is here to support you.
-- 🤝 Additionally, we'll have weekly sessions on resume building, personal branding, doubt clearing, and bringing in industry experts to provide you with the best learning experience.
-- 🌟 After completing this batch, you'll be promoted to batch 2 where we'll cover advanced topics in frontend development.
+👨‍💻 In this batch, you'll learn the **basics of HTML, CSS, JavaScript, Git, and GitHub from scratch**.
+
+🎓 We provide you with everything you need to learn and excel in the Frontend Developer Essential Course!
+
+💻 You'll have access to **20+ assignments to practice what you learn, 10+ cheat sheets to revise and reinforce your knowledge, and 
+100+ questions to test your understanding**.
+
+📈 Plus, we have a leaderboard to track your progress and keep you motivated.
+
+🚀 And don't forget to share your projects and assignments on LinkedIn and Twitter using #FrontendWithVishal for at least 30 days to 
+showcase your skills to potential employers!
+
+📝 After completing each assignment, you'll need to submit it for review by me.
+
+🔍 Once I've reviewed your work, 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)
+
+🙋‍♀️ If you need any help or have any questions related to the assignments or projects, our WhatsApp community is here to support you.
+
+🤝 Additionally, we'll have weekly sessions on resume building, personal branding, doubt clearing, and bringing in industry experts 
+to provide you with the best learning experience.
+
+🌟 After completing this batch, you'll be promoted to batch 2 where we'll cover advanced topics in frontend development.
+
 
 ## Want to Join Free Mentorship?
 
