{"id":951,"date":"2018-11-28T20:53:55","date_gmt":"2018-11-28T20:53:55","guid":{"rendered":"http:\/\/ucsbwebdev.local\/?p=951"},"modified":"2018-11-28T20:53:55","modified_gmt":"2018-11-28T20:53:55","slug":"3-frameworks-in-class-exercise","status":"publish","type":"post","link":"https:\/\/ucsbwebdev.fzilla.com\/?p=951","title":{"rendered":"3 Frameworks In Class Exercise"},"content":{"rendered":"<h1 class=\"p1\">In class framework assignment<\/h1>\n<p>Getting a simple website built with 3 frameworks should be a great introduction!<\/p>\n<h2>Directions<\/h2>\n<ul class=\"ul1\">\n<li class=\"li1\">Create a new Visual Studio folder\/project<\/li>\n<li class=\"li1\">Create 4 HTML files\n<ul class=\"ul1\">\n<li class=\"li1\">index.html\n<ul class=\"ul1\">\n<li class=\"li1\">Which should only contain 3 links to the other 3 HTML files<\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\"><strong>bootstrap.html<\/strong><\/li>\n<li class=\"li1\"><strong>bulma.html<\/strong><\/li>\n<li class=\"li1\"><strong>uikit.html<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Bootstrap<\/h2>\n<ul class=\"ul1\">\n<li style=\"list-style-type: none;\">\n<ul class=\"ul1\">\n<li class=\"li1\">Go to this page <a href=\"http:\/\/getbootstrap.com\/docs\/4.1\/getting-started\/introduction\/#css\"><span class=\"s3\">http:\/\/getbootstrap.com\/docs\/4.1\/getting-started\/introduction\/#css<\/span><\/a><span class=\"Apple-converted-space\">\u00a0 <\/span>and get the stylesheet tag to add to your page<\/li>\n<li class=\"li1\">Add the navbar component to the top of your page from <a href=\"http:\/\/getbootstrap.com\/docs\/4.1\/components\/navbar\/#nav\"><span class=\"s3\">http:\/\/getbootstrap.com\/docs\/4.1\/components\/navbar\/#nav<\/span><\/a><\/li>\n<li class=\"li4\"><span class=\"s5\">Now add a carousel from <a href=\"http:\/\/getbootstrap.com\/docs\/4.1\/components\/carousel\/#with-indicators\">http:\/\/getbootstrap.com\/docs\/4.1\/components\/carousel\/#with-indicators<\/a> <\/span><\/li>\n<li class=\"li4\"><span class=\"s5\">Change the active slide with this one instead <a href=\"http:\/\/getbootstrap.com\/docs\/4.1\/components\/carousel\/#with-captions\">http:\/\/getbootstrap.com\/docs\/4.1\/components\/carousel\/#with-captions<\/a> <\/span><\/li>\n<li class=\"li4\"><span class=\"s5\">And use this image <a href=\"https:\/\/via.placeholder.com\/1600x800\/5654ad\/fff\/?text=Angel+Grablev\">https:\/\/via.placeholder.com\/1600&#215;800\/5654ad\/fff\/?text=Angel+Grablev<\/a><\/span><\/li>\n<li class=\"li4\"><span class=\"s5\">Now add a couple of cards from <a href=\"http:\/\/getbootstrap.com\/docs\/4.1\/components\/card\/#using-grid-markup\">http:\/\/getbootstrap.com\/docs\/4.1\/components\/card\/#using-grid-markup<\/a>\u00a0<\/span><\/li>\n<li class=\"li1\">Use the spacing classes from here <a href=\"https:\/\/getbootstrap.com\/docs\/4.1\/utilities\/spacing\/#notation\"><span class=\"s3\">https:\/\/getbootstrap.com\/docs\/4.1\/utilities\/spacing\/#notation<\/span><\/a> to add some nice margin on top of the cards<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p id=\"pcVmZui\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-953 size-full\" src=\"http:\/\/ucsbwebdev.local\/wp-content\/uploads\/2018\/11\/img_5bfefefa95497-e1543438300450.png\" alt=\"\" width=\"700\" height=\"558\" \/><\/p>\n<p><a href=\"https:\/\/codepen.io\/agrublev\/pen\/bQmxJw\">https:\/\/codepen.io\/agrublev\/pen\/bQmxJw<\/a><\/p>\n<h2>UIKit<\/h2>\n<ul class=\"ul1\">\n<li class=\"li4\"><span class=\"s5\">Add the style from <a href=\"https:\/\/getuikit.com\/docs\/installation#download\">https:\/\/getuikit.com\/docs\/installation#download<\/a> in your uikit.html<\/span><\/li>\n<li class=\"li1\">Add a navbar from <a href=\"https:\/\/getuikit.com\/docs\/navbar#content-item\"><span class=\"s3\">https:\/\/getuikit.com\/docs\/navbar#content-item<\/span><\/a> (make sure to click on markup on the second example where it has a search box)<\/li>\n<li class=\"li1\">Add a carousel from <a href=\"https:\/\/getuikit.com\/docs\/slider#content-parallax\"><span class=\"s3\">https:\/\/getuikit.com\/docs\/slider#content-parallax<\/span><\/a> go to the first visual example and click markup<\/li>\n<li class=\"li4\"><span class=\"s5\">Use this image if you want for the slides <a href=\"https:\/\/via.placeholder.com\/1600x800\/5654ad\/5634ad\/?text=_1\">https:\/\/via.placeholder.com\/1600&#215;800\/5654ad\/5634ad\/?text=_1<\/a> <\/span><\/li>\n<li class=\"li4\"><span class=\"s5\">Add 2 cards like <a href=\"https:\/\/getuikit.com\/docs\/card#header-and-footer\">https:\/\/getuikit.com\/docs\/card#header-and-footer<\/a> <\/span>\n<ul class=\"ul1\">\n<li class=\"li1\">You will need to remove the image and add grid around the two cards from here <a href=\"https:\/\/getuikit.com\/docs\/grid#child-width\"><span class=\"s3\">https:\/\/getuikit.com\/docs\/grid#child-width<\/span><\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"li1\">Now just for fun add a divider between the carousel and the cards from here <a href=\"https:\/\/getuikit.com\/docs\/divider#divider-icon\"><span class=\"s3\">https:\/\/getuikit.com\/docs\/divider#divider-icon<\/span><\/a><\/li>\n<\/ul>\n<p>Final look<\/p>\n<p id=\"EVtbJsg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-954 size-full\" src=\"http:\/\/ucsbwebdev.local\/wp-content\/uploads\/2018\/11\/img_5bfeff3625969-e1543438282246.png\" alt=\"\" width=\"700\" height=\"570\" \/><\/p>\n<p><a href=\"https:\/\/codepen.io\/agrublev\/pen\/vQVVgO?editors=1000\">https:\/\/codepen.io\/agrublev\/pen\/vQVVgO?editors=1000<\/a><\/p>\n<h2>Bulma<\/h2>\n<ul class=\"ul1\">\n<li class=\"li4\"><span class=\"s5\">Add the code <a href=\"https:\/\/bulma.io\/documentation\/overview\/start\/#starter-template\">https:\/\/bulma.io\/documentation\/overview\/start\/#starter-template<\/a> <\/span><\/li>\n<li class=\"li4\"><span class=\"s5\">Add navbar <a href=\"https:\/\/bulma.io\/documentation\/components\/navbar\/#transparent-navbar\">https:\/\/bulma.io\/documentation\/components\/navbar\/#transparent-navbar<\/a> <\/span><\/li>\n<li class=\"li4\"><span class=\"s5\">Use this code for the carousel <a href=\"https:\/\/wikiki.github.io\/components\/carousel\/#autoplay\">https:\/\/wikiki.github.io\/components\/carousel\/#autoplay<\/a> and you will also need to add this style href <a href=\"https:\/\/cdn.jsdelivr.net\/npm\/bulma-carousel@3.0.0\/dist\/css\/bulma-carousel.min.css\">https:\/\/cdn.jsdelivr.net\/npm\/bulma-carousel@3.0.0\/dist\/css\/bulma-carousel.min.css<\/a> to make it work<\/span><\/li>\n<li class=\"li1\">Now add 2 cards from the second example in <a href=\"https:\/\/bulma.io\/documentation\/components\/card\/\"><span class=\"s3\">https:\/\/bulma.io\/documentation\/components\/card\/<\/span><\/a><\/li>\n<\/ul>\n<ul class=\"ul1\">\n<li style=\"list-style-type: none;\">\n<ul class=\"ul1\">\n<li class=\"li1\">Use the columns from here <a href=\"https:\/\/bulma.io\/documentation\/columns\/basics\/\"><span class=\"s3\">https:\/\/bulma.io\/documentation\/columns\/basics\/<\/span><\/a> and then add your own class to give them some spacing from each other and the carousel!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>The final product should look like this<\/p>\n<p id=\"ALDRYJQ\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-955 size-full\" src=\"http:\/\/ucsbwebdev.local\/wp-content\/uploads\/2018\/11\/img_5bfeff942dd2c-e1543438261899.png\" alt=\"\" width=\"800\" height=\"551\" \/><\/p>\n<p><a href=\"https:\/\/codepen.io\/agrublev\/pen\/XyxxxQ?editors=1100\">https:\/\/codepen.io\/agrublev\/pen\/XyxxxQ?editors=1100<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Extra Credit \/ Additional Practice<\/h2>\n<p>Improve the websites as they can all use a container to wrap them at the very least. Also maybe try to get the javascript working? Should be as easy as adding the styling \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In class framework assignment Getting a simple website built with 3 frameworks should be a great introduction! Directions Create a new Visual Studio folder\/project Create 4 HTML files index.html Which should only contain 3 links to the other 3 HTML files bootstrap.html bulma.html uikit.html Bootstrap Go to this page http:\/\/getbootstrap.com\/docs\/4.1\/getting-started\/introduction\/#css\u00a0 and get the stylesheet tag [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,5,8],"tags":[],"class_list":["post-951","post","type-post","status-publish","format-standard","hentry","category-css","category-exercises","category-html"],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=951"}],"version-history":[{"count":0,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=\/wp\/v2\/posts\/951\/revisions"}],"wp:attachment":[{"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ucsbwebdev.fzilla.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}