100 Days of Code: Day 4
100 Days of Code, Round 1
Goals For Today:
- Continue working on the App Landing Page project
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.
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.
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> <div class="d-inline-flex p-1"><img id="topheroimg" src="images/phone2.png" alt="phone mockup 2"></div> </div> </div>