{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/basicWebDevelopmentRoadmap","result":{"data":{"blog":{"frontmatter":{"title":"BASIC WEB DEVELOPMENT ROADMAP","thumbnail":"blog02","date":"August 05, 2020","dsaCppCodeFile":null},"excerpt":"<!-- [link](/blogs/post-three) -->\n\n<!-- <a href=\"/blogs/post-three\">Link</a> -->\n\n<!-- ![Firebase](./firebase.png) -->\n\n<div class=\"my-2 p-2\">\n    <h4>Introduction</h4>\n    <div class=\"m-2\">\n    <p>\n        <strong>What is Web Dev?</strong> <br />\n        Web Dev is the work involved in developing a website for the\n        internet. <br />\n        In general aspects there are two types of web dev - Frontend\n        and Backend Dev, but there is something called Fullstack which\n        is the combination of both Frontend and Backend Dev.\n    </p>\n    <ul class=\"m-3\">\n        <li><strong>Frontend Dev</strong></li>\n        <p>\n        It covers the work on everything that user can see on the\n        website and interact with the website. More creative minded\n        people tend to be Frontend Developers.\n        </p>\n        <li><strong>Backend Dev</strong></li>\n        <p>\n        It covers the work that user doesnt see which goes behind\n        the scenes of a website i.e take care of servers, API ,\n        incoming request and handling database. More logical\n        thinking people tend to be Backend Developers.\n        </p>\n        <li><strong>Fullstack Dev</strong></li>\n        <p>\n        It not just covers the work of both Frontend and Backend Dev\n        but also covers all the work to be done in Web dev such as\n        Planning, Analysis, Designing, Implementation, Testing &\n        Integration, Deployment and Manintainence of a website.\n        </p>\n    </ul>\n    <p>\n        To get started with Web Dev we need to download some tools &\n        technologies which are very essential. <br />\n        First thing is some sort of <strong>Web Browser</strong> such\n        as Google Chrome, Firefox or Safari. Second thing is a\n        <strong>Text Editor</strong> like Visual Studio Code Editor,\n        Sublime Text Editor or Atom. Last thing is need of\n        <strong>Version Control System</strong> such as Git.\n    </p>\n    <p>\n        Checkout the blog\n        <a href=\"/blogs/vcs-git&github\">VCS: Git & GitHub</a>\n        to know more about VCS.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>1.Frontend Technology- Getting started with HTML & CSS</h4>\n    <div class=\"m-2\">\n    <p>\n        Learn the basics of HTML (HTML5 elements & tags) and CSS\n        (flexbox, grid, media queries etc.). Then pick any one CSS\n        framework for more easiar work in designing the website such\n        as Bootstrap (preferred choice), Materialize, Bulma, Tailwind\n        etc. In free time, check few info about Browser Dev Tools\n        which is very helpful tool for debugging the bugs in your\n        website.\n    </p>\n    <p>\n        Now you should be ready to design static websites like\n        portfolio. Do a small project for yourself to get a better\n        understanding of how a website should be designed.\n    </p>\n    <p>\n        After you have designed a simple website, its time to host it.\n        So learn about Basic Website Deployment, Domain Names, How to\n        add a custom domain to your website, Static Hosting (on\n        Netlify or Github Pages).\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>2.JavaScript</h4>\n    <div class=\"m-2\">\n    <p>\n        JavaScript is a client side scripting language which is used\n        to make the website dynamic. It is very important language for\n        Fullstack Dev as it is used in both Frontend and Backend, but\n        if you chose Frontend Dev then JS is the only choice. So Learn\n        Vanilla JS (its just a term used for pure JS without\n        frameworks) and basics of jQuery library.\n    </p>\n    <p>\n        What's next? Obviously it is projects. Do simple projects like\n        stopwatch, color flipper, todolist, countdown etc and\n        whichever project you feel like to do or whatever ideas you\n        have, implement them.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>3.Side Technology</h4>\n    <div class=\"m-2\">\n    <p>\n        Learn the basics of Git commands & Github as they are very\n        important for developers. And also you need to know the basic\n        command line like navigating between different folders.\n    </p>\n    <p>\n        Once you are done with the basics of command line, git &\n        github, know about APIs.\n    </p>\n    <p>\n        In your free time, you can learn CSS Pre-processors such as\n        LESS or SASS but its optional. You can comeback later and\n        learn them.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>4.Javascript Framework</h4>\n    <div class=\"m-2\">\n    <p>\n        After you get confidence within you that you are good at JS,\n        pick any one JS framework like Angular or React or Vue JS.\n        Learn all the topics in the framework u chose and get adjusted\n        to it.\n    </p>\n    <p>\n        By now you should be able to do projects using the framework\n        you chose. Get started by watching youtube videos and then\n        learn to code on your own.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>5.Backend Technology</h4>\n    <div class=\"m-2\">\n    <p>\n        There are lots of programming languages used for backend\n        technology such as Python, NodeJS(Runtime JS environment for\n        Chrome V8), Java, PHP and many more. Pick any language of your\n        choice and start learning.\n    </p>\n    <p>\n        After learning the basics, pick a framework of the language\n        that u chose for backend technology such as django for Python,\n        Spring for Java, ExpressJs for NodeJS, Laravel for PHP etc.\n    </p>\n    <p>\n        Most of the backend dev comprises of database requirements.\n        Its good to learn backend technology along with any database\n        of your choice which is discussed in the next section. However\n        you can learn how to create your own server without a\n        database.\n    </p>\n    <p>\n        You also need to spare some time for learning technologies\n        like SEO, Web Testing and Web Authentication. Well you can\n        come back later and learn them too but make sure you will\n        learn them.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>6.Database</h4>\n    <div class=\"m-2\">\n    <p>\n        Almost every modern application needs to work with a lot of\n        data. Instead of working with files like microsoft excel, we\n        need efficient way of sorting, processing and reading data. A\n        database is a collection of data that is organized in a manner\n        that facilitates ease of access and efficient management\n        updating. Some examples are MySQL, MongoDB, Oracle, PostgreSQL\n        etc.\n    </p>\n    <p>\n        Choose any one database of your choice, learn the basic\n        operations and work on them. Make simple projects like Login\n        application or Contact form. Also you can learn storing data\n        in Google Cloud, AWS, Microsoft Azure or Firebase. Pick any\n        one and work with that because these platforms provides many\n        services like user authentication such as login in with\n        google/ github/ facebook, password recovert, Phone OTP,\n        automated emails for news letters and stuff.\n    </p>\n    <p>\n        After gaining so much of knowledge, you should be ready to do\n        few advanced projects like Hotel Reservation System, City Tour\n        Application, A simple Shopping Cart.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>What's Next?</h4>\n    <div class=\"m-2\">\n    <p>\n        Make clones such as Amazon Clone, Youtube Clone or Messenger\n        Clone and trust me, you will be happy with what you learnt by\n        doing such projects. If you need more projects ideas then head\n        to freelancing websites such as Freelancer, Fiverr, UpWork etc\n        and take a project. Offcource the client may not assign you\n        that project but still you can do the projects for your\n        self-improvement because they are real world applications!!!\n    </p>\n    <p>\n        <b>Well, How much time do I need to learn Web Dev?</b> <br />\n        Umm... I'm not sure because few people can learn in 3 months\n        and few people may take slow steps too, But average time can\n        be said as 4-5 months.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>Popular Stacks</h4>\n    <div class=\"m-2\">\n    <ul class=\"m-3\">\n        <li><strong>LAMP</strong></li>\n        <p>Linux, Apache, MySQL, PHP</p>\n        <li><strong>MEAN</strong></li>\n        <p>MongoDB, Express, Angular, NodeJS</p>\n        <li><strong>MERN</strong></li>\n        <p>MongoDB, Express, React, NodeJS</p>\n        <li><strong>MEVN</strong></li>\n        <p>MongoDB, Express, Vue, NodeJS</p>\n        <li><strong>Python & Django</strong></li>\n        <p>Python, Django, MySql, Apache</p>\n    </ul>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <p class=\"text-muted px-3\">\n        PS: All the youtube resources for learning concepts and projects\n        has been posted as separate blogs. Do check them out✌.\n    </p>\n    <p class=\"px-3\">\n        Check out\n        <a href=\"/blogs/myWebDevelopmentJourney\">My Web Dev Journey!!!</a>\n    </p>\n</div>\n","html":"<!-- [link](/blogs/post-three) -->\n<!-- <a href=\"/blogs/post-three\">Link</a> -->\n<!-- ![Firebase](./firebase.png) -->\n<div class=\"my-2 p-2\">\n    <h4>Introduction</h4>\n    <div class=\"m-2\">\n    <p>\n        <strong>What is Web Dev?</strong> <br />\n        Web Dev is the work involved in developing a website for the\n        internet. <br />\n        In general aspects there are two types of web dev - Frontend\n        and Backend Dev, but there is something called Fullstack which\n        is the combination of both Frontend and Backend Dev.\n    </p>\n    <ul class=\"m-3\">\n        <li><strong>Frontend Dev</strong></li>\n        <p>\n        It covers the work on everything that user can see on the\n        website and interact with the website. More creative minded\n        people tend to be Frontend Developers.\n        </p>\n        <li><strong>Backend Dev</strong></li>\n        <p>\n        It covers the work that user doesnt see which goes behind\n        the scenes of a website i.e take care of servers, API ,\n        incoming request and handling database. More logical\n        thinking people tend to be Backend Developers.\n        </p>\n        <li><strong>Fullstack Dev</strong></li>\n        <p>\n        It not just covers the work of both Frontend and Backend Dev\n        but also covers all the work to be done in Web dev such as\n        Planning, Analysis, Designing, Implementation, Testing &\n        Integration, Deployment and Manintainence of a website.\n        </p>\n    </ul>\n    <p>\n        To get started with Web Dev we need to download some tools &\n        technologies which are very essential. <br />\n        First thing is some sort of <strong>Web Browser</strong> such\n        as Google Chrome, Firefox or Safari. Second thing is a\n        <strong>Text Editor</strong> like Visual Studio Code Editor,\n        Sublime Text Editor or Atom. Last thing is need of\n        <strong>Version Control System</strong> such as Git.\n    </p>\n    <p>\n        Checkout the blog\n        <a href=\"/blogs/vcs-git&github\">VCS: Git & GitHub</a>\n        to know more about VCS.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>1.Frontend Technology- Getting started with HTML & CSS</h4>\n    <div class=\"m-2\">\n    <p>\n        Learn the basics of HTML (HTML5 elements & tags) and CSS\n        (flexbox, grid, media queries etc.). Then pick any one CSS\n        framework for more easiar work in designing the website such\n        as Bootstrap (preferred choice), Materialize, Bulma, Tailwind\n        etc. In free time, check few info about Browser Dev Tools\n        which is very helpful tool for debugging the bugs in your\n        website.\n    </p>\n    <p>\n        Now you should be ready to design static websites like\n        portfolio. Do a small project for yourself to get a better\n        understanding of how a website should be designed.\n    </p>\n    <p>\n        After you have designed a simple website, its time to host it.\n        So learn about Basic Website Deployment, Domain Names, How to\n        add a custom domain to your website, Static Hosting (on\n        Netlify or Github Pages).\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>2.JavaScript</h4>\n    <div class=\"m-2\">\n    <p>\n        JavaScript is a client side scripting language which is used\n        to make the website dynamic. It is very important language for\n        Fullstack Dev as it is used in both Frontend and Backend, but\n        if you chose Frontend Dev then JS is the only choice. So Learn\n        Vanilla JS (its just a term used for pure JS without\n        frameworks) and basics of jQuery library.\n    </p>\n    <p>\n        What's next? Obviously it is projects. Do simple projects like\n        stopwatch, color flipper, todolist, countdown etc and\n        whichever project you feel like to do or whatever ideas you\n        have, implement them.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>3.Side Technology</h4>\n    <div class=\"m-2\">\n    <p>\n        Learn the basics of Git commands & Github as they are very\n        important for developers. And also you need to know the basic\n        command line like navigating between different folders.\n    </p>\n    <p>\n        Once you are done with the basics of command line, git &\n        github, know about APIs.\n    </p>\n    <p>\n        In your free time, you can learn CSS Pre-processors such as\n        LESS or SASS but its optional. You can comeback later and\n        learn them.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>4.Javascript Framework</h4>\n    <div class=\"m-2\">\n    <p>\n        After you get confidence within you that you are good at JS,\n        pick any one JS framework like Angular or React or Vue JS.\n        Learn all the topics in the framework u chose and get adjusted\n        to it.\n    </p>\n    <p>\n        By now you should be able to do projects using the framework\n        you chose. Get started by watching youtube videos and then\n        learn to code on your own.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>5.Backend Technology</h4>\n    <div class=\"m-2\">\n    <p>\n        There are lots of programming languages used for backend\n        technology such as Python, NodeJS(Runtime JS environment for\n        Chrome V8), Java, PHP and many more. Pick any language of your\n        choice and start learning.\n    </p>\n    <p>\n        After learning the basics, pick a framework of the language\n        that u chose for backend technology such as django for Python,\n        Spring for Java, ExpressJs for NodeJS, Laravel for PHP etc.\n    </p>\n    <p>\n        Most of the backend dev comprises of database requirements.\n        Its good to learn backend technology along with any database\n        of your choice which is discussed in the next section. However\n        you can learn how to create your own server without a\n        database.\n    </p>\n    <p>\n        You also need to spare some time for learning technologies\n        like SEO, Web Testing and Web Authentication. Well you can\n        come back later and learn them too but make sure you will\n        learn them.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>6.Database</h4>\n    <div class=\"m-2\">\n    <p>\n        Almost every modern application needs to work with a lot of\n        data. Instead of working with files like microsoft excel, we\n        need efficient way of sorting, processing and reading data. A\n        database is a collection of data that is organized in a manner\n        that facilitates ease of access and efficient management\n        updating. Some examples are MySQL, MongoDB, Oracle, PostgreSQL\n        etc.\n    </p>\n    <p>\n        Choose any one database of your choice, learn the basic\n        operations and work on them. Make simple projects like Login\n        application or Contact form. Also you can learn storing data\n        in Google Cloud, AWS, Microsoft Azure or Firebase. Pick any\n        one and work with that because these platforms provides many\n        services like user authentication such as login in with\n        google/ github/ facebook, password recovert, Phone OTP,\n        automated emails for news letters and stuff.\n    </p>\n    <p>\n        After gaining so much of knowledge, you should be ready to do\n        few advanced projects like Hotel Reservation System, City Tour\n        Application, A simple Shopping Cart.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>What's Next?</h4>\n    <div class=\"m-2\">\n    <p>\n        Make clones such as Amazon Clone, Youtube Clone or Messenger\n        Clone and trust me, you will be happy with what you learnt by\n        doing such projects. If you need more projects ideas then head\n        to freelancing websites such as Freelancer, Fiverr, UpWork etc\n        and take a project. Offcource the client may not assign you\n        that project but still you can do the projects for your\n        self-improvement because they are real world applications!!!\n    </p>\n    <p>\n        <b>Well, How much time do I need to learn Web Dev?</b> <br />\n        Umm... I'm not sure because few people can learn in 3 months\n        and few people may take slow steps too, But average time can\n        be said as 4-5 months.\n    </p>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <h4>Popular Stacks</h4>\n    <div class=\"m-2\">\n    <ul class=\"m-3\">\n        <li><strong>LAMP</strong></li>\n        <p>Linux, Apache, MySQL, PHP</p>\n        <li><strong>MEAN</strong></li>\n        <p>MongoDB, Express, Angular, NodeJS</p>\n        <li><strong>MERN</strong></li>\n        <p>MongoDB, Express, React, NodeJS</p>\n        <li><strong>MEVN</strong></li>\n        <p>MongoDB, Express, Vue, NodeJS</p>\n        <li><strong>Python & Django</strong></li>\n        <p>Python, Django, MySql, Apache</p>\n    </ul>\n    </div>\n</div>\n<div class=\"my-2 p-2\">\n    <p class=\"text-muted px-3\">\n        PS: All the youtube resources for learning concepts and projects\n        has been posted as separate blogs. Do check them out✌.\n    </p>\n    <p class=\"px-3\">\n        Check out\n        <a href=\"/blogs/myWebDevelopmentJourney\">My Web Dev Journey!!!</a>\n    </p>\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='M95%209l-11%209-17%2013C48%2048%2046%2049%2038%2045c-7-4-9-4-20%203-12%208-13%208-16%203l-2-4v3c0%205%204%209%207%209l12-6c11-7%2013-7%2020-3%208%205%2012%203%2032-15a390%20390%200%200125-22c4-6%205-5%204%203l-2%2018c-4%2025-4%2040%200%2029%202-6%206-16%2010-22l2-4%202%205c3%208%204%209%2013%203%208-6%209-7%2012-3%2015%2019%2018%2018%2027-1l6-10%204%206c5%2010%208%2010%2017-1s9-11%2011%2011l2%2013c1%202%205-3%207-6%200-2%202-2%205-1%202%201%204%201%209-3%206-4%207-4%2014-5%206%200%2010-1%2015-3%208-4%2016-4%2023-1%205%202%2013%203%2027%201%209-1%2010-1%2014%201%205%202%2012%203%2021%200%208-2%2011-1%2016%205%208%2010%2012%2010%2031%204%2013-4%2014-4%2014-1%201%202%201%201%201-1v-4l-4%201-14%204c-16%204-19%203-27-6-5-6-8-7-17-5-11%202-15%201-20-2-5-2-6-2-13-2-23%202-22%202-30%200-10-4-10-4-24%201-7%202-13%204-14%203-3%200-9%202-15%206-5%203-6%203-8%202-4-1-5-1-7%204l-3%204-1-14c-2-19-4-20-15-8-8%209-9%209-14%200l-4-7c-2-2-5%201-10%2011-8%2016-9%2016-19%204-8-9-10-9-19-2-7%206-7%206-9%200-4-11-4-10-16%2016-2%204%200-12%202-28%203-16%203-23%200-23l-5%204M19%2093v10h3c5%200%206-1%206-10s-1-10-6-10h-3v10m17-9l-2%207a532%20532%200%2001-1%2012l2-1%202-2%202%202%202%201c2%200%202-2%200-14-1-5-4-8-5-5m12%200c-2%202-1%207%202%2010%203%204%204%206%202%206l-2-1-1-2-2%201c0%203%201%205%204%205%206%200%207-5%202-10l-3-6h2c2%202%204%203%204%201%200-4-5-6-8-4m22%201c-2%203-3%2013-1%2016%202%204%209%202%209-3%200-3-3-2-3%200-1%205-3%202-3-5s2-10%203-5c0%203%203%203%203%200%200-4-6-6-8-3m19%205c2%2012%202%2013%204%2013s3-1%203-4l1-3v3c0%203%200%204%202%204%203%200%203%200%204-9V84c-1-2-2-1-3%206l-1%204c0-14-5-14-5-1%200%204-1%203-1-4l-3-6-1%207m19%203v10h5l4-1c0-1-1-2-3-2-4%200-5-5-1-5%203-1%204-3%201-3-4-1-3-5%200-6%205%200%203-2-2-3h-4v10m14-9l-1%2010v9h4l5-1V90c1-3%201-3-1-5s-6-3-7-1m21%209v10h3c5%200%206-1%206-10s-1-10-6-10h-3v10m14%200v10h5c5%200%206-2%201-3-4%200-4-5-1-5s3-3%200-3c-3-1-2-5%201-6%205%200%203-2-2-3h-4v10m13-9l1%2010c1%208%201%209%204%209%202%200%202%200%204-12v-8l-2%204c-2%2011-2%2011-3%204s-3-10-4-7m15%200l-1%2010v9h5l4-1c0-1-1-2-3-2-3%200-4-4-1-5s3-3%201-3c-4-1-3-5%200-6l3-1c-1-2-7-2-8-1m26%201c-2%202-2%2012-1%2015s5%204%208%202c2-2%201-15-1-17s-4-2-6%200m13%208c0%208%200%2010%202%2010l1-3%201-4c5%200%207-9%203-11l-5-2c-2%200-2%200-2%2010m14-9c-2%201-1%2019%201%2019l1-5v-5l1%205c2%208%204%207%205-2%201-1%201%200%201%202%200%204%200%205%202%205l1-10c0-9%200-10-2-10s-2%200-4%209v4l-1-6c-1-6-3-8-5-6m18%200l-1%2010v9h5l4-1c0-1-1-2-3-2-4%200-5-5-1-5%203-1%204-3%201-3-4-1-3-5%200-6l3-1c-1-2-7-2-8-1m13%200c-2%201-1%2019%200%2019%202%200%202-2%202-6l1-6%201%205c1%205%202%207%203%207%202%200%202-1%202-10l-1-10-2%205v5l-1-5c-2-4-4-6-5-4m51%2013c-2%201-2%202-2%2022v21h-13c-19%200-18-2-18%2026%200%2022%200%2023-2%2023-2%201-2%203%200%209l1%202h42l43-1c2-1%203-10%201-10s-2-2-2-15v-16h7c11%200%2010%202%2010-32%200-28%200-28-2-29-2-2-7-2-32-2-26%200-31%200-33%202m2%203l-1%205v4h63v-9l-31-1-31%201m-1%2033l1%2021h62v-41h-63v20m-211-9c0%208%200%2010%202%2010l1-4c0-3%200-4%202-4l1%204%201%204c2%200%202-2%202-9%200-10-1-11-6-11h-3v10m15-9v18l4%201c3%200%204-2%204-10s-1-10-4-10l-4%201m14%206l-2%2010c0%203%202%205%203%201l2-2%202%202c1%203%204%203%204%200l-2-10c-1-7-1-8-4-8-2%200-2%201-3%207m13%203v10h3c5%200%207-3%207-11%200-7-1-9-7-9h-3v10m14%200c0%208%200%2010%202%2010l1-5v-5l1%205c2%207%204%207%205%200l1-4v4c0%204%200%205%202%205l1-10c0-9%200-10-2-10s-3%202-3%206c0%205-2%205-2%200-1-5-1-6-4-6-2%200-2%200-2%2010m21-9l-3%2017c0%203%202%203%203%200l2-2%202%202%202%202c1%200%201-5-2-18%200-2-4-3-4-1m12%209c0%208%200%2010%202%2010l1-4c0-3%200-4%202-4s4-2%204-5c0-5-2-7-6-7h-3v10m157-5l-6%2015c-4%2013-4%2015-1%2015l10-30-1-1-2%201m-19%208l-5%207c0%202%2011%2011%2012%2010s0-2-3-6l-5-4%205-5c3-4%204-5%203-6s-3%200-7%204m24-4c-1%201%200%202%203%206l5%205-4%204c-4%203-5%205-4%206s2%200%207-4l5-6c0-3-11-12-12-11M0%20137c0%203%207%205%2051%2016%2039%209%2049%2012%2074%2022a1204%201204%200%2000163%2049c0-2-28-12-47-17-34-8-88-25-118-37A642%20642%200%20000%20137m291%208l-1%2022v22h18l17%201%203%201%204-1%2017-1h17v-31h-22c-26%200-26%200-26-9v-5h-13l-14%201M0%20161c0%202%201%202%204%202a505%20505%200%2001147%2036l48%2018%2022%208h10c9%200%2010%200%208-1l-83-30c-55-21-95-31-138-34-18-1-18-1-18%201m0%2021c0%203%200%203%2018%205%2042%204%2077%2012%20129%2030l23%208h22l-11-4c-82-30-116-38-168-41H0v2m321%202c0%202%201%202%2021%202s22-1%2022-2c0-2-1-2-21-2-21%200-22%200-22%202m-33%2010c0%202%201%202%2041%202l40-1-4-2a133%20133%200%2000-36%201l-7-1-18-1c-15%200-16%200-16%202M7%20205l-7%201%202%201a404%20404%200%2001100%2015l24%203h11l-15-4A514%20514%200%20007%20205'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/bc84ab93bede9292571d47c1785d35a4/ee604/blog02.png","srcSet":"/static/bc84ab93bede9292571d47c1785d35a4/69585/blog02.png 200w,\n/static/bc84ab93bede9292571d47c1785d35a4/497c6/blog02.png 400w,\n/static/bc84ab93bede9292571d47c1785d35a4/ee604/blog02.png 800w,\n/static/bc84ab93bede9292571d47c1785d35a4/f3583/blog02.png 1200w,\n/static/bc84ab93bede9292571d47c1785d35a4/e4d72/blog02.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"basicWebDevelopmentRoadmap","thumbnail":"thumbnails/blog02.png"}},"staticQueryHashes":["2987289216","63159454"]}