20170910_111315_ResizeHello, my name is Melissa and I just graduated with my masters in Computer Science. I have always dreamed of being a web developer and now I am so close I can taste it. As I begin applying for web development jobs I will also be working on some personal projects to beef up my portfolio as well as work on some of my skills. I’m creating this blog to document my journey from student to professional web developer (fingers crossed). I will be uploading different projects I’m working on, any interesting things that I learn, and different online courses and resources that I find. I hope that this blog will be helpful to others that are looking to improve their web development skills, as well as a good way for me to document my own journey.

Thank you for visiting my site. I hope that you take a chance to look around and see what I’ve done so far.

Daily UI Challenge Day 004

The prompt for Day 4 was “Calculator”. I decided to do a simple BMI calculator for this challenge. I have been on my own weight loss journey for a little over a year now, so BMI calculators are something that I have personally used a lot recently. There are many different ways to calculate BMI, but I decided to stick with the most basic formula, which is Weight(kg)/Height^2(cm).

From stage one of this design I envisioned creating the entire page including the graphics using pure CSS. In fact, the reason I am posting Day 4 so late is because I knew that I wanted to implement the design, so I waited until I had a chance to site down and code it.

The design I created in Adobe XD can be seen here:

Custom Size – 1

And here is a GIF of the implemented design:


See the Pen BMI Calculator by Melissa Dagley (@mdagley) on CodePen.

I used HTML, CSS, and JavaScript to make the completed app. It came together pretty quickly, I’m sure there is more that I could do to improve it, but I am happy with it as a creative exercise.


Daily UI Challenge Day 002 + 003

Yesterday kind of got away from me, so day I am posting about days 2 and 3 for the Daily UI challenge. Day 2’s prompt was “Credit Card Checkout” and Day 3’s prompt was “Landing Page”.

For Day 2 I designed a payment flow that could work for web or mobile with some simple tweaks. The mock up I made is for web, but for mobile I would simply have a small tab for the cart in the corner of the screen.

Custom Size – 1

The idea is that if the cart tab is pressed then the cart will slide open and take up the open area of the page. The input sections are all divided up and when one section is done it closes and the next one opens. This allows us to keep scrolling to a minimum. I like the look of other credit card payment screens where you fill in the information on a graphic credit card, see the examples below, but I feel like it’s a little overdone, so I opted to lay the fields out in a similar fashion to a credit card without actually drawing a credit card on the screen.

For Day 3 I decided to design a landing page for a fake bakery. I focused on finding a high quality background image and creating a simple typographic design. I chose to go with dark, warm colors to make the page feel cozy and home-y.

Custom Size – 1

So far I am having a lot of fun with this UI challenge. It is a much different mindset focusing on design first. My approach for this project has been to keep things fun and laid back and not try to aim for perfection, so I have been trying to finish each design pretty quickly and not agonize too much over the details.

Mama Mia’s Pizzeria Stage 4 – Branding Part 2

In preparation for the menu page design for the website I decided to tackle redesigning the pdf version of Mama Mia’s menu. The current menu is dated and hard to read and I really wanted the new version to match the branding that I’ve already created for the website redesign. This is my first time designing a menu, and the first time doing any real graphic design work in years, but I think I was able to achieve my goals.

My goals for this redesign:

  • Modernize the menu
  • Improve readability
  • Match the design to the branding I’ve created

Here are some side by sides of the original design and my redesign.

For the cover, I decided to keep things very simple and I stuck very close with the design that I used on the website. This cover is essentially the header that I used across the website.

For reference, here is a screenshot of the website beside the menu cover.

The next page was very crowded, so I ended up breaking it up into two pages to improve the readability. The last section, with the Stromboli and Calzones is from page 4 in the original menu, but I thought it fit better here.

The pizza page contained a lot of information, and I felt like the toppings list was not user friendly. I decided to break the toppings down by category and give them more space on the page.

