How I built my first HTML/CSS/JS project.
As a part of my #100DaysOfCode challenge, I completed my Random Quote Machine challenge on Freecodecamp today. It is the first time in my life that I have used these three technologies — HTML/CSS/JS together and have made them work. And it feels great. It inspired me to share how I went about the project and hopefully get some constructive feedback.
The Design
I am a UI Designer by profession — so the first thing I had in my mind when I took up this project was that my ‘quote machine’ should look good (if not great!). I fired up Sketch — and after hours of iterations — zeroed in on a design that I thought was minimal and clean.
The ‘Algorithm’
Once the design was finalized, I moved on to figuring out an algorithm to make it work. This being a simple project — that wasn’t much of a task. All that was required by Freecodecamp for this project to be acceptable was that I had to satisfy a few user stories they had come up with. In this case the stories went :
- I can click a button to show me a new random quote.
- I can press a button to tweet out a quote.
Fairly simple and straightforward.
So the algorithms to satisfy these stories went something like these :
User Story 1 -
- The user clicks on a ‘random quote’ button
- An API call is made. In my case I used an API from http://quotesondesign.com/.
- The call returns a JSON object which contains the required quote and author name.
- Fetch the required elements from the JSON object and display them on the page.
User Story 2 -
- The user clicks on ‘share on twitter’ button
- Fetch the quote and author name from the DOM
- Attach them to the end of a Tweet Intent URL (https://twitter.com/intent/tweet?text=) and make a call to Twitter API.
- Post the tweet. Done!
The Code
Now was the time to actually go ahead and build something. Making it work.
I have some (but not much) experience in HTML/CSS but have never been able to get my head around JS. Learning JS is fun and amazing with all the DIY tutorials — but when it comes to implementing some custom code, my mind always goes blank. This had to change. I decided to take it nice and slow. Also, this project being pretty straightforward helped.
In addition to this — I had to make sure my page looked exactly as I had envisioned it in my design — else this project was going to be a failure (personally). Here’s the thing — as a designer I feel really bad when I design some nice stuff and the developer messes it up. This was one reason I took up coding — to be able to implement what I design, the way I design it.
So, about 6 hours of coding, two cups of coffee and a few hundred tabs of stack-overflow opened parallely on my Chrome bar later, I came up with a basic implementation on Codepen.
On the way, I also got help from the awesome community at Freecodecamp when I was stuck with some browser related issues (subject for an another post).
Now, this code isn’t perfect. But it works. And that’s fine for now. On a personal front — my ability to handle HTML/CSS/JS together and to be able to implement what I designed is what I consider a victory!
The road ahead
What I saw as an easy and straightforward project to start with, opened my eyes to countless gaps in my knowledge of the three technologies. There were a lot of things I was happy that I knew and could implement without a thought, but at the same time I realised there were more that I did not know about (or atleast I thought I knew).
The project, though finished (as per Freecodecamp requirements) is still pretty unpolished (in my head). A few areas in the implementation where I can improve upon — and I shall do it as and when I learn about them — would be :
- Semantic HTML Code
The HTML code needs to make sense. Right now, even though it works just fine, it would hardly make any sense for some one else who would look at it for the first time. The HTML structure can use some improvisation. Also, the classes are vaguely named.
- Refactor the CSS
If you go through the CSS, you’d notice a lot of code duplication — that needs to change. Also, I personally am a Sass fan — even if I don’t know much about it, it just makes the code more efficient is what I feel. Hence, ‘Sassifying’ the CSS code is on my to-do list.
Also, right now, there are too many CSS properties that are hard-coded — and hence the design ‘breaks’ when the browser window is scaled below a certain threshold. For me to make this page Responsive (which again is on my to-do) I’ll need to learn get rid of those hard-coded values and replace them with relative ones.
- CSS Animations
The page right now just goes about doing what it is supposed to do — in a very blank way. It could use some life. I think animations (if done correctly) are a great way to enhance the experience of a web page — and with CSS animations it is not a tedious task anymore.
- The other stuff
Apart from these, I have some ideas about some other general stuff like — loaders, color transitions, tags and filters to make my Random Quote Machine a delight to use.
All in all, it was a great experience being finally able to implement a simple working project. My confidence has got some much needed boost and I am more inspired than ever to build more stuff (my head is full of ideas already!).
I’d appreciate it if you could take some time and give me feedback on my code/design in the comments — what you think of it and how I can make it better.
Cheers!
PS : Take up the #100DaysOfCode challenge! You can read about it here : https://medium.freecodecamp.com/start-2017-with-the-100daysofcode-improved-and-updated-18ce604b237b
Join in folks! :)
