{"id":760,"date":"2022-11-10T19:07:55","date_gmt":"2022-11-11T00:07:55","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/?p=760"},"modified":"2022-11-10T19:08:06","modified_gmt":"2022-11-11T00:08:06","slug":"create-a-web-project","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/2022\/11\/10\/create-a-web-project\/","title":{"rendered":"Creating a Web Project"},"content":{"rendered":"\n<p>This tutorial shows how to create a web project using GitHub and Replit. This is how you will be expected to create your project for the Web Design Module. We are going to go over this in class as well.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Before you start: it is important to have both a GitHub account and a Replit account. Start with creating the GitHub account and then, when you go to Replit, click to <strong>Sign in with GitHub<\/strong>. This will link the two accounts and make the process below work smoothly.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Create GitHub Repository<\/h2>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\" target=\"_blank\">GitHub<\/a> is a place where you can save and share coding projects of all kinds. Even through Microsoft runs the site, it is free for public projects and it is the most widely used site for open source projects. Another benefit is that it can be the server to host web sites like what we will make in class.<\/p>\n\n\n\n<p>A REPOSITORY is basically a fancy word for a folder. It is the general name for a single project on GitHub and where all of your files are stored. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(a) <strong>Sign in to <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\" target=\"_blank\">GitHub<\/a><\/strong><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">(b)<strong>Create a New Repository<\/strong><\/h3>\n\n\n\n<p>You can use the + sign in the black bar at the top of the page <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.28.48-PM.png\" alt=\"screenshot of using + sign to create new repository\" class=\"wp-image-765\" width=\"279\" height=\"241\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.28.48-PM.png 558w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.28.48-PM-300x259.png 300w\" sizes=\"auto, (max-width: 279px) 100vw, 279px\" \/><\/figure>\n\n\n\n<p>or click the green New button on the left side of your GitHub dashboard. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.18.54-PM.png\" alt=\"screenshot of new repository button on GitHub\" class=\"wp-image-764\" width=\"307\" height=\"199\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.18.54-PM.png 614w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.18.54-PM-300x194.png 300w\" sizes=\"auto, (max-width: 307px) 100vw, 307px\" \/><\/figure>\n\n\n\n<p>You must be signed in to do either of these.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(c) <strong>Fill out the Info to create a new Repo (short for repository)<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Give your repository a name. Any spaced in the name will be converted to dashes &#8211;<strong> NOTE you can&#8217;t change this later.<\/strong><\/li><li>Description is optional. You can add or change this later<\/li><li>Check <strong>Add a README file<\/strong>. This is another place to add a longer description to your file.<\/li><li>Optionally <strong>Choose a license<\/strong>. You don&#8217;t have to do this. If you have work that you want to retain copyright over (like photos etc) then do not chose one of these as they generally are open source licenses.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"758\" height=\"1024\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.38.40-PM-758x1024.png\" alt=\"screenshot of full new repository page on GitHub\" class=\"wp-image-767\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.38.40-PM-758x1024.png 758w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.38.40-PM-222x300.png 222w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.38.40-PM-768x1038.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.38.40-PM-1137x1536.png 1137w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.38.40-PM.png 1508w\" sizes=\"auto, (max-width: 758px) 100vw, 758px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">(d) Click <strong>Create Repository<\/strong><\/h3>\n\n\n\n<p>This will create a blank repository.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Create a <a href=\"https:\/\/replit.com\" target=\"_blank\" rel=\"noreferrer noopener\">Repl<\/a><\/h2>\n\n\n\n<p>A project in Replit is called a Repl (I know close to repo, it stands for <strong>R<\/strong>ead, <strong>E<\/strong>val, <strong>P<\/strong>rint, <strong>L<\/strong>oop that is a programming thing).<\/p>\n\n\n\n<p>We are going to create one that can read from and write files to our GitHub repository.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">(a) Go to <a href=\"https:\/\/replit.com\" target=\"_blank\" rel=\"noreferrer noopener\">Replit<\/a><\/h3>\n\n\n\n<h3 class=\"wp-block-heading\">(b) Click the <strong>+ Create<\/strong> button<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.41.07-PM.png\" alt=\"\" class=\"wp-image-768\" width=\"182\" height=\"80\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">(c) Click to <strong>Import from GitHub<\/strong>. <\/h3>\n\n\n\n<p><strong>This is important!<\/strong> We want to use the GitHub repo we created in step 1 and not just create a new repl.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.42.43-PM-1024x202.png\" alt=\"\" class=\"wp-image-769\" width=\"512\" height=\"101\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.42.43-PM-1024x202.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.42.43-PM-300x59.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.42.43-PM-768x152.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.42.43-PM.png 1176w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">(d) Click in the box under <strong>GitHub URL <\/strong>and find the repo you created in Step 1. <\/h3>\n\n\n\n<p>This will only show properly if you&#8217;ve signed in to Replit with your GitHub account.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.43.20-PM-1024x526.png\" alt=\"\" class=\"wp-image-770\" width=\"512\" height=\"263\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.43.20-PM-1024x526.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.43.20-PM-300x154.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.43.20-PM-768x394.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.43.20-PM.png 1176w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">(e) Choose your <strong>Language<\/strong> as <strong>HTML, CSS, JS<\/strong>. <\/h3>\n\n\n\n<p>If you don&#8217;t see it in your favorites then start typing HTML and it should show up.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.44.06-PM.png\" alt=\"screenshot choosing a language for repl\" class=\"wp-image-771\" width=\"310\" height=\"163\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.44.06-PM.png 620w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.44.06-PM-300x158.png 300w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">(f) Click the <strong>Import from GitHub<\/strong> button.<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.48.33-PM-1024x570.png\" alt=\"full import from GitHub Replit interface\" class=\"wp-image-772\" width=\"512\" height=\"285\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.48.33-PM-1024x570.png 1024w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.48.33-PM-300x167.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.48.33-PM-768x428.png 768w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.48.33-PM.png 1196w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n\n\n<p>You may have to wait for a while and see an animation like this<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.49.31-PM.png\" alt=\"screenshot of importing wait animation\" class=\"wp-image-774\" width=\"316\" height=\"315\" srcset=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.49.31-PM.png 632w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.49.31-PM-300x300.png 300w, https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-content\/uploads\/sites\/2563\/2022\/11\/Screen-Shot-2022-11-10-at-6.49.31-PM-150x150.png 150w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The End&#8230; for now<\/h2>\n\n\n\n<p>You should now have a Repl that is linked to your GitHub Repository. The next steps are creating the HTML and CSS files for your project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to create a web project using GitHub and Replit. This is how you will be expected to create your project for the Web Design Module. We [&hellip;]<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"openlab_post_visibility":"","footnotes":""},"categories":[33,51],"tags":[55,58,56,57],"class_list":["post-760","post","type-post","status-publish","format-standard","hentry","category-how-to","category-web-design-module","tag-github","tag-repl","tag-replit","tag-repo"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>This tutorial shows how to create a web project using GitHub and Replit. This is how you will be expected to create your project for the Web Design Module. We are going to go over this in class as well. Before you start: it is important to have both a GitHub account and a Replit account. Start with creating the GitHub account and then, when you go to Replit, click to Sign in with GitHub. This will link the two accounts and make the process below work smoothly. Step 1: Create GitHub Repository GitHub is a place where you can&hellip;<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/category\/resources\/how-to\/\" rel=\"category tag\">How-To<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/category\/web-design-module\/\" rel=\"category tag\">Web Design Module<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"This tutorial shows how to create a web project using GitHub and Replit. This is how you will be expected to create your project for the Web Design Module. We [&hellip;]","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/posts\/760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/comments?post=760"}],"version-history":[{"count":9,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/posts\/760\/revisions"}],"predecessor-version":[{"id":780,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/posts\/760\/revisions\/780"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/media?parent=760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/categories?post=760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-100-1900-fa22\/wp-json\/wp\/v2\/tags?post=760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}