{"id":301,"date":"2019-05-30T17:17:26","date_gmt":"2019-05-30T17:17:26","guid":{"rendered":"https:\/\/avantutor.com\/blog\/?p=301"},"modified":"2019-05-30T17:27:01","modified_gmt":"2019-05-30T17:27:01","slug":"web-development-cheat-sheet","status":"publish","type":"post","link":"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/","title":{"rendered":"Web Development Cheat Sheet"},"content":{"rendered":"\n

The following is a compilation (in a cheat sheet format) of the most common steps when starting a new web development project. It includes info on git, loading CSS and JavaScript files and how to debug your page.<\/p>\n\n\n\n

Git Cheat Sheet<\/h2>\n\n\n\n

Create New Repository<\/strong> and Pushing Your New Project to Github <\/h4>\n\n\n\n
  1. Go to https:\/\/github.com\/<\/a><\/li>
  2. Find ‘New Repository’ option<\/li>
  3. Follow Process (Default Options are Fine) <\/li>
  4. Receive the following (terminal command) instructions<\/li><\/ol>\n\n\n\n
    echo \"# New_Repo_Demo\" >> README.md \ngit init\ngit add README.md \ngit commit -m \"first commit\"\ngit remote add origin https:\/\/github.com\/mujibsardar\/New_Repo_Demo.git\ngit push -u origin master<\/code><\/pre>\n\n\n\n
    Do this Instead (In Your Website Root Directory)<\/p>\n\n\n\n
    git init\ngit add . \ngit commit -m \"first commit\"\ngit remote add origin https:\/\/github.com\/mujibsardar\/New_Repo_Demo.git\ngit push -u origin master<\/code><\/pre>\n\n\n\n
    Working with Git After Initial Setup<\/h4>\n\n\n\n
    Check Status <\/p>\n\n\n\n
    git status<\/code><\/pre>\n\n\n\n
    See List of all Remote Repositories<\/p>\n\n\n\n
    git remote<\/code><\/pre>\n\n\n\n
    Git Add and Push to Remote Repositories<\/p>\n\n\n\n
    git add .\ngit commit -m \"Write a message describing your changes\"\ngit push origin master<\/code><\/pre>\n\n\n\n
    Clone \/ ‘Download’ Remote Repository to Current Directory<\/p>\n\n\n\n
    git clone https:\/\/github.com\/username\/name_of_repo<\/code><\/pre>\n\n\n\n
    Simple (HTML CSS Javascript) Website Cheat Sheet<\/h2>\n\n\n\n
    HTML5 Minimum Boilerplate Code<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n  <\/head>\n  <body>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Load External Local Javascript File <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n\n    <script src=\"scripts\/myscripts.js\"><\/script>\n \n  <\/head>\n  <body>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
    Load External Remote JavaScript File via CDN <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.0\/jquery.min.js\"><\/script>\n\n  <\/head>\n  <body>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
    Load External Local CSS File<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n\n    <link rel=\"stylesheet\" href=\"styles\/styles.css\">\n\n  <\/head>\n  <body>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
     Load External Remote CSS File <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n\n    <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.4.0\/css\/bootstrap.min.css\">\n\n  <\/head>\n  <body>\n  <\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
    Loading jQuery CDN (Check Version Number)<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.0\/jquery.min.js\"><\/script>\n\n<!-- or -->\n\n<script src=\"https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-3.4.0.min.js\"><\/script>\n\n  <\/head>\n  <body>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Loading jQuery After Downloading it (Use Correct Path and Name)<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n\n<script src=\"path_to_file\/jquery-3.4.0.min.js\"><\/script>\n\n  <\/head>\n  <body>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
    Load Remote Bootstrap (Check https:\/\/getbootstrap.com<\/a> for Latest Version)<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n\n<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz\/K68vbdEjh4u\" crossorigin=\"anonymous\">\n\n  <\/head>\n  <body>\n\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\" integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"anonymous\"><\/script>\n\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Load Local Bootstrap After Downloading it (Both JS and CSS) <\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    <title>title<\/title>\n\n<link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\">\n\n  <\/head>\n  <body>\n\n<script src=\"js\/bootstrap.min.js\"><\/script>\n\n  <\/body>\n<\/html>\n\n<\/code><\/pre>\n\n\n\n
    View and Debug Website<\/h2>\n\n\n\n
     Load Your index.html via Chrome <\/p>\n\n\n\n
    Open Inspect Console in Chrome<\/h4>\n\n\n\n
      <\/p>\n\n\n\n
    \"How
    Chrome Right Click Inspect Option <\/figcaption><\/figure>\n\n\n\n
     Check Console Output (Click Console Tab) <\/p>\n\n\n\n
    \"View
    Console Tab<\/figcaption><\/figure>\n\n\n\n
     Check Network Activity (Click Network Tab)<\/p>\n\n\n\n
    \"View
    Network Tab<\/figcaption><\/figure>\n\n\n\n
    Between both of these inspect options you should be able to detect most problems associated with loading your site.<\/p>\n\n\n\n
    End of Cheat Sheet<\/h2>\n\n\n\n
    Please feel free to comment anything else you feel that needs to be on this cheat sheet.<\/p>\n\n\n\n
    Additionally, reach out to me on my homepage<\/a> if you have you any questions or would like to work with me. <\/p>\n\n\n\n
    Happy Coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
    The following is a compilation (in a cheat sheet format) of the most common steps when starting a new web development project. It includes info on git, loading CSS and JavaScript files and how to debug your page. Git Cheat… Continue Reading →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"footnotes":""},"categories":[8,30,21],"tags":[],"yoast_head":"\nWeb Development Cheat Sheet - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding<\/title>\n<meta name=\"description\" content=\"The following is a compilation ( in a cheat sheet format) of the most common steps when starting a new web development project.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Development Cheat Sheet - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\" \/>\n<meta property=\"og:description\" content=\"The following is a compilation ( in a cheat sheet format) of the most common steps when starting a new web development project.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/\" \/>\n<meta property=\"og:site_name\" content=\"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-30T17:17:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-30T17:27:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-30-at-9.56.32-AM-1024x481.png\" \/>\n<meta name=\"author\" content=\"avansardar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"avansardar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/\",\"url\":\"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/\",\"name\":\"Web Development Cheat Sheet - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\",\"isPartOf\":{\"@id\":\"https:\/\/avantutor.com\/blog\/#website\"},\"datePublished\":\"2019-05-30T17:17:26+00:00\",\"dateModified\":\"2019-05-30T17:27:01+00:00\",\"author\":{\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e\"},\"description\":\"The following is a compilation ( in a cheat sheet format) of the most common steps when starting a new web development project.\",\"breadcrumb\":{\"@id\":\"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/avantutor.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development Cheat Sheet\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/avantutor.com\/blog\/#website\",\"url\":\"https:\/\/avantutor.com\/blog\/\",\"name\":\"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding\",\"description\":\"Looking for expert advice on how to improve your coding skills? The AvanTutor blog provides a wealth of resources and insights to help you become a better programmer. Our experienced tutors share tips and tricks for mastering popular programming languages such as Java, and JavaScript, as well as insights into the latest trends in software development. With regular updates and engaging content, the AvanTutor blog is your go-to resource for all things coding.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/avantutor.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e\",\"name\":\"avansardar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/avantutor.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g\",\"caption\":\"avansardar\"},\"url\":\"https:\/\/avantutor.com\/blog\/author\/avansardar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Development Cheat Sheet - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","description":"The following is a compilation ( in a cheat sheet format) of the most common steps when starting a new web development project.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/","og_locale":"en_US","og_type":"article","og_title":"Web Development Cheat Sheet - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","og_description":"The following is a compilation ( in a cheat sheet format) of the most common steps when starting a new web development project.","og_url":"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/","og_site_name":"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","article_published_time":"2019-05-30T17:17:26+00:00","article_modified_time":"2019-05-30T17:27:01+00:00","og_image":[{"url":"https:\/\/avantutor.com\/blog\/wp-content\/uploads\/2019\/05\/Screen-Shot-2019-05-30-at-9.56.32-AM-1024x481.png"}],"author":"avansardar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"avansardar","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/","url":"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/","name":"Web Development Cheat Sheet - AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","isPartOf":{"@id":"https:\/\/avantutor.com\/blog\/#website"},"datePublished":"2019-05-30T17:17:26+00:00","dateModified":"2019-05-30T17:27:01+00:00","author":{"@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e"},"description":"The following is a compilation ( in a cheat sheet format) of the most common steps when starting a new web development project.","breadcrumb":{"@id":"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/avantutor.com\/blog\/web-development-cheat-sheet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/avantutor.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Development Cheat Sheet"}]},{"@type":"WebSite","@id":"https:\/\/avantutor.com\/blog\/#website","url":"https:\/\/avantutor.com\/blog\/","name":"AvanTutor Blog - Tips, Tricks, and Resources for Mastering Coding","description":"Looking for expert advice on how to improve your coding skills? The AvanTutor blog provides a wealth of resources and insights to help you become a better programmer. Our experienced tutors share tips and tricks for mastering popular programming languages such as Java, and JavaScript, as well as insights into the latest trends in software development. With regular updates and engaging content, the AvanTutor blog is your go-to resource for all things coding.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/avantutor.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/3a1820bcdd71870ace675436f371be9e","name":"avansardar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/avantutor.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/81392f2a2c93b7b1c7479ed6b4115f02?s=96&d=mm&r=g","caption":"avansardar"},"url":"https:\/\/avantutor.com\/blog\/author\/avansardar\/"}]}},"_links":{"self":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/301"}],"collection":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/comments?post=301"}],"version-history":[{"count":6,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/301\/revisions"}],"predecessor-version":[{"id":310,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/posts\/301\/revisions\/310"}],"wp:attachment":[{"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/media?parent=301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/categories?post=301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/avantutor.com\/blog\/wp-json\/wp\/v2\/tags?post=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}