{"id":50,"date":"2024-01-23T14:22:27","date_gmt":"2024-01-23T14:22:27","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp100-1300-f2019\/?page_id=50"},"modified":"2024-03-27T14:50:58","modified_gmt":"2024-03-27T14:50:58","slug":"web-development","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/web-development\/","title":{"rendered":"Web Development"},"content":{"rendered":"<p>SLIDES<\/p>\n<p><a href=\"https:\/\/docs.google.com\/presentation\/d\/1cdSEqDBnItsc2CdznFfGzdW-NmUMhC2GBsQpQc1w-is\/edit?usp=sharing\">https:\/\/docs.google.com\/presentation\/d\/1cdSEqDBnItsc2CdznFfGzdW-NmUMhC2GBsQpQc1w-is\/edit?usp=sharing<\/a><\/p>\n<p>IN-CLASS TUTORIALS AND ESSENTIAL RESOURCES<\/p>\n<ul>\n<li>Download and use one of these free code editors:\n<ul>\n<li><a href=\"http:\/\/brackets.io\/\">Brackets<\/a><\/li>\n<li><a href=\"https:\/\/www.sublimetext.com\/\">Sublime Text<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/0BwdyBdZ2a8gvYlZtWVlDMkgyOGs\/view?usp=sharing\">Creating a website with HTML &amp; CSS tutorial<\/a><\/li>\n<li><a href=\"https:\/\/drive.google.com\/file\/d\/0BwdyBdZ2a8gvU1lBa05jcnJoSFE\/view?usp=sharing\">GitHub server tutorial<\/a><\/li>\n<\/ul>\n<p>SUGGESTED RESOURCES<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><a href=\"http:\/\/www.nytimes.com\/video\/technology\/100000001766676\/what-keeps-a-data-center-going.html\">NYTimes video about data centers \u2013 \u201cInto the Cloud\u201d<\/a><\/li>\n<li><a href=\"https:\/\/www.google.com\/search?sca_esv=dd94ec39bb071d4b&amp;sca_upv=1&amp;rlz=1C5CHFA_enUS891US891&amp;sxsrf=ACQVn0-fZWDXIshGBsf__-FwOev2iNTygg:1711548963660&amp;q=wimp+how+the+internet+works&amp;tbm=vid&amp;source=lnms&amp;prmd=visnbmtz&amp;sa=X&amp;ved=2ahUKEwi4iPrf0JSFAxVKFlkFHUwlAm4Q0pQJegQIDhAB&amp;biw=1280&amp;bih=576&amp;dpr=1#fpstate=ive&amp;vld=cid:5d95eb4e,vid:Gfoc3Cxgnpk,st:0\">World Science Festival Video \u2013 \u201cHow the web works\u201d<\/a><\/li>\n<li>Video tutorials for HTML &amp; CSS \u2013 \u201cDon\u2019t fear the Internet: Starting from Scratch \u2013 <a href=\"http:\/\/www.dontfeartheinternet.com\/04-from-scratch\/\">Part I (HTML)<\/a> &amp; <a href=\"http:\/\/www.dontfeartheinternet.com\/05-from-scratch\/\">Part II (CSS)\u201d<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Getting_started_with_the_web\/HTML_basics\">HTML basics from Mozilla Developers Network<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Introduction_to_CSS\/How_CSS_works\">How CSS works on Mozilla Developer Network<\/a><\/li>\n<li>Interesting use of HTML\/CSS\/JS in journalism: <a href=\"http:\/\/highline.huffingtonpost.com\/articles\/en\/poor-millennials\/\">\u201cMillennials are Screwed\u201d by the Huffington Post<\/a><\/li>\n<\/ul>\n<p>SAMPLE ASSIGNMENT AND RUBRICS<\/p>\n<p><a class=\"no-line\" href=\"https:\/\/prpinkas.github.io\/myOwnAdventure\/\"><img decoding=\"async\" class=\"alignnone size-full wp-image-106\" src=\"https:\/\/mmp100blog.files.wordpress.com\/2017\/06\/screen-shot-2017-06-29-at-10-09-20-am.png?w=739\" alt=\"Screen Shot 2017-06-29 at 10.09.20 AM.png\" data-attachment-id=\"106\" data-permalink=\"https:\/\/mmp100blog.wordpress.com\/topics\/web-development\/screen-shot-2017-06-29-at-10-09-20-am\/\" data-orig-file=\"https:\/\/mmp100blog.files.wordpress.com\/2017\/06\/screen-shot-2017-06-29-at-10-09-20-am.png\" data-orig-size=\"1968,1534\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screen Shot 2017-06-29 at 10.09.20 AM\" data-image-description=\"\" data-medium-file=\"https:\/\/mmp100blog.files.wordpress.com\/2017\/06\/screen-shot-2017-06-29-at-10-09-20-am.png?w=300\" data-large-file=\"https:\/\/mmp100blog.files.wordpress.com\/2017\/06\/screen-shot-2017-06-29-at-10-09-20-am.png?w=739\" \/><\/a><\/p>\n<p>Create a \u201cchoose your own adventure\u201d story with HTML and CSS \u00a0code. Each page should give the user 2 options to choose from. There should be a total of (at least) 5 HTML pages. Use <a href=\"https:\/\/twinery.org\/\"><em>Twine<\/em><\/a> to map and write the story. All your pages should include the required tags (html, head, title, body). You should also use h1 (main header), p (paragraph), img (image) and a(link). Always include an option to go back to the home page (index.html). \u00a0Make sure you only use Creative Commons or Public Domain images and that you attribute them directly on the page. Once you\u2019ve completed and tested all the HTML, style your code with CSS. Use at least the following properties: color, text-size, font-family, text-decoration). Finally, upload the entire project on GitHub (<a href=\"https:\/\/drive.google.com\/file\/d\/0BwdyBdZ2a8gvU1lBa05jcnJoSFE\/view?usp=sharing\">follow these instructions<\/a>).<\/p>\n<p>Submit the following to blackboard:<\/p>\n<ul>\n<li>URL to access the project<\/li>\n<li>A short statement. Use <a href=\"https:\/\/docs.google.com\/document\/d\/1c9Dl2hrqy-VEC4kjsRMM14JuYy17iJq8AYIwxT3PNNY\/edit?usp=sharing\">this template<\/a>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong><a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1j8i-zD9oRlSWP4GJCQxKbMncJ6I1KZZ5qKuMrn4Qz5c\/edit?usp=sharing\">Grading Rubric<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SLIDES https:\/\/docs.google.com\/presentation\/d\/1cdSEqDBnItsc2CdznFfGzdW-NmUMhC2GBsQpQc1w-is\/edit?usp=sharing IN-CLASS TUTORIALS AND ESSENTIAL RESOURCES Download and use one of these free code editors: Brackets Sublime Text Creating a website with HTML &amp; CSS tutorial GitHub server tutorial SUGGESTED RESOURCES NYTimes video about data centers \u2013 \u201cInto the Cloud\u201d World Science Festival Video \u2013 \u201cHow the web works\u201d Video tutorials for HTML &amp; &hellip; <a href=\"https:\/\/openlab.bmcc.cuny.edu\/s-24\/web-development\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Web Development&#8221;<\/span><\/a><\/p>\n","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"class_list":["post-50","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/wp-json\/wp\/v2\/pages\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":4,"href":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/wp-json\/wp\/v2\/pages\/50\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/wp-json\/wp\/v2\/pages\/50\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/s-24\/wp-json\/wp\/v2\/media?parent=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}