GIT, HTML & CSS

Assignment:

  • Project Management
  • Build a personal WEBSITE describing you and your final project
  • Add weekly report on the website
  • Set the GIT environment
  • Push all the website files to the GIT repository

To create an HTML website I will be using    which is a very nice tool to work with CSS + HTML. 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.

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!

For me, the design is a very important criteria, because I want it to look NICE. I found a very cool template at StoneWork which I changed according to my needs. Another online tool, which I was using is HTML Cleaner, a real time online redactor which transforms the WORD text into HTML code. Someone may call it cheating, but this really makes the life easier and saves a lot of time :p

My final HTML code looks something like this:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FabLab Ka-Li Digital Fabrication</title>
<meta name="keywords" content="" />
<meta name="description" content="Best Site EVER" />
<link href="http://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="font-awesome.css" rel="stylesheet" type="text/css" media="all" />

</head>
<body>
<div id="header-wrapper">
	<div id="header" class="container">
		<div id="logo">
			<h1><a href="index1.html">Albot Dima</a></h1>
		</div>
		<div id="menu">
			<ul>
				<li class="active"><a href="#" accesskey="1" title="">FINAL Project</a></li>
				<li><a href="#copyright" accesskey="2" title="">About ME</a></li>
			</ul>
		</div>
	</div>
	<div id="banner" class="container">
		<div class="title">
			<h2>Welcome to My WORLD</h2>
			<span class="byline">The Universe of Learning</span>
		</div>
		<ul class="actions">
			<li><a href="#three-column" class="button">Let's Start</a></li>
		</ul>
	</div>
</div>
<div id="wrapper">
	<div id="three-column" class="container">
		<div id="title1" class="title">
			<h2>Fundamentals of Digital Fabrication</h2>
			<span class="byline">Here you can find weekly documentation and step by step instruction of each assigment in the Digital Fabrication course</span>
		</div>
		<div class="boxA">
			<span class="fa fa-gitlab"></span>
           <p1>GIT, HTML & CSS</p1><p>Create a website using basic HTML tags + CSS, and publish the page using GIT Workflow.</p>
			<a href="GIT_HTML_CSS.html #title2" class="button button-alt">More Info</a>
		</div>
		<div class="boxB">
			<span class="fa fa-object-group"></span>
			<p1>2D design & Laser cutting</p1><p>Create a basic 2D graphics design, and cut the design using laser cutting technology.</p>
			<a href="#" class="button button-alt">More Info</a>
		</div>
		<div class="boxC">
			<span class="fa fa-cubes"></span>
			<p1>3D design & 3D printing</p1><p>Make a parametric 3D design, generate the GCode of the model, and 3D print the 3D model.</p>
			<a href="#" class="button button-alt">More Info</a>
      </div> 
      <div class="boxD">
			<span class="fa fa-cut"></span>
			<p1>CNC Machining</p1><p>Make a 3D design suitable for CNC machine, generate the GCode of the model, and engrave the piece using the CNC technology.</p>
			<a href="#" class="button button-alt">More Info</a>
		</div>
        <div class="boxE">
			<span class="fa fa-microchip"></span>
			<p1>Electronics design & production</p1><p>Design a board, engrave a pre-designed PCB using Fab Modules, solder all the components, test and program the board.</p>
			<a href="#" class="button button-alt">More Info</a>
		</div>
		<div class="boxF">
			<span class="fa fa-usb"></span>
			<p1>Embedded programming & I/O devices</p1><p>Basics of Arduino programming language, develop a simple sketch to work with I/O devices, test and debug the sketch using real hardware.</p>
			<a href="#" class="button button-alt">More Info</a>
      </div> 
     </div>
    </div>
<div id="welcome">
	<div class="container">
		<div class="title">
</div>
</div>
</div>
</body>
</html>



