The Downfall of Skipping Around

So if you have been following my posts so far . . . firstly, have a digital cookie. Here you go. Happy Halloween. Secondly, you might have remembered my encouragements to have fun while coding. With the lessons I have learned from the past couple of weeks, I can already tell that this post is going to tread the fine line between further encouragement to keep coding fun and, well, not to get too distracted by it.

For example, let’s jump to a project I’ve been dabbling in on the side: coding parallax. For those of you who don’t know (because I didn’t know the name until a few days ago) a “parallax” is one name for the element on a website that creates an illusion of dimension. Typically this is a photo that gets “scrolled over” with text content.

If you’re curious as to what it looks like, I encourage you to browse the old World Wide Web. Why? Because almost any modern, trendy website you’ll come across employs some form of parallax.

Alright, here are some examples anyway.

(Bonus: I didn’t realize there was horizontal parallax scrolling as well until, well, today.)

Funnily enough, this wasn’t an aesthetic I was looking for in my portfolio, but I really like the layered dimensions that could be achieved by learning how to code these elements – which is part of the aesthetic I aim to showcase and implement as a UI designer.

However after some discussion and reflection, mainly after my midterm conference, it dawned upon me how distracting some of these side projects can be. While I attempted to separate this “fun code” from “class code” by creating a new menu on my website (with its own corresponding .html and .css code) it was still clear the week before our resumé rough drafts would be due that it was still a little too distracting.

While attempting to code parallax, sticky menu bars, and drafting mock-ups was conceptually closer to my personal portfolio aspirations, the code that I was physically completing was much less sophisticated.

I was pleased that some of my classmates enjoyed and were inspired by my site’s current aesthetic (shown below), and I find it satisfying to a certain degree as well; the shades of grey and blue and sleek but inviting, and the font is playful but clear.

10.8.18 Float Test.png

As emphasized by the “Back to the Top” link stuck behind my float elements at the time of this screenshot, my biggest issue was in the site’s layout and formatting, both of which I had struggled with in class, and both of which were huge proponents to my future designs.

After struggling for hours to code “columns” and “rows” on a makeshift grid, I went back to creating float elements, which was much more successful. With Bill’s help, I adjusted the maximum dimensions of the site (since I couldn’t see my portfolio on screens bigger than a laptop) so I could keep my design precise. But throughout this hectic week, I realized that while I was trying my hardest to work harder to get ahead in coding, I was also getting distracted to a point where I could have fallen behind.

So lesson learned: have fun, but not too much fun.

What kind of issues are you all running into when creating your websites? More specifically, when it comes to making the site suite your personal aesthetics? Let me know in the comments below!


4 thoughts on “The Downfall of Skipping Around

  1. Hey Elana! Your positive attitude and encouraging words are really inspiring, because it is evident that not only are you focused on your own coding projects but you are also really looking to help others on their journey through web design as well! I think that its really important that you recognize when things are too distracting. I know the back and forth and constant hours of coding are tedious, but your hard work is paying off. I like that you said you didn’t intend your personal aesthetic to be the way that it is, but you ended up liking it because isn’t this what it’s all about? Through new discoveries things sometimes turn out in our favor! Keep up the awesome work!


    1. Hey, Erin! I apologize for the late response – I don’t think my drafted response actually got published. That being said, I just wanted to thank you for taking the time to read my blog post so carefully, and I appreciate the time you took to absorb anything helpful that I may have expressed. That being said, your website is coming along so beautifully, and I wish you the best of luck moving forward. Keep making new discoveries, because sometimes they can be the most fun!


  2. Hey Elana, this is a really neat post. I wish I had read it sooner, I would have loved to add something like this to my website. The effect the parallax creates does add a whole other dimension. It sort of immerses you in the website. Thanks for the tips while making the resumés, they helped a ton.


    1. Hey, Brett! I’m so flattered that you enjoyed my blog post. Just remember, it’s not too late to add this code after the semester is over. If you are interested in implementing parallax code like this, I finally found some straightforward tutorials. Just let me know and I can send you the links. Good luck!

      (P.S. I’m glad the advice helped! Let me know if you have any other questions.)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s