We are the MAKERS

Fab Academy 2017






Principles & Practices,

Project Management




Tasks:





The first impression about the Fab Academy is really great! It was my first time having a live video chat with 400+ people from all over the world. I strongly appreciate to be part of this event, and I promise to do my best and invest maximum effort to achieve great results!


The task for this week was to create a website where we can post our weekly reports and keep track of the progress. Since this is not my first experience in creating websites, I have some basic knowledge of HTML and CSS. To make my life complicated, I decided to do something more advanced and complex. I decided to build a Responsive Web Design (RWD), this allows desktop webpages to be viewed in response to the size of the device one is viewing with. So the website will automatically regulate the width of the page according to the width of the display of the device the webpage is opened on!

I also want to make my website more dynamic and include JavaScript, and some additional plugins and libraries that will make my website look AWESOME. Due to the limited time, I will try to learn more about coding on JavaScript, and during the next weeks will keep adding more and more features to my site.


To create the website I will be using    which is an open source editor which allows to work with CSS, HTML, and JavaScript. It has an option of real time preview, which is very helpful to keep track of what is going on, and have real time visualization of the website.

Another great tool which I will be using is     According to the official website, Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. When I discovered Bootstrap, it was like finding a treasure, because it makes web designing so much easier, if you know how to use it!)


So, Bootstrap can be boiled down to three main files:


Additionally, Bootstrap requires jQuery to function. jQuery is an extremely popular and widely used JavaScript library, that both simplifies and adds cross browser compatibility to JavaScript.

The grid is probably one of the most essential aspects of the framework. It’s the basis on which the entire layout is created. Beyond that, Bootstrap’s core CSS will also add helpful styling to forms, tables, buttons, lists, and images, as well as fully functioning navigation bars, while the core JavaScript will add helpful code for creating modals, carousels, alerts, popups, dropdowns, and accordions.


So in my case I added the Grid by implimenting the following code line:

        
  <div class="row"></div>

Grids are rows, that contain columns..

        
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
  </div>

So this is how I devided the body of my website. As a result, I have 3 columns and several rows.



I also made a fixed navigation bar on top by using the code navbar-fixed-top

The responsive compatibility is implimented by the meta tag content="width=device-width, initial-scale=1"


Also the <pre> tag I decided to make more interactive. As you can see, each line and tag are colored. This is due to Prettifier, An embeddable script that makes source-code snippets in HTML prettier. Its really easy to setup:


First, include the script tag below somewhere in the HTML document:

        
 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
        

Second, put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty-printed.

Another important thing is to replace < sign by & lt;


Another cool feature which I added is JavaScript. I wanted to make a smooth scroll in my website, and also add a go to Top button for convenience. Because I am not familiar with JavaScript, it took me a while, but I still made it!

I found out that there are actually many ways to do this, but because I am using Bootstrap, which has jQuery installed, I decided to use the method with jQuery.

The first thing which I did was to create a button in the HTML page.


 <a href="#" class="scrollToTop">Scroll To Top</a>
 

The next thing to do is to style the button with the following CSS.

 
 .scrollToTop {
	position: fixed;
        display: none;
	top:550px;
	right:20px;
 }

This will position the scroll to top button at the bottom right of the page which we have fixed to stay in this position. As you can see from the CSS we have set the display to be none so it will be hidden in the browser, you will see why we do this in the jQuery code.

Below is the jQuery part of this functionality, we will add an action on the scroll event to make the button appear when not at the top of the window and then make the button disappear when we are at the top of the page.

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

//Check to see if the window is top if not then display button
$(window).scroll(function(){
		if ($(this).scrollTop() > 500) {
			$('.scrollToTop').fadeIn();
		} else {
			$('.scrollToTop').fadeOut();
		}
	});

The first function is to make an animate scrolling. The second part is to display and hide the button depending on our position on the page! We display the button by using the fadeIn function to add the first bit of animation to the screen. If the scrollTop is less than 500 then we know that the window is near the top so we don't need to display the button.



And here I have my website! functional, beautiful, and dynamic:) Now, let's GIT it!


First thing I had to do is download the GIT. Because I am using Linux (Ubuntu), the easiest way of getting git installed and ready to use is by using Ubuntu's default repositories. This is the fastest method, but the version may be older than the newest version. In my case, its completely fine.

I opened the terminal and inserted the following commands:

 
 sudo apt-get update
sudo apt-get install git

This will download and install git to the system.

Now that I have GIT installed, I need to setup it. I insert the following commands:

git config --global user.name "John Jr"

git config --global user.email johnjr@example.com

git config --global core.editor nano

ssh-keygen -t rsa -C "your_email"

cat ~/.ssh/id_rsa.pub

This is what I get:


Now I have to copy the generated key, and paste it in the repository profile settings, in the SSH keys:



After I have done all the steps above, I can upload my files to the repository. I am using the following commands:

  
  git clone git@git.fabacademy.org:fabacademy2017/fablabkamplintfort.git
  
  git pull origin master
  
  git add -A
  
  git commit -m "First commit"
  
  git push origin master
  
  

The git clone command is used only once to create a local folder. Also an important remark, I should always make git pull before any commit!







© 2017 Albot Dima . All rights reserved | Albot.Dumitru@hsrw.org

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.