diff --git a/README.md b/README.md index 0a72c74..5f7330f 100644 --- a/README.md +++ b/README.md @@ -1,48 +1,118 @@ # UI/UX Lab Roadmap -A roadmap for Design Lab +--- ## Web Development -##### Basics -- [HTML](https://www.w3schools.com/html/default.asp) -- [CSS](https://www.w3schools.com/css/default.asp) -##### Advanced -- [Javascript](https://www.w3schools.com/js/default.asp) (*Recommended*) -- [Python](https://www.w3schools.com/python/default.asp) (*Recommended*) -- [PHP](https://www.w3schools.com/php/default.asp) (*Optional*) -- [MySQL](https://www.w3schools.com/sql/default.asp) - -##### Some Useful Frameworks -- [Flask](https://www.tutorialspoint.com/flask/index.htm) (*Recommended*) -- [Node.JS](https://www.w3schools.com/nodejs/) (*Recommended*) -- [React](https://reactjs.org/tutorial/tutorial.html) (*Recommended*) -- [Bootstrap](https://www.w3schools.com/bootstrap4/default.asp) -- [jQuery](https://www.w3schools.com/jquery/default.asp) (*Optional*) + +### ๐Ÿ”ฐ Basics + +1. **HTML** + [Learn HTML](https://www.w3schools.com/html/default.asp) + **YouTube Video:** [Bro Code HTML](https://youtu.be/HD13eq_Pmp8?si=VegfRNJJgOUfsBc_) + +2. **CSS** + [Learn CSS](https://www.w3schools.com/css/default.asp) + **YouTube Video:** [Bro Code CSS](https://youtu.be/HGTJBPNC-Gw?si=_ZmOEk2w-ngNUVHw) + +--- + +### ๐Ÿš€ Advanced + +1. **JavaScript** + [Learn JavaScript](https://www.w3schools.com/js/default.asp) (*Recommended*) + **YouTube Videos:** + - [Bro Code JS](https://youtu.be/lfmg-EJ8gm4?si=Ek3iCQE87WL_LMQ9) + - [Free Code Camp JS](https://youtu.be/jS4aFq5-91M?si=uuIelu_mmzBbPs89) + +2. **Python** + [Learn Python](https://www.w3schools.com/python/default.asp) (*Recommended*) + **YouTube Videos:** + - [Free Code Camp Python Tutorials](https://youtu.be/rfscVS0vtbw?si=wt5gqK5xoeXRJRKE) + - [Chai aur Code Python Course](https://youtu.be/v9bOWjwdTlg?si=IYt29xdz3IxAIdWS) + +3. **PHP** + [Learn PHP](https://www.w3schools.com/php/default.asp) (*Optional*) + **YouTube Video:** [YouTube Video Here] + +4. **MySQL** + [Learn MySQL](https://www.w3schools.com/sql/default.asp) + **YouTube Video:** [YouTube Video Here] + +--- + +### ๐Ÿงฐ Some Useful Frameworks + +1. **Flask** + [Learn Flask](https://www.tutorialspoint.com/flask/index.htm) (*Recommended*) + **YouTube Videos:** + - [Free Code Camp Flask Tutorial](https://youtu.be/Qr4QMBUPxWo?si=XWaoPXWCxSJXQpUO) + - [Code With Harry](https://youtu.be/oA8brF3w5XQ?si=VbQ1XLWe2ulmWTWg) + +2. **Node.js** + [Learn Node.js](https://www.w3schools.com/nodejs/) (*Recommended*) + **YouTube Videos:** + - [Free Code Camp NodeJS Tutorial](https://youtu.be/Oe421EPjeBE?si=pbv5cE3kKspyOz1e) + - [Chai aur Code Complete Backend with Node](https://youtu.be/EH3vGeqeIAo?si=imo1FdLISm9JZtFo) + +3. **React** + [Learn React](https://reactjs.org/tutorial/tutorial.html) (*Recommended*) + **YouTube Videos:** + - [Free Code Camp ReactJS Tutorial](https://youtu.be/x4rFhThSX04?si=n90dITlrYqnIgavW) + - [HuXN WebDev ReactJS](https://youtu.be/qnwFpjIqsrA?si=2huA3ZjkuV3QKCDR) (*Advanced*) + - [Chai aur Code ReactJS](https://youtu.be/vz1RlUyrc3w?si=bMd6HRHBnwDDdJmk) + +4. **Bootstrap** + [Learn Bootstrap](https://www.w3schools.com/bootstrap4/default.asp) + **YouTube Video:** [YouTube Video Here] + +5. **jQuery** + [Learn jQuery](https://www.w3schools.com/jquery/default.asp) (*Optional*) + **YouTube Video:** [YouTube Video Here] + +--- ## APP Development -#### Languages +### ๐Ÿ› ๏ธ Languages + +1. **Dart - Flutter** + [Flutter Beginner Course](https://www.udemy.com/course/free-flutter-beginner-tutorial-build-own-app/) + **YouTube Video:** [YouTube Video Here] -- [Dart - Flutter](https://www.udemy.com/course/free-flutter-beginner-tutorial-build-own-app/) -- JAVA -- Kotlin +2. **JAVA** + **YouTube Video:** [YouTube Video Here] + +3. **Kotlin** + **YouTube Video:** [YouTube Video Here] + +--- ## Resources for UI Development -#### Softwares +### ๐Ÿง‘โ€๐ŸŽจ Softwares + +- [Figma](https://www.figma.com/) - [Adobe XD](https://www.adobe.com/in/products/xd.html) - [GIMP](https://www.gimp.org/downloads/) +- [Inkscape](https://inkscape.org/) + +### ๐ŸŒ Useful Websites -#### Useful Websites - [Lipsum](https://www.lipsum.com/) - [unDraw](https://undraw.co/) - [Unsplash](https://unsplash.com) - [UIFaces](https://uifaces.co/) +- [Awwwards](https://www.awwwards.com/) +- [Dribbble](https://dribbble.com/) + +--- + +**Some Useful Advice:** Try to explore all the options available to you. UI/UX alone wonโ€™t take you far. For example, if youโ€™re good at math, consider learning Machine Learning. +[Hereโ€™s the Roadmap of McCarthy Lab](https://github.com/NextTechLabAP/McCarthy-Lab-Roadmap) +**IMPORTANT:** Upload all your work to GitHub. GitHub is a must for the lab. -**Some Useful Advice:** Try to explore all the options available to you as I've told before UI/UX alone wont take you further. For example if you think you are good at math try to learn Machine Learning [Here's the Roadmap of McCarthy Lab](https://github.com/NextTechLabAP/McCarthy-Lab-Roadmap) +### ๐Ÿ™ Learn GitHub -**IMPORTANT:** Make sure you upload all your work to github. Github is a must for the lab. -#### Learn Github -- [Git](https://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1/) - Introduction -- [Github Desktop](https://desktop.github.com/) - Software +- [Git](https://readwrite.com/2013/09/30/understanding-github-a-journey-for-beginners-part-1/) - Introduction +- [GitHub Desktop](https://desktop.github.com/) - Software