update README.md file

README.md

@@ -1 +1,41 @@
 # Learn `CSS Media Queries` Build 3 Project
+
+<!-- social media connecting shield -->
+
+[![Facebook][facebook-shield]][facebook-url]
+[![Instagram][instagram-shield]][instagram-url]
+[![Twitter][twitter-shield]][twitter-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+[![Github][github-shield]][github-url]
+
+Hello 👋, At this public ⛣ repository i will be build some little project for learning purpose `CSS Media Queries`. I hope that all are enjoy this repository and project. So that's connected with me for further update & explore something new. Thanks
+
+## Repository / Project Related Some `Article or Blog`
+
+- Learn CSS Media Queries - [👉 Click Here](https://www.freecodecamp.org/news/learn-css-media-queries-by-building-projects)
+- A Complete Guide To CSS Flexbox - [👉 Click Here](https://css-tricks.com/snippets/css/a-guide-to-flexbox)
+- A Complete Guide To CSS Grid - [👉 Click Here](https://css-tricks.com/snippets/css/complete-guide-grid)
+
+## Repository Resource & Project Live Preview
+
+|  #  | Resource / Projects                                                                                                                           | Live Preview                                                                                                         |
+| :-: | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| 01  | [Project-01 (SCREEN SIZE)](<https://github.com/SamiurRahmanMukul/CSS-Media-Queries-3-Project/tree/main/1_Project-01%20(SCREEN%20SIZE)>)       | [👉 Click Here](<https://samiurrahmanmukul.github.io/CSS-Media-Queries-3-Project/1_Project-01%20(SCREEN%20SIZE)>)    |
+| 02  | [Project-02 (PORTFOLIO SITE)](<https://github.com/SamiurRahmanMukul/CSS-Media-Queries-3-Project/tree/main/2_Project-02%20(PORTFOLIO%20SITE)>) | [👉 Click Here](<https://samiurrahmanmukul.github.io/CSS-Media-Queries-3-Project/2_Project-02%20(PORTFOLIO%20SITE)>) |
+| 03  | [Project-03 (MORE ITEMS)](<https://github.com/SamiurRahmanMukul/CSS-Media-Queries-3-Project/tree/main/3_Project-03%20(MORE%20ITEMS)>)         | [👉 Click Here](<https://samiurrahmanmukul.github.io/CSS-Media-Queries-3-Project/3_Project-03%20(MORE%20ITEMS)>)     |
+
+<!-- my social media links -->
+
+[facebook-url]: https://www.facebook.com/SamiurRahmanMukul
+[instagram-url]: https://www.instagram.com/samiur_rahman_mukul
+[twitter-url]: https://www.twitter.com/SamiurRahMukul
+[linkedin-url]: https://www.linkedin.com/in/SamiurRahmanMukul
+[github-url]: https://www.github.com/SamiurRahmanMukul
+
+<!-- shield icon links -->
+
+[facebook-shield]: https://img.shields.io/badge/-Facebook-black.svg?style=flat-square&logo=facebook&color=555&logoColor=white
+[instagram-shield]: https://img.shields.io/badge/-Instagram-black.svg?style=flat-square&logo=instagram&color=555&logoColor=white
+[twitter-shield]: https://img.shields.io/badge/-Twitter-black.svg?style=flat-square&logo=twitter&color=555&logoColor=white
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=flat-square&logo=linkedin&colorB=555
+[github-shield]: https://img.shields.io/badge/-Github-black.svg?style=flat-square&logo=github&color=555&logoColor=white