This is an overview of the main page of the website. I created an individual page for each topic covered, which basically have the same <header> and <footer>, except the <body> content is different. From the main page, I linked all the buttons to the corresponding pages, so when I press the button, I have the impression that I am still on the same page, because the header and footer remain the same.

My final CSS code looks something like this:

	html, body
	{
		height: 100%;
	}
	
	body
	{
		margin: 0px;
		padding: 0px;
		/*background: #111111;*/
		font-family: 'Didact Gothic', sans-serif;
		font-size: 12pt;
		font-weight: 200;
		color: #FFF;
	}
	
	
	h1, h2, h3
	{
		margin: 0;
		padding: 0;
	}
	
	p, ol, ul
	{
		margin-top: 0;
	}
	
	ol, ul
	{
		padding: 0;
		list-style: none;
	}
	
	p
	{
		line-height: 180%;
	}
	
	
	a:hover
	{
		color: aqua;
	}
	

	.container
	{
		overflow: hidden;
		margin: 0em auto;
		width: 1200px;
	}
	
/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

	.button
	{
		display: inline-block;
		padding: 1em 2em 1em 2em;
		letter-spacing: 0.10em;
		margin-top: 0em;
		padding: 1.40em 3em;
		border: 2px solid rgba(255,255,255,1);
		border-radius: 6px;
		text-decoration: none;
		font-weight: 700;
		font-size: 1em;
		color: #FFF;
	}
	
	.button-alt
	{
		padding: 1em 2em;
		border-color: rgba(0,0,0,.8);
		color: rgba(0,0,0,.8);
	}
	
/*********************************************************************************/
/* 3-column                                                                      */
/*********************************************************************************/

	.boxA,
	.boxB,
	.boxC
	{
		width: 384px;
	}

	.boxA,
	.boxB
	{
		float: left;
		margin-right: 20px;
	}
	
	.boxC
	{
		float: right;
	}

.boxD,
.boxE,
.boxF
{
    width: 384px;
    padding-top: 80px;
}

.boxD, .boxE {
    float: left;
    margin-right: 20px;
}

.boxF {
    float: right;
}

/*********************************************************************************/
/* Heading Titles       ALL                                                         */
/*********************************************************************************/

	.title
	{
		margin-bottom: 3em;
	}
	
	.title h2
	{
		font-size: 2.7em;
	}
	
	.title .byline
	{
		font-size: 1.3em;
		color: rgba(255,255,255,0.60);
	}
#title1 {
   margin-bottom: 1em;
}

#title2 {
    text-align: center;
    margin-left: 8em;
}
/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#wrapper
	{
		position: relative;
		padding: 3em 0em 7em 0em;
		background: #FFF;
	}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header-wrapper
	{
		position: relative;
		padding: 2em 0em 4em 0em;
		background: #111111 url(images/header-bg.jpg) no-repeat center;
		background-size: cover;
	}

	#header
	{
		position: relative;
		padding: 5em 0em;
	}

/*********************************************************************************/
/* Logo    (Albot Dima)                                                                      */
/*********************************************************************************/

	#logo
	{
		position: absolute;
		top: 3.6em;
		left: 0;
	}
	
	#logo h1
	{
		font-size: 2.6em;
		color: #79C255;
	}
	
	#logo a
	{
		text-decoration: none;
		color: rgba(255,255,255,1);
	}

/*********************************************************************************/
/* Menu    (ABOUT ME)                                                                      */
/*********************************************************************************/

	#menu
	{
		position: absolute;
		top: 4.5em;
		right: 0;
	}
	
	#menu ul
	{
		display: inline-block;
	}
	
	#menu li
	{
		display: block;
		float: left;
		text-align: center;
	}
	
	#menu li a, #menu li span
	{
		padding: 1em 1.5em;
		letter-spacing: 1px;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 0.8em;
		color: rgba(255,255,255,0.80);
	}
	
	#menu li:hover a, #menu li.active a, #menu li.active span
	{
        color: aqua;
	}
	
	#menu .active a
	{
		border: 2px solid rgba(255,255,255,1);
		border-radius: 6px;
		color: rgba(255,255,255,1);
	}
	
