100 Days of Code: Day 3

Home / Technology / Web Development / 100 Days of Code: Day 3
Today I finished the layout and navigation for the MysticMail conceptual app landing page. It's going to be very colorful and fun, and I am extremely excited about it!

[vc_row][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%223%22%2C%22color%22%3A%22blue%22%7D%5D” title=”100 Days of Code, Round 1″ percentage_value=”27″ title_color=”#3e3e3e” bar_color=”#1b7da9″ track_height=”20px” track_color=”#e7f6fc” m=”20″ extra_class=”” units=”%”][vc_column_text]

Goals For Today:

  • Knock out a big part of the App Landing Page project – set up the overall layout nav bar and (nonfunctional) login area

The Good:

First and foremost, for the second day in a row, I actually accomplished everything I set out to do. I knew I would want to do a little bit of planning for the app landing page. I’d gotten started yesterday but didn’t really have anything major finished. Today I finished working out my plan for what the page will be centered around, found and modified a logo for the conceptual app, and set up the overall layout and navigation for the page.

I also spent a decent amount of time re-learning how to use GitHub and GitHub Desktop. I used it years ago before the Desktop application was as easy as it is now and never quite got the hang of it. Of course, these were always group projects that someone else had already started, so I was terrified of somehow breaking something or – my luck – deleting everything. Now that it’s just my own skin on the line, figuratively speaking, I don’t mind messing around with it.

Truth be told, I would recommend that everyone play around with software and technologies that they aren’t familiar with in their own free time. Not only will you learn a lot, but you will be far more confident if there is ever a time that you have to use that software/tech or something similar. It’s a lot easier to learn when you don’t have the pressure of someone expecting you to pick it up quickly or needing you to know it yesterday.

The Bad:

Today was such a massive success that I really don’t have much to say in terms of things I would change or disliked. I am even starting to like Bootstrap a bit more. However, I will say this…

I am still trying to get the hang of the names for different Bootstrap classes. I like to be very specific when I name my classes, so referencing something as .mb-2 is completely foreign to me. I’ll get there eventually.

Back when I was in college, I did a bit of programming in VB.NET and Java. Classes always seemed to be rather intuitively named but I still created cheat sheets for all the classes, functions/methods, and variables that I used. I may need to do that again if I plan on using Bootstrap or another toolkit in the future. I’ve never done it with web development, but I can’t see it hurting as long as I don’t go too overboard with my planning and note-taking.

Notes/Comments:

As I mentioned, today I worked on the app landing page. I decided to base it on a conceptual app called ‘MysticMail’ because I am always looking for a new mobile mail app and I’d love to find one that is as fun and colorful as I imagine this one to be.

Mystic Mail Square Logo

Speaking of fun and colorful, if you check out my live page for this project, be prepared to be punched in the face with color. That’s the aesthetic that I am going for because it makes sense for the app that I have in mind. Plus, if you can’t tell by my page and Color My Life, I love colors.

I really took my time setting up my navigation menu. It is collapsible, so it’s much more mobile-friendly than the last mini project I did yesterday.

MysticMail Mobile Navigation Menu

MysticMail Full Navigation Menu

I don’t plan to implement a functional login or registration right now but this is something I will probably add later. I also plan to mess around with the navigation bar colors a little more, but I didn’t want to spend too much time on that until I decided what I was doing with the rest of the page.

As for the body of the landing page, I decided to create five containers to contain four sections of content and a footer at the bottom. I styled everything in an external CSS document because I knew it was going to get messy and I like keeping everything separate as much as possible. I haven’t added any content to the body yet, but I plan to start sourcing images and planning the rest of the content tonight.

HTML
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>MysticMail</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js

<!-- External CSS For MysticMail -->
<link rel="stylesheet" href="MysticMail.css">

</head>

<body data-spy="scroll" data-target=".navbar" data-offset="80">

<div class="container">

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">

<a class="navbar-brand" href="#"><img src="images/Mystic_Mail_Horizontal.png" alt="MysticMail" height="50px"></a>

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse justify-content-end" id="navbarToggle">

<ul class="nav mx-auto nav-pills">

<li class="nav-item-active">
<a class="nav-link" href="#topContainer">Home</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#descriptionContainer">Description</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#featuresContainer">Features</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#downloadContainer">Download</a>
</li>

</ul>

<form class="form-inline my-2 my-lg-0 float-right">

<label class="sr-only" for="loginUsername">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="loginUsername" placeholder="Username (Email)">

<label class="sr-only" for="password">Name</label>
<input type="password" class="form-control mb-2 mr-sm-2" id="password" placeholder="Password">

<button type="submit" class="btn btn-primary mb-2">Login</button>

<button type="submit" class="btn btn-secondary mb-2 ml-2">Register</button>

</form>

</div>

</nav>

</div>

<div id="topContainer" class="container-fluid">

...

</div>

<div id="descriptionContainer" class="container-fluid">

...

</div>

<div id="featuresContainer" class="container-fluid">

...

</div>

<div id="downloadContainer" class="container-fluid">

...

</div>

<div id="footerContainer" class="container-fluid bg-light" style="height: 500px;">

...

</div>

</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */

.grad1 {
background: #e6368b; /* Old browsers */
background: -moz-linear-gradient(top, #e6368b 1%, #56c3f0 100%); /* Old Firefox */
background: -webkit-linear-gradient(top, #e6368b 1%,#56c3f0 100%); /* Old Chrome & Old Safari*/
background: linear-gradient(to bottom, #e6368b 1%,#56c3f0 100%); /* Newer Browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6368b', endColorstr='#56c3f0',GradientType=0 ); /* IE */
}

.grad2 {
background: #56c3f0; /* Old browsers */
background: -moz-linear-gradient(top, #56c3f0 1%, #AAC928 100%); /* Old Firefox */
background: -webkit-linear-gradient(top, #56c3f0 1%,#AAC928 100%); /* Old Chrome & Old Safari*/
background: linear-gradient(to bottom, #56c3f0 1%,#AAC928 100%); /* Newer Browsers */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56c3f0', endColorstr='#AAC928',GradientType=0 ); /* IE */
}

#topContainer {
background-color: #e6368b;
height: 500px;
margin-top: 80px;
}

#descriptionContainer {
background-color: #56c3f0;
height: 500px;
}

#featuresContainer {
background-color: #AAC928;
height: 500px;
}

#downloadContainer {
background-color: #F2E426;
height: 500px;
}

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Important Links

[/vc_column_text][/vc_column][/vc_row]

Let's chat!

%d bloggers like this: