100 Days of Code: Day 4

Home / Technology / Web Development / 100 Days of Code: Day 4
MysticMail got a new hero image today, along with a slightly modified color layout (more changes to come soon).

[vc_row][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%224%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:

  • Continue working on the App Landing Page project

The Good:

I was able to get a better idea of what I wanted to do with the page in terms of making it colorful without going insane with it. I didn’t make all the changes yet, but they are on the way soon.

I modified the top area to create a hero image complete with some text and an email app iPhone mockup that I created. I spent quite some time working on mockups before I took a step back and found some premade components that I could piece together. The end result is a cohesive phone mockup that was relatively quick to make.100 Days of Code - MysticMail Landing Hero Image

I updated the GitHub repository so you can view the update page on GitHub pages. I haven’t optimized the image to load fast yet. I’ve never done that, so it looks like that will be my first task for tomorrow.

The Bad:

I am realizing how much time I waste doing things that are completely unnecessary. I was two hours into creating phone mockups before I realized I was going completely overboard.

For future projects, I really need to learn to manage my time and tasks a little better. I thought I would be done with this project today or tomorrow, but because I keep wasting so much time, that is highly unlikely.


Today was my first Saturday of the challenge. I started working at around 9 this morning, stopped for a half-hour lunch around noon, and am just now wrapping up for the day. I think my goal for Saturdays will be around 3 hours, plus another hour or so to update my blog. On Sundays, I will aim for around 2 hours, plus however long it takes to kick out a blog post. That seems manageable at this point unless I have other plans, in which case I will adjust my schedule.

I am also going to keep my blog posts a little shorter on the weekend. Coding/blogging every day is important, but it’s just as important to spend time doing other things. Like laundry.

HTML (Hero Image)
<div id="topContainer" class="container-fluid grad1">

<div class="container" style="padding-top:130px;">

<div class="d-inline-flex p-1">

<div id="heroText" class="d-block col-5">

<h1 class="left">A New Way To <br> Reach Inbox Zero</h1>

<h5 class="left">MysticMail is a brand new conceptual mail app that will revolutionize the way you think about your inbox. </h5>

<button id="callButton" type="submit" class="btn btn-lg btn-dark mb-2">Learn More</button>


<div class="d-inline-flex p-1"><img id="topheroimg" src="images/phone2.png" alt="phone mockup 2"></div>




Important Links


Let's chat!

%d bloggers like this: