University Projects

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...

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...

I attended the Graduate Recruitment and Placements Fair at the University of Hertfordshire. At the Workfest there were three companies that Jo recommended we speak with, as they were interested in students studying Digital Media Design. These companies included: DMS ( http://www.dmsukltd.com/ ) DMS were looking for students in all different courses. The position that related most to my course was applying to be a motion graphic designer. This fits really well with the course because of our upcoming motion graphic live brief with Ocado. DMS wanted individuals with basic knowledge of Adobe After Effects and Premiere Pro, which I will be learning within the next few months. They stated that they were unsure whether they were accepting internships/placements, but if they were; they would be publicised in January. DMS' Contact Details Salmon Limited  (https://www.salmon.com/en/) I had quite a negative experience with Salmon.  I immediately got the impressi...

Today's session on SASS & Node.js After downloading Node.Js we checked that it had installed using the terminal. By entering "node --version" this outputs the version that is installed. We then needed to install Sass. On windows using "npm install sass -g" and on Mac using "sudo npm install sass -g" because without entering my password, I didn't have permission to download sass. This successfully installed Sass. SASS allows us to import files and both SCSS and SASS allow us to use variables unlike CSS. We can use the terminal to convert a SCSS file into a CSS file. I made a few mistakes however I managed to convert the SCSS file into a CSS file using the terminal. The "cd command and the file path of the folder" allowed the terminal to find the folder. The command "ls" displayed the contents of the folder. The command "sass test.scss test.css" converted the scss file into a css file w...

Mar showed us how to use P5.JS. We first created a square using rect(30, 20, 55, 55);   Then we filled in the square and the line colour using stroke(255, 0, 0) and fill(0, 255, 0); We then created an ellipse using  ellipse(mouseX, mouseY, 100, 55);   The ellipse followed our mouse due to using mouseX and MouseY as values. By removing the background, when the ellipse followed my mouse it created a pattern. We then created a conditional statement that stated: if(mouseY<200) {   ellipse(mouseX, mouseY, 100, 55);   } else {    rect(mouseX, mouseY, 100, 55);   } This means that when the mouse is less than 200 on the Y-axis (halfway), the ellipse would follow the mouse, otherwise the rectangle would follow the mouse instead. I created my own conditional statement which states:   if(mouseY<200) {   ellipse(mouseX, mouseY, 100, 100);       fill(100, 250, 100); ...

We started the hackathon with simple coding principles in HTML and CSS. Mar Presenting (Stadon, 2018) We began to learn more about jquery using Javascript and learnt to link this using a local file or using a link. I decided to use the local version that I saved in my js/lib folder because this means that I can work on my code without having to use the internet. Mar showed us how to use Google Fonts in our code, which allows us to be original with our fonts as there's a large amount to choose from.  https://fonts.google.com/ I chose the font "Mali" from the Google Fonts website and put this into my code. Google Fonts Website Google Font "Mali" being used in my code Mar also showed up how to use animations which is a new feature that has been added to CSS3. Unfortunately not all animations are compatible in different browsers so this may need to be taken into account. We learnt that z-index is used for depth and layering. B...

I took the SASS course in preparation for the Hackathon starting on October 16th. I completed this course with 100% completion. I found this course really interesting as Sass is an extension of CSS. This course showed me how to condense down CSS classes/ID's so that I wasn't repeating code unnecessarily. It introduced using variables as a way of storing data and passing this data as an argument using a Mixin. I made some notes on topics I found interesting/didn't know.