100 Days of Code: Day 5

Home / Technology / Web Development / 100 Days of Code: Day 5
Day 5 of 100 was not the best. I'm still working on the MysticMail landing page and ran into a bit of a problem figuring out how to best set up my navigation menu to allow a separate area for alerts. Bootstrap and I are not friends today. My code duck and I will have to try harder to figure it out tomorrow.

[vc_row][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%225%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 am learning a lot more about Bootstrap classes and creating more responsive layouts. I optimized and resized the mockup image used for the hero banner. I realized there was no sense in keeping it so large as it would likely never be displayed any bigger than what it is now. I also added some responsiveness to the entire hero image and its components. Now when you resize from a large window to a smaller screen, the containers drop down so they can be displayed properly no matter the screen size. In the past, responsive designs weren’t something that I ever messed with, but now I think that it’s one of the most important aspects of your web design. Thus, I am making much more of an effort to learn.

I also modified the hero image a bit to use colors that are a little more… eye-friendly? I had been considering switching to a green-blue gradient so I tried it and actually really like it a lot.

The Bad:

Today was probably the most frustrating day, so far, in terms of trying to figure out what is going on with these Bootstrap containers. I exceeded my two-hour goal because I wanted to get it figured out before I stopped for the day. I kind of wish I would have stopped earlier because I honestly still don’t have it all worked out.

I can’t quite figure out how to get the login alert container to position itself below the navigation menu items and login form. I know how to hide it and make it visible, and even how to check to see if the email address is valid (or at least a valid format). I just can’t quite figure out the containers within the nav bar. Again, this is where it doesn’t pay to be using Bootstrap where I have such little control over the automatic behavior and properties of classes. I’m sure I will figure it out eventually. I bet I am missing something very simple and once I figure it out, I am going to feel like a real dummy.

Note: this is an embedded view of the current landing page as it is today. As a result, you may be seeing updates that haven’t been discussed yet, and some of the issues/notes may no longer apply.

Notes/Comments:

The updated HTML / CSS files are in the GitHub repository. You can also see a breakdown of the changes that were made on GitHub. The live site looks horrible right now because the navigation menu is eating into the top container and the alert container (black box with red text) is not in the right place. I know all I need to do to make it a little better is re-add the top padding to the top container, but I’m not going to today. Yes, I’m being petty like that.

You don’t have to judge me, though. My code duck is doing enough of that.

The best little code duck in the world.

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

Let's chat!

%d bloggers like this: