Posts

Showing posts from October 18, 2018

Hackathon: Day 3 - Node.JS

Image
Using the terminal we installed Heroku by typing the command, "sudo npm install heroku -g". To make sure that git was installed we tested this by typing the  command, "git --version" As git wasn't installed in my computer, the terminal requested the install which I accepted. After the install finished, I typed the command, "git --version" again which confirmed that git was installed. Following Mar's instructions, we created a demo directory using the terminal. This created the "demo" folder. We then needed to update the "package.json" file to include a start script and change the "main" property to app.js. We added the following code to app.js. In the terminal we added the following commands: $ git init $ git add * $ git commit -m 'Initial commit'   This created many modes. We logged into Heroku using the terminal. We commanded Heroku to cre

Hackathon: Day 3 - Bootstrap 4

Image
Mar showed us how we can use bootstrap to make a website layout using a grid system. Bootstrap's 5 classes: col- (extra small devices - screen width less than 576px) col-sm- (small devices - screen width equal to or greater than 576px) col-md- (medium devices - screen width equal to or greater than 768px) col-lg- (large devices - screen width equal to or greater than 992px) col-xl- (xlarge devices - screen width equal to or greater than 1200px) (W3Schools.com, 2018) These commands allow us to easily design a website for multiple screen sizes and devices. We played around with Layoutit! which is a grid editing tool for Bootstrap. It allows you to drag and drop components to create a web page and once completed you can download the HTML, CSS and Javascript that was used in creating the page. http://bit.ly/2ymEVIf We played around with Bootstrap and attempted to use the bootstrap grid system ourselves in Atom. My webpage changes when the webpage is re-size