So, this Friday was my second Sprint Challenge, and it went a little better than the first one. This time around, the challenge covered responsive design and preprocessing. We were asked to build a small proof-of-concept website for Spacewalkers Magazine‘s marketing team. Design files for desktop and mobile views were provided, and much of the homepage was already coded. We had to finish the navigation, header and the mobile styles.

For Minimum Viable Product (MVP), we had to import 7 files into our index.less file in a specific order. Then we had to add a viewport meta tag to the index.html head. Next, we had to build the missing navigation system and add a header image (which was provided with our assets). There were specific .less files we were asked to use for styling specific areas of the page. We had to create and use two different mixins to aid with styling, and add those to a specific .less file. We also had to create a parametric mixin with at least two parameters and use it to style the button at the bottom of the site. Finally, for the desktop view, we had to create a hover state that swapped background color and font color for the base button styles.

The mobile design had a max-width of 500px. We had to match the styling on the design document as best as we could and had to create a media query string that used a specific variable for nested mobile styling.

There were four stretch goals available if we were able to complete MVP in a timely fashion: build a page of our choosing from the navigation items and come up with content and images that fit the theme; introduce CSS animations to the site; create a fixed navigation and add opacity to the background; create a form that would allow someone to sign up for a Spacewalkers Magazine subscription.

desktop

mobile

Like the first week, I was coding down to the wire. Last time, I answered the self-study questions first and then headed into the coding project. This time, I worked on the project first and then answered the self-study questions. I found that I was really pressed for time when answering the questions this time around. I had about 5 mins to answer 5 questions, so my answers were abbreviated, compared to the first time. I also didn’t complete adding all of the mixins that were needed for MVP, because I’m so slow. Reed (our TL) looked over my work later on, during our 1-on-1 meeting and I demonstrated that I knew the material, so he let me create the mixins after our meeting and submit them to him. He seems to recognize that I’m slow to implement. I’m hoping to get faster, because I know the material and can walk others through my code and explain concepts. I’m just not fast at setting it all up initially.

I started working on a cheat sheet to reference and speed up my coding, an hour before the challenge. It did help. I was able to use code snippets from it as templates for certain parts of the web page, like the navigation area and mixins.

Overall, I think that I have a stronger grasp of the material this week, but I haven’t internalized it to the point in which I can just recall and implement quickly yet.

This coming week is JavaScript, and next week will be our first build week, in which we create a complete product website working with teams from other tracks – like people studying user design or iOS programming or something else. This has me worried, but whatever happens, it’ll be an experience.