Semi-coding my first responsive page. You can do it too.
It’s been 10 months since I started working with Conference Badge and as I wrote in one of my first blog posts I wear many hats in the company, ranging from customer support to fulfilling rush orders.
Well, this week I add a new hat to the collection, I’ve coded, or more accurately, I’ve copy-paste-edited my first responsive page: Case Studies of some of our best customers.
It was quite a challenge to be honest, I had some basic notions of HTML and CSS. My education on this can be summed up to completing the basic courses in Codecademy. Great time investment by the way!
How it all started
For the past month or so I’ve been contacting our top customers to write up case studies. The idea was to create a new page in the site to expose these in a chat-like fashion.
I made a mock-up of how I wanted the page to look using Sketch
I was excited to have completed 5 of these and wanted to show them on the site, but the dev team has a lot on their plate and this project couldn’t be coded soon, which I completely understand.
So I decided to take matters into my own hands and, at least, try to create this page myself. The first barrier was to ask access to the code and to decipher it. I appreciate the trust guys!
This is what I was facing:
I literally had no idea what to do. And that was super exciting.
I started by opening all the folders and seeing the content of each file, I knew this was built on Rails, but other than that I didn’t know how the structure of the site works. (I understand like 15% now, tops)
A colleague pointed me to the header file, turns out that’s the “top bar” of all the pages! He also showed me that if you make a change in the file you can see it in a local host inside the browser.
This is the first change I made (😊):
For advanced programmers or even beginners this might seem so simple and stupid, but this small thing, made me stop thinking that coding is extremely complex reserved for geniuses. I mean it is very hard and what I did is quite basic, but everyone can learn to code if they have the patience and desire.
Creating helpers and controllers
After my little win in changing the company’s name to my own, I needed to plan my page, I had to:
- Create the case study page.
- Upload image assets.
- Make it all responsive.
- Add a link in the header
- Make sure not mess up anything else in the site.
As simple as this may sound, I ran into several issues, that I worked out by figuring out how other pages of the site were configured, but now I’m starting to understand a few functions.
Like creating helpers to extract logic out of the view so that you can organize the code better. Thanks Google.
I also had to create a new view with all the CSS or styling needed for the page to look good in different screen sizes. Of course, all based on the code developed by the founders.
I wanted to jump in and generate a copy of my Sketch mockup complete with animations, etc. But as my colleagues recommended, it’s best to start small and work your way up, otherwise I would get frustrated and maybe would’ve abandoned the project.
So, instead of creating the chat-like page, I started by taking elements of another page to list the case studies and have a link to download the document in a PDF format.
After hours of good hard work I was able to achieve what I wanted, a responsive page with all the case studies with a link to download the PDFs and a small hanging badge accompanying each one of them.
Now I’m currently working on developing each case into a webpage, it’s turning out to be another big challenge, because this time I have to improvise more and copy less. Let’s hope this works out ok.
I’m happy with this new phase of the job. Who knows, maybe soon I’ll be able to improve other parts of the site.
If I can do it, you can do it too.