I am really pleased with how the last page came out. Because I moved the Stromboli and Calzones Section I was able to have plenty of space on the last page for a large image. The sections on this page were all small a easy to manage compared to some of the other pages of the menu.

I also decided to make a final page for the menu, I guess it would be the back cover for a print menu, although I did not create spreads, just individual pages since I knew I was intending this for web use only. I thought that this would be a more appropriate place to list the locations/hours/phone/etc. Originally this information was on the front cover.


You can view the full PDF [HERE].

Mama Mia’s Pizzeria Stage 5 – Coding Part 5

I’m trying to wrap up this project, so rolling full steam ahead I designed and coded the about page. This was a very simple page so I knew I would be able to put it together quickly. The existing site does not have an about page, so I used some information that is included at the bottom of their existing menu. Of course if I was actually creating this page to be used by the business I would find out more information about the history of the company itself and a company statement.

I skipped straight to the coding with this one since I knew I was planning to keep things very simple.

Here is a screenshot of the completed page.


I’m sure I will still tweak the design a little, I did throw this together fairly quickly, but it’s not an area of the site that I’m planning to concentrate much time on. The next big design challenge will be the menu page. I haven’t completely decided how I want to approach it yet, but I do know that I want to have a web version of the menu available, unlike the current site which only provides a PDF. I’m sure you will hear from me again before the weekend is over.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

Mama Mia’s Pizzeria Stage 5 – Coding Part 4

Over the past couple of days I worked on designing and coding the locations page. This was my first time working with the google maps API, but I have worked with other google APIs in the past, so it was pretty simple to figure out the basics.

I started out by doing some thumbnail sketches of possible layouts.


I toyed with the idea of having one map with both locations, but the two locations were far enough away that you couldn’t see much detail about the cross streets or nearby businesses on one map. Because of this I decided to go with one map for each location.

I decided to keep things pretty simple, but I could always go back and add more features. I kind of the like the idea of the last sketch where a map with both locations is displayed and then a div with more specific information would be displayed once you selected a location.

I skipped the prototyping stage for this page and went straight into coding, so it came together pretty quickly.

Here is a screenshot of the completed page.


I am happy with how the page turned out, although I have not done much testing different screen sizes, so there are some more tweaks that will need to be made.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]




React & GraphQL Web App

I recently went through the application process for a local start up, and while I didn’t get the job, I did get the chance to try out some tools that I’ve never used before.

The coding challenge was to create a single page app using react that would list all of the star wars movies, the list of characters in each movie, and a profile page for each character.

This challenge was my first time ever building a full react web app, I had previously played around with building components a little bit on code pen.

The back end of this site was a GraphQL server, and used GraphQL and Apollo with react to query the data. This was also my first time working with GraphQL and Apollo. Learning to write queries for GraphQL didn’t take me too long, it reminded me of SPARQL, which is a graph-based query language for semantic web databases.

With this project I also played around some with mobile design for the first time. I’ve always tried to design my pages to be responsive to screen size, but of course responsive and mobile-friendly are not the same thing. I used media queries for the first time to cater the content to the screen size. So instead of displaying a four column grid of movies/characters there is a single column display for small screens.

Here are some screenshots of the final product. This was created over the course of about 4-5 days.


And here are some simulated iPhone X screen shots.


I hosted the app online using heroku, and it can be viewed [HERE]

The github repo for this app can be found [HERE]

Mama Mia’s Pizzeria Stage 5 – Coding Part 3

To finish up the main functions of the contact page I decided to go with a jQuery plug-in to perform the validation functions for my contact form, and I’ve used a php file to process the posted data.

Here is a screenshot of the contact form, it hasn’t changed since my last post.



The validation rules for the form are fairly simple. The first name and last name fields just need a minimum length of 1 character.

The email field should contain a valid email address.


And the comment box should have a minimum of 100 characters.


All fields in the form are also required before the form can be submitted.


Once the form is successfully submitted an email containing the data will be received.


