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  and get the stylesheet tag to add to your page
  • Add the navbar component to the top of your page from http://getbootstrap.com/docs/4.1/components/navbar/#nav
  • Now add a carousel from http://getbootstrap.com/docs/4.1/components/carousel/#with-indicators
  • Change the active slide with this one instead http://getbootstrap.com/docs/4.1/components/carousel/#with-captions
  • And use this image https://via.placeholder.com/1600×800/5654ad/fff/?text=Angel+Grablev
  • Now add a couple of cards from http://getbootstrap.com/docs/4.1/components/card/#using-grid-markup 
  • Use the spacing classes from here https://getbootstrap.com/docs/4.1/utilities/spacing/#notation to add some nice margin on top of the cards

https://codepen.io/agrublev/pen/bQmxJw

UIKit

• Add the style from https://getuikit.com/docs/installation#download in your uikit.html
• Add a navbar from https://getuikit.com/docs/navbar#content-item (make sure to click on markup on the second example where it has a search box)
• Add a carousel from https://getuikit.com/docs/slider#content-parallax go to the first visual example and click markup
• Use this image if you want for the slides https://via.placeholder.com/1600×800/5654ad/5634ad/?text=_1
• Add 2 cards like https://getuikit.com/docs/card#header-and-footer
  • You will need to remove the image and add grid around the two cards from here https://getuikit.com/docs/grid#child-width
• Now just for fun add a divider between the carousel and the cards from here https://getuikit.com/docs/divider#divider-icon

Final look

https://codepen.io/agrublev/pen/vQVVgO?editors=1000

Bulma

• Add the code https://bulma.io/documentation/overview/start/#starter-template
• Add navbar https://bulma.io/documentation/components/navbar/#transparent-navbar
• Use this code for the carousel https://wikiki.github.io/components/carousel/#autoplay and you will also need to add this style href https://cdn.jsdelivr.net/npm/bulma-carousel@3.0.0/dist/css/bulma-carousel.min.css to make it work
• Now add 2 cards from the second example in https://bulma.io/documentation/components/card/

• • Use the columns from here https://bulma.io/documentation/columns/basics/ and then add your own class to give them some spacing from each other and the carousel!

The final product should look like this

https://codepen.io/agrublev/pen/XyxxxQ?editors=1100

Extra Credit / Additional Practice

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 🙂