#WhatIMade
I was going to do a typical #TID post today, but realized that I’ve been doing a few things at once so wanted to share my most recent achievements!
I’m currently participating in a 10-week “Web Development Basics Sprint” Challenge hosted by Nomad Coders. By the end of 10 weeks, I would have submitted three final projects of clone coding - a chat messaging app (HTML/CSS only), the Momentum chrome extension app (HTML/CSS/JS), and a Youtube clone (full-stack).
During these past two weeks, we have been focusing on building the Cocoa-talk clone. Besides submitting the messaging app clone, we had daily or two-day long coding challenges. So as much as I want to say it’s been easy peasy since I’ve been working with HTML and CSS since last year… My days have been pretty busy!
A nice lesson I’ve learned throughout this program thus far is that I definitely am NOT one fit for design. Because these coding challenges have been giving me a visual prototype of design requirements and what the final product should look like, I’ve been enjoying coding WAY more. As my wise developer friends have told me a few weeks ago — me separating the design vs. actual web development has been making such a big difference.
I.. actually… Like CODING! I always knew this, but this sprint challenge has made me realize that more by taking the burden of ‘coming up with design and ux’ away from me.
Another semi-realization that I’ve been so relieved to have is that I know much more than I think. All this time, I have been definitely insecure about how much I know about web development and how far I have left in order to catch up.
With that being said, let me share the latest works I’ve created using HTML and CSS:
My final project — dog-inspired “Mungtalk”
Other final products I’ve created (thank you to the challenge for giving me beautiful design prototypes to work on!):
Music player
Fancier music player
Book app
Things I’ve thought about these past two weeks:
- I’ve been practicing how to utilize better, more coherent, and clear class names via BEM convention. However… Now that I’ve attempted to use the BEM convention, I totally get the appeal of using tailwind.css. Because I’m only human, it’s SO hard to internalize consistent class-naming!!!
- Animations, transitions, and transforms were not something I learned much from my previous online bootcamp, and I’m glad I am more familiar with it now.
- Pseudo selectors and pseudo elements are super useful! I’m glad I got to use
:last-child,:nth-of-type()and other pseudo selectors more from these challenges. - Realized that I can also divide my css files into separate components to better organize my code and @import into the main stylesheet file. That being said, I need better practice with first a) going through the prototype and its features and b) noticing patterns in design or features that can be grouped into components. Often, I realized way too late that a certain chunk of code is going to be reused in another part of the webpage, and by then I’ve already used way-too-specific class names that won’t make sense in the second repeat. I hope with time and practice, I’ll get better at noticing these patterns.