Journey of The Cheepy Website Development
Journey of The Cheepy Website Development
Hi Samurai-like Developer candidates. Today i will tell you a story about Cheepy Website developing journey. Cheepy is an sound playing app that helps you to relax and feel more comfortable. You can use Cheepy while studying, meditating or sleeping. Of course, we needed such a beautiful website for such a beautiful app. But there was something missing. I didn’t even know the basics of HTML CSS and Javascript. My Sensei Furkan (aka my boss) told me to use Tailwind CSS and i have 1 week to create the website. So this was a new challenge for me but a samurai must be able to adapt to all situations. So i did.
If you’ve tinkered with the tailwind CSS you know how troublesome it is to install and setup. First day i struggled for it almost all day. Finally i was able to install it using this video:
https://www.youtube.com/watch?v=arftp8kFBBg&t=354s&ab_channel=Devtamin
This guy explains whole process clearly and it saved my day.
If you wonder how does Tailwind CSS works here is a short explanation:
Tailwind CSS is a powerful framework that have amazing pre-built classes. So lets say you want to add padding to your element. You don’t need to write it on HTML file and then write its style to a CSS file and then give stylesheet of that CSS file in your HTML head section bla bla bla…
Tailwind does everything for you. You only need to use pre-built classes to give padding. It reads the HTML file. Recognizes the pre-built classes that Tailwind offers. And creates a CSS file itself depending on what pre-built classes you used. So lets say you used padding classes (which is p-?) It creates the CSS file and writes the padding you used.
And as you can see below the syntax of Tailwind is so easy too. For example:
When you want to give padding you only need to write “p-” and the value of padding,
Or to give a background color to your element the only thing you write is “bg-” and the color you want.
Tailwind has a very large color palette. You can use them or define your custom colors or assets in tailwindcss.config.js file. Basically tailwindcss.config.js file is a configuration file tailwind uses. You might get in trouble with that file when installing so be careful. But the video I linked previously will solve all problems you have so you better go and watch it.
Anyway. After installation I started to read the documents for HTML and Tailwind CSS. As i mentioned before i didn’t know anything about these things 4 days ago. For HTML I used W3Schools documentation. It is a wonderful documentation for an easy understanding. After basic HTML knowledge I asked for help from one of my high school friend Tuna. He is studying Computer Engineering and I knew he was studying web development for hobby. So, I showed him the design of Cheepy Website and asked how to make the layouting. After a wireframing session I started to understand the concept. Next day I started to build the main structure. Cheppy Website has 7 different sections. So, I worked on creating sections responsively and on the header part. Header has a navigation and an image part. I tried a lot to understand the concept of HTML and Tailwind CSS layouting. It may seem foreign at first, but once you get used to it, Tailwind CSS is like an apple falling from heaven. For Tailwind CSS the main source of information should be the official documentation. It actually touches on every subject. So, when you encounter an error, you better look there first, at least that’s what I did. If it doesn’t please you, maybe you can look for some YouTube tutorials. So back to the story. It took me 2 days to draw the whole UI. I created structure responsive for both desktop and mobile. So, it sizes every element automatically depending on screen size. Tailwind CSS also supports responsive designs so it makes responsiveness very easy.
AND THE FINAL BOSS !!!
Last day… I almost reached to my limits… My katana doesn’t work anymore… (my fingers) It is just a weight to me now… My eyes are burning… My body doesn’t listening to me… But there is one more thing to achieve:
WRITING JAVASCRIPT OF THE WEBSITE !!!
Just kidding. My sensei helped me while writing it. He created the whole structure for me and the only thing I did was fill in the blanks. I learned a lot while watching him code. (He deleted all the code I wrote)
Then I needed to use a slider library. I did extensive research. I went deep into the archives and obtained valuable information. I decided to use SwiperJS. Ssshhhh! This is confidential information. After numerous attempts I finally created my slider and its logic. I mean I didn’t write the logic it was a pre-built class SwiperJS offers. When you look at it, I actually didn’t do much… Samurai Apo is sad now…
Anyway, finally we published the website, and it is now ready to use. Don’t forget to give a chance to Cheepy. It is a wonderful app and I worked on Cheepy App Development too, so it is special to me. You will sharpen my katana if you download the app.
And now… Closing scene… That’s it for today. I need to go hunting for my sensei. (I will write another website)