There are still some stylistic changes that I would like to make, especially for the email that is sent. I also plan to use Ajax when processing the form so that I can display a success message directly on the page rather than using a pop up window. Another thing I would like to add is a confirmation email for the user. These changes will probably not take place until I’ve finished some more functionalities/pages for the site.

Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]




Mama Mia’s Pizzeria Stage 5 – Coding Part 2

Moving right along with this project, I have completed the basic coding for the contact page. Of course the main component for this page is the contact form. I have laid out all of the form elements, now the next step will be to set up the input validation.

I created a quick layout in Adobe XD:

Web 1920 – 5

I stuck pretty closely with this layout when coding, though I did change the submit button. I may still add some more elements to the page as it seems a little bit plain at the moment, but we’ll see.

Here is a screenshot of the current look of the page:


Of course you can still see the live version of the site [HERE]

and the Git Repo [HERE]

I have made many forms before, both for personal projects and school, but one thing I did come across while making this page was a CSS property I have never seen before, which is the box-sizing property. The box-sizing property allows you to set elements to calculate their size including padding and borders. So if you set an element to be 250 px wide, and have 5px of padding and a 1 px border, the overall width of the element will still be 250, rather than 262px.

Here is an illustrated example:

Without box-sizing:


With the box-sizing property set to border-box the total width for the element will be the size you set it to, so if you set a width of 250 px the total width will be 250 px.

With Box-sizing:


For more information you can read the W3 Schools article on the box-sizing property [HERE].


Mama Mia’s Pizzeria Stage 5 – Coding Part 1

Over the past couple of days I began coding the homepage for my Mama Mia’s Pizzeria site. I started out coding traditionally, the way I normally do, using pure HTML and CSS. Having created a mock-up of the different sections of the site and figuring out how I would layout the divs, it was fairly simple to create the code for the page.


Overview of AI file


Header Layer


Navigation Bar Layer


Body Layer


Footer Layer

I initially just worried about the structure of the page, making everything look just right, getting the design right. Then I moved on to some of the bells and whistles so to speak. The big task for this page was the photo gallery. This was my first time coding a photo gallery from scratch. I wanted to see what I could come up with, without looking at anybody else’s existing gallery plug-ins. I did look at the W3C article on automatic slideshows to figure out the automation part. They executed their slideshow by creating multiple divs and then only displaying the active div, which is something I have done in the past, most recently for a data mashup visualization[GitHub] I created. For my slideshow I created one div, and set the background image based on the class assigned to the div, so essentially the buttons just change the background image for the div, and the carousel loops through the different backgrounds.

The next major step I took in the project was to look into templating frameworks. From the articles I found, nunjucks sounded like the best choice, so I followed a couple tutorials to get an idea of how it worked, and then I converted my existing code into a nunjucks project. There was a bit of a learning curve because I have never used gulp before, but I can already see that it will save me a lot of time as I begin coding the rest of the site. In the past I have handled “templates” by converting all of my pages to php and using includes for reoccurring sections of code.

Nunjucks is much better for this though for several reasons. One big reason is the ability to create a layout template which includes everything from the HTML tags and metadata to the navigation bar and footer. With php includes I would not be able to include the basic layout because you can only include uninterrupted chunks of code. I would also have to include the navigation and footer separately for the same reason. With nunjucks the code I write for each new page has been reduced down to just the body content.


nunjucks code for the index page


snippet from the nunjucks layout code

Another advantage to nunjucks is that I can preview my website without having to run a server, php of course is a server side language so in order to view the site you need to run it on a server. The workflow is much easier for me with nunjucks. I have just barely scratched the surface with can be done I know, but I look forward to learning more as I move forward.

The tutorials that I looked through were:

Nunjucks: A JavaScript Template Engine – Medium.com

How to Modularize HTML Using Template Engines and Gulp – Zellwk.com

I have started a github repository for this project located [HERE].

A live version of the site can be found [HERE].

Here are some screenshots of the site so far: