100 Days of Code: Day 16

Home / Technology / Web Development / 100 Days of Code: Day 16
Today I flew into the land of Sparrow Photography as I began building a new portfolio website for this conceptual company, starting with a simple UI/UX design.

[vc_row css=”.vc_custom_1526680382655{margin-top: 15px !important;margin-bottom: 60px !important;padding-right: 10% !important;padding-left: 10% !important;}”][vc_column][vc_progress_bar values=”%5B%7B%22label%22%3A%22Progress%22%2C%22value%22%3A%2216%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][/vc_row][vc_row][vc_column][vc_custom_heading text=”Goals For Today:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][ultimate_icon_list icon_size=”16″ icon_margin=”20″][ultimate_icon_list_item icon_type=”custom” icon_img=”id^4091|url^https://www.blissfullemon.com/wp-content/uploads/2018/05/done.png|caption^null|alt^null|title^done|description^null”]Programming Foundations: Fundamentals course at Lynda.com[/ultimate_icon_list_item][ultimate_icon_list_item icon_type=”custom” icon_img=”id^4091|url^https://www.blissfullemon.com/wp-content/uploads/2018/05/done.png|caption^null|alt^null|title^done|description^null”]30 Days, 30 Sites: Day 1 – Portfolio: UI/UX Design[/ultimate_icon_list_item][/ultimate_icon_list][vc_custom_heading text=”The Good:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]I have been making up for my lack of productivity yesterday by being twice as productive today. I finished the Programming Foundations: Fundamentals course on Lynda.com and finally started on Day 1 of 30 Days, 30 Sites. I have no intention of trying to finish a site a day as I would much prefer quality over quantity; I want to take my time and create websites that I can be proud of and will want to expand upon to create complete, functional sites.[/vc_column_text][vc_single_image image=”5123″ img_size=”600×424″ alignment=”center” style=”vc_box_shadow”][vc_custom_heading text=”The Bad:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]Do you ever feel like there just aren’t enough hours in a day? That’s pretty much my only complaint right now. I am managing my time as best as I can, but there are only so many hours in a day.[/vc_column_text][vc_custom_heading text=”Notes/Comments:” font_container=”tag:h3|text_align:left” use_theme_fonts=”yes”][vc_column_text]For my first 30 Days, 30 Sites project, I decided to create a conceptual portfolio instead of recreating a new one for myself, especially since I literally just changed my theme and updated my portfolio layout last week.

Thus, the portfolio of Sparrow Photography was conceptualized.

Typically, what I do to begin with is begin working on branding and aesthetics, picking colors and fonts and all that fun stuff. But this time, I decided to mix it up a bit and stick with a purely black and white design (including the logo) until I have my layout completely finished and coded. Then I will modify my logo and CSS to change colors and fonts as needed.

There is one important reason that I am doing it this way. I tend to get distracted by designing a product and either never get to the creating part or start much later than I would prefer. Even then, there is a good chance that I will end up changing things up, which takes even more time. So, I am simplifying the process and not allowing myself to waste unnecessary time. Simply put, I am going to code first and play later.[/vc_column_text][vc_single_image image=”5126″ img_size=”full” alignment=”center” style=”vc_box_outline” onclick=”link_image”][vc_column_text]


The website will have one navigation bar along its left side. It will be designed to be responsive for mobile / smaller screens, displaying a much narrower collapsed menu and top logo at smaller sizes. The menu bar will be fixed so it can be easily accessed no matter where the user is at on the page.


The main portfolio area will consist of photos in a 3-column masonry layout with a narrow (approximately 20-30px) margin between photos. As this is meant to be a responsive design, the columns and images will automatically resize as the screen gets smaller.

It may be necessary to allow the photos to move to one or two columns instead of three on smaller screens, but this hasn’t yet been determined.

Notice Some Similarities?

If you have noticed that the layout of the Sparrow Photography portfolio looks eerily similar to mine, that was actually by design. I do not want it to be an exact replica of my site, by any means, but I want to challenge myself and see how I might have created some of the basic elements of my website from scratch instead of relying on a WordPress theme.[/vc_column_text][/vc_column][/vc_row]

Let's chat!

%d bloggers like this: