Project Twiist - Dev log #2 (Design)
Tags: css, javascript, html, codenewbie
Published: 2019-08-12 20:02:01

<strong>TL;DR</strong>
The first thing I have decided to start on, is the website design. This is mostly because it's my strong suit (and it's relatively easy).

<strong>DEVELOPMENT ENVIRONMENT</strong>
First off: I am using <a href="https://glitch.com/">glitch.com</a> while designing the website. Glitch is a really cool live development website/program, that allows me to edit every component of my website and then view my edit instantly in a new window. Of course, once I start coding real functionality into the website I will have to export my website and host it myself, but for now Glitch has been working perfectly.

<strong>PRELIMINARY GRAPHIC DESIGN</strong>
Although coding is a passion of mine, I really really enjoy graphic design. I am proficient, if not fluent, in Adobe Illustrator and Adobe Photoshop. This came to my benefit for this project, as it allowed me to quickly create some sample logo and design material for the website.

<i>Main Logo:</i>

<img src="https://cdn.glitch.com/a80d5193-a105-43cb-8a36-8f7eeb03d145%2Ftwiist%20logo%203d.png?v=1565327691685">

<i>Main Logo With No Effect:</i>

<img src="https://cdn.glitch.com/a80d5193-a105-43cb-8a36-8f7eeb03d145%2Ftwiist.png?v=1565327691563">

<strong>BASIC CSS, HTML & JS FOR WEBSITE</strong>
After I found the site's colors, and designed the logo, I was ready to start styling the website. I am kinda skipping over the base website HTML "design" because it is really simple, but I will outline some specifics below.

<i>Home Page</i>

<img src="https://thepracticaldev.s3.amazonaws.com/i/y1bun7p5i8zgh2vkobk7.jpg">

To fill up the home page, I used real thumbnails, titles, channel names, and view counts from <a href="https://www.youtube.com/">YouTube</a>.

<img src="https://thepracticaldev.s3.amazonaws.com/i/zrxeb7p99xk9pbom2n5y.gif">

Each thumbnail has a simple CSS animation on it, making it 'hover' upwards on cursor hover. 

<pre class="highlight jsx">
<code>
<span class="nt">div</span>.<i>videothumbnail</i>:hover {
<span class="nx">cursor</span>:<span class="k">pointer</span>;
<span class="nx">bottom</span>:<span class="k">5px</span>;
} </code>
</pre>

This simple code (<code>bottom:5px;</code>) enables me to animate the thumbnails efficiently and easily. As I've said, I am no expert, and I am self taught, but this is the way I found to achieve the look I wanted.

<img src="https://thepracticaldev.s3.amazonaws.com/i/8d6z5qv3vn2dj55tra9n.gif">

There is a navigation bar on the website that is tucked into the left side of the screen. The javascript to make it function is again, quite simple:

<pre class="highlight jsx">
<code>
<span class="k">function</span> openNav() {
  document.<span class="nt">getElementById</span>(<span class="nx">"mySidenav"</span>).<span class="nt">style</span>.<span class="nt">width</span> = <span class="nx">"250px"</span>;
  document.<span class="nt">getElementById</span>(<span class="nx">"main"</span>).<span class="nt">style</span>.<span class="nt">marginLeft</span> = <span class="nx">"250px"</span>;
}

<span class="k">function</span> closeNav() {
  document.<span class="nt">getElementById</span>(<span class="nx">"mySidenav"</span>).<span class="nt">style</span>.<span class="nt">width</span> = <span class="nx">"0"</span>;
  document.<span class="nt">getElementById</span>(<span class="nx">"main"</span>).<span class="nt">style</span>.<span class="nt">marginLeft</span> = <span class="nx">"0"</span>;
}
</code>
</pre>

I then use <code>div id="main"</code> as a container for the body of the page.

<i>Video Page</i>

<img src="https://cdn.glitch.com/a80d5193-a105-43cb-8a36-8f7eeb03d145%2Fvideo%20page.gif?v=1565639576326">

You can also see in this gif that there is a custom scroll bar and videoplayer for the website as well.

<i> Scrollbar Code: </i>
<pre class="highlight jsx">
<code>
::-webkit-scrollbar {
  <span class="nt">width</span>: <span class="nx">10px</span>;
}

::-webkit-scrollbar-track {
  <span class="nt">background</span>: <span class="nx">#f1f1f1</span>; 
}
 
::-webkit-scrollbar-thumb {
  <span class="nt">background</span>: <span class="nx">#888</span>; 
}

::-webkit-scrollbar-thumb:hover {
  <span class="nt">background</span>: <span class="nx">#555</span>; 
}
</code>
</pre>