{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/myWebDevelopmentJourney","result":{"data":{"blog":{"frontmatter":{"title":"MY WEB DEVELOPMENT JOURNEY","thumbnail":"blog01","date":"August 02, 2020","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n<h4>Why I chose this path?</h4>\n<div class=\"m-2\">\n<p>\n    I knew the basics of HTML back in 2<sup>nd</sup> PUC\n    (intermediate degree) as it was a part of my syllabus. TBH, I\n    started learning JavaScript just for passing the time in\n    quarantine.\n</p>\n<p>\n    I was actually interested in Mobile App Development but as the\n    time passed I saw many youtube videos and read blogs about the\n    uses and importance of JavaScript in modern technology.\n</p>\n<p>\n    Later I got to know about something called REACT NATIVE which\n    is a cross platform language to develop mobile apps (both\n    Android & iOS) and this requires the knowledge of ReactJS(A\n    JavaScript Library).\n</p>\n<p>\n    This gave me a thought of why not learning Web Development by\n    choosing React library for Front-End, Node.JS(using ExpressJs)\n    for Back-End and then learn React Native for developing mobile\n    apps. Also I got to know about ElectronJs which is a\n    Javascript framework for developing Desktop Application.\n</p>\n<p>\n    Wah! As simple as it is 😃... You can develop a website or a\n    mobile app or a desktop app with single programming language\n    JAVASCRIPT using multiple frameworks and libraries of it.\n</p>\n<p>\n    So I decided to learn MERN (mongoDB, ExpressJs, ReactJs,\n    NodeJs) stack.\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n<h4>Front-End Development:</h4>\n<div class=\"m-2\">\n<p>\n    I nearly took 3 months (it was longer than expected due to\n    distractions from online classes and assignments) for revising\n    HTML topics, learning CSS basics along with Bootstrap,\n    Javascript and basic git commands.\n</p>\n<p>\n    In this period of time, I learnt JavaScript basics and few\n    intermediate topics like ES6+ features and started with\n    projects.\n</p>\n<p>\n    But how to start 🤷‍♂️? I watched youtube videos and copied the\n    code from the instructor. Yeah it was of no use for self\n    improvement 😏. That's why I started to play with the code\n    that I copied and made some changes to it.\n</p>\n<p>\n    From this I learnt to code a JS project on my own. That's when\n    I built my own projects- ToDo List, Expense Tracker , NAAC\n    Accreditation Assessment and other small projects like\n    TicTacToe, Simple Calculator, QR Code Generator, Color Flipper\n    and a Weather App(using DarkSky Api).\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n<h5>JavaScript Library:</h5>\n<div class=\"m-2\">\n<p>\n    It took 2 weeks for learning ReactJS by following 4\n    instructors from youtube and then started with projects.\n</p>\n<p>\n    Yep as expected, I started with youtube tutorials and then\n    coded on my own. I did few projects like Recipe App, Github\n    Jobs, YouTube Clone and Coronavirus Tracker (using respective\n    APIs) from youtube tutorials and now I was ready to code a\n    project on my own. At this time I did the same To Do List\n    project which I did with vanilla JS because I need to code and\n    develop the same projects in coming days with React Native.\n</p>\n<p>\n    After spending 2 weeks for developing these projects, I was\n    satisfied with the knowledge I gained from this and it was so\n    fun in learning ReactJs and playing with the code.\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n<h4>Back-End Technology:</h4>\n<div class=\"m-2\">\n<p>\n    It took me a week to learn the basics of NodeJS, ExpressJs and\n    MongoDb database. Yes, We need to learn all these together for\n    a better understanding of Back-End Dev. For me, at the\n    beginning everything was so confusing. Like the same syntax is\n    used in many ways. So I created my own cheat sheet and started\n    referring that whenever I feel like the work was clumsy.\n</p>\n<p>\n    I started doing simple projects like creating a REST API, URL\n    Shortener, Storing the form submitted from FrontEnd and many\n    more. Later I learnt doing advanced projects like Passport\n    Authentication with Google, using Google reCaptcha and Payment\n    Gateways.\n</p>\n<p>\n    All projects were completely using Back-End Technology. Now I\n    started integrating FrontEnd using ReactJs with Back-End Dev\n    and did few projects on my own such as Shopping Cart, Login\n    Templates, TodoList and BlogChord.\n</p>\n<p>\n    Well, It was a amazing journey so far but this isn't an end. I\n    still need to learn few technologies like web testing, web\n    security, web scraping and many more. I'll continue making\n    other projects which are there in my mind and never gonna stop\n    it 😃.\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n    <div class=\"m-2\">\n        <p class=\"text-muted\">\n            PS: All the youtube resources that I referred for learning\n            concepts and projects has been posted as separate blogs. Do check\n            them out✌.\n        </p>\n        <p>\n            <strong>Similar posts:</strong>\n            <a href=\"/blogs/myJourney-part2\">My Journey: Part-2(Post web dev journey)</a> | \n            <a href=\"/blogs/myJourney-part3\">My Journey: Part-3(Learning app development)</a>\n        </p>\n    </div>  \n</div>\n","html":"<div class=\"my-2 p-2\">\n<h4>Why I chose this path?</h4>\n<div class=\"m-2\">\n<p>\n    I knew the basics of HTML back in 2<sup>nd</sup> PUC\n    (intermediate degree) as it was a part of my syllabus. TBH, I\n    started learning JavaScript just for passing the time in\n    quarantine.\n</p>\n<p>\n    I was actually interested in Mobile App Development but as the\n    time passed I saw many youtube videos and read blogs about the\n    uses and importance of JavaScript in modern technology.\n</p>\n<p>\n    Later I got to know about something called REACT NATIVE which\n    is a cross platform language to develop mobile apps (both\n    Android & iOS) and this requires the knowledge of ReactJS(A\n    JavaScript Library).\n</p>\n<p>\n    This gave me a thought of why not learning Web Development by\n    choosing React library for Front-End, Node.JS(using ExpressJs)\n    for Back-End and then learn React Native for developing mobile\n    apps. Also I got to know about ElectronJs which is a\n    Javascript framework for developing Desktop Application.\n</p>\n<p>\n    Wah! As simple as it is 😃... You can develop a website or a\n    mobile app or a desktop app with single programming language\n    JAVASCRIPT using multiple frameworks and libraries of it.\n</p>\n<p>\n    So I decided to learn MERN (mongoDB, ExpressJs, ReactJs,\n    NodeJs) stack.\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n<h4>Front-End Development:</h4>\n<div class=\"m-2\">\n<p>\n    I nearly took 3 months (it was longer than expected due to\n    distractions from online classes and assignments) for revising\n    HTML topics, learning CSS basics along with Bootstrap,\n    Javascript and basic git commands.\n</p>\n<p>\n    In this period of time, I learnt JavaScript basics and few\n    intermediate topics like ES6+ features and started with\n    projects.\n</p>\n<p>\n    But how to start 🤷‍♂️? I watched youtube videos and copied the\n    code from the instructor. Yeah it was of no use for self\n    improvement 😏. That's why I started to play with the code\n    that I copied and made some changes to it.\n</p>\n<p>\n    From this I learnt to code a JS project on my own. That's when\n    I built my own projects- ToDo List, Expense Tracker , NAAC\n    Accreditation Assessment and other small projects like\n    TicTacToe, Simple Calculator, QR Code Generator, Color Flipper\n    and a Weather App(using DarkSky Api).\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n<h5>JavaScript Library:</h5>\n<div class=\"m-2\">\n<p>\n    It took 2 weeks for learning ReactJS by following 4\n    instructors from youtube and then started with projects.\n</p>\n<p>\n    Yep as expected, I started with youtube tutorials and then\n    coded on my own. I did few projects like Recipe App, Github\n    Jobs, YouTube Clone and Coronavirus Tracker (using respective\n    APIs) from youtube tutorials and now I was ready to code a\n    project on my own. At this time I did the same To Do List\n    project which I did with vanilla JS because I need to code and\n    develop the same projects in coming days with React Native.\n</p>\n<p>\n    After spending 2 weeks for developing these projects, I was\n    satisfied with the knowledge I gained from this and it was so\n    fun in learning ReactJs and playing with the code.\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n<h4>Back-End Technology:</h4>\n<div class=\"m-2\">\n<p>\n    It took me a week to learn the basics of NodeJS, ExpressJs and\n    MongoDb database. Yes, We need to learn all these together for\n    a better understanding of Back-End Dev. For me, at the\n    beginning everything was so confusing. Like the same syntax is\n    used in many ways. So I created my own cheat sheet and started\n    referring that whenever I feel like the work was clumsy.\n</p>\n<p>\n    I started doing simple projects like creating a REST API, URL\n    Shortener, Storing the form submitted from FrontEnd and many\n    more. Later I learnt doing advanced projects like Passport\n    Authentication with Google, using Google reCaptcha and Payment\n    Gateways.\n</p>\n<p>\n    All projects were completely using Back-End Technology. Now I\n    started integrating FrontEnd using ReactJs with Back-End Dev\n    and did few projects on my own such as Shopping Cart, Login\n    Templates, TodoList and BlogChord.\n</p>\n<p>\n    Well, It was a amazing journey so far but this isn't an end. I\n    still need to learn few technologies like web testing, web\n    security, web scraping and many more. I'll continue making\n    other projects which are there in my mind and never gonna stop\n    it 😃.\n</p>\n</div>\n</div>\n<div class=\"my-2 p-2\">\n    <div class=\"m-2\">\n        <p class=\"text-muted\">\n            PS: All the youtube resources that I referred for learning\n            concepts and projects has been posted as separate blogs. Do check\n            them out✌.\n        </p>\n        <p>\n            <strong>Similar posts:</strong>\n            <a href=\"/blogs/myJourney-part2\">My Journey: Part-2(Post web dev journey)</a> | \n            <a href=\"/blogs/myJourney-part3\">My Journey: Part-3(Learning app development)</a>\n        </p>\n    </div>  \n</div>"},"thumbnail":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M140%2082c0%209%200%2011%202%2011l1-5v-5l1%205%202%205%202-5%201-5v5c0%204%200%205%202%205l1-11c0-10%200-11-2-11s-3%202-3%206l-1%202-1-2c0-4-1-6-3-6s-2%201-2%2011m16-10l2%206%201%2010c0%204%200%205%202%205s2-1%202-5l1-11%201-5c-1-2-2-1-3%202l-1%204-1-3c0-3-4-6-4-3m31%200l-1%2010c0%209%201%2011%205%2011%203%200%204-3%204-11%200-9-4-14-8-10m12%208c0%2010%201%2013%205%2013%203%200%204-3%204-13%200-8%200-9-2-9-1%200-2%202-2%2010l-1%2010V81c0-8-1-10-2-10-2%200-2%201-2%209m14%202c0%209%200%2011%202%2011l1-5v-4l1%204c1%204%202%205%203%205%202%200%202-1%201-3V77c0-4-2-6-6-6-2%200-2%200-2%2011m13%200c0%209%200%2011%202%2011l1-5c0-6%201-5%203%201%200%203%201%204%202%204%202%200%202-1%202-11%200-9-1-10-2-10s-2%201-2%204v4l-1-4-3-5c-2%200-2%201-2%2011m15-11v22h4c2%200%203%200%203-2l-2-2-2-2c0-2%201-3%202-3l1-2-1-2-2-2c0-2%201-3%202-3l2-2c0-2-1-2-3-2h-4m11%202l1%207%202%209c0%203%200%204%202%204l1-4%202-10v-8l-3%203-1%204v-4c-1-3-4-4-4-1m-46%2048v5h5l6-2c5-5%201-9-7-9h-4v6'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/29fd5bf36ef811ca5f973ef779f2b78e/ee604/blog01.png","srcSet":"/static/29fd5bf36ef811ca5f973ef779f2b78e/69585/blog01.png 200w,\n/static/29fd5bf36ef811ca5f973ef779f2b78e/497c6/blog01.png 400w,\n/static/29fd5bf36ef811ca5f973ef779f2b78e/ee604/blog01.png 800w,\n/static/29fd5bf36ef811ca5f973ef779f2b78e/f3583/blog01.png 1200w,\n/static/29fd5bf36ef811ca5f973ef779f2b78e/5707d/blog01.png 1600w,\n/static/29fd5bf36ef811ca5f973ef779f2b78e/9ddc6/blog01.png 2240w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"myWebDevelopmentJourney","thumbnail":"thumbnails/blog01.png"}},"staticQueryHashes":["2987289216","63159454"]}