/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

	#banner
	{
		padding-top: 10em;
		text-align: center;
	}
	
	#banner .title h2
	{
		font-size: 4em;
        
       
	}
	
	#banner .title .byline
	{
		font-size: 2em;
	}
	
	#banner .button
	{
		margin-top: 2em;
		padding: 1.40em 3em;
		border: 2px solid rgba(255,255,255,1);
		border-radius: 6px;
		font-weight: 700;
		font-size: 1em;
}

/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

	#copyright
	{
		overflow: hidden;
		padding: 1em 0em;
		border-top: 1px solid rgba(0,0,0,0.08);
	}
	
	#copyright p
	{
		text-align: center;
		font-size: 1em;
		color: rgba(255,255,255,0.3);
	}
	
	#copyright a
	{
		text-decoration: none;
		color: rgba(255,255,255,0.6);
	}

/*********************************************************************************/
/* Welcome                                                                       */
/*********************************************************************************/

	#welcome
	{
		position: relative;
		padding: 1em 0em 1em 0em;
		background: #111111 url(images/header-bg.png) no-repeat center;
		background-size: cover;
		text-align: center;
	}
	
	#welcome .container
	{
		width: 1000px;
		padding: 0px 100px;
		color: rgba(255,255,255,0.8);
	}
	
	#welcome a
	{
		color: rgba(255,255,255,1);
	}


/*********************************************************************************/
/* Extra                                                                         */
/*********************************************************************************/

	#three-column
	{
		text-align: center;
		color: rgba(0,0,0,0.6);
	}


	#three-column .fa
	{
		display: block;
		padding: 1em 0em;
		color: rgba(0,0,0,1);
		font-size: 2em;
	}
	
	#three-column .title h2
	{
		font-weight: bold;
		color: rgba(0,0,0,0.8);
	}

	#three-column .title .byline
	{
		text-align: center;
		color: rgba(0,0,0,.5);
        
	}

#three-column p1 {
    font-weight: bold;
    font-size: 20px;
		color: rgba(0,0,0,0.8);
}

/*********************************************************************************/
/* Articles                                                                      */
/*********************************************************************************/

#article1 {
    float: left;
   color: black;
    position: relative;
    width: auto;
}

.GIT {
position: relative;
    padding: 0em 5em 0em 5em;
    font-size: 14pt;
    }

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: scroll;
  width: 1150px;
  padding: 5px;
  background-color: #eee;
  width: 150px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 500px;
    font-size: 10pt;
}
code {
   font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
    background-color: #eee;
    font-size: 12pt;
    
}

As you may probably noticed, I am using some cool vector icons, which I downloaded from Font Awesome. They are great because can be easily cutomized using CSS, and give a great impression about the overall design of the website. The main font used for the site content, the titles, and main menu is called Didactic Gotic, made by Google Fonts, which I just included as a link in my HTML Page.

While creating this Weekly Documentation, I decided to post a screenshot of my Brackets Environment:



Now, let's GIT it!

After creating my website, it is time to push it to the GITLAB's repositories. I downloaded the    and using some simple comands, I pushed my website on the main branch.

Commands used:

history                                                           - shows the history of commands
ls                                                                - shows info about the directory you are in
cd [foldername]                                                   - goes to folder
pwd                                                               - shows the path you are in
mkdir [foldername]                                                - creates a new folder
git status                                                        - shows status of folder in relation to linked project
git clone git@gitlab.hsrw.org:Albot.Dumitru/Albot.Dumitru.git     - used to make a local copy of the repository (cloning)
git add [filename] or -A                                          - adds files changes in your working directory to your index
git commit -m "message"                                           - takes all of the changes written in the indexy
git push origin master                                            - commited files will be updated in master