Where Do You Begin?? Header

In my last post Where Do You Begin?? I gave the example of where to begin when trying to refactor your project, or even completely redoing it. In this post, I want to go into my experience of what I was facing, and how I handled things. My experience, and how I handled things could be completely wrong, and there might be a better way. If that is the case, please let me know below, but I have to say, that this worked for me, and it might work for you.

Let's begin;

The story begins in September when I decided to create a front end website based off Tegridy Farms. What this website does, is makes a call to the Strain API. It then displays this information to the user. The website is based off of Tegridy Farms from South Parks episode. I started it because I enjoyed the episode and it was just a dump idea but then after my schooling, it drove into something new.

Enter Cody Porter.

Cody is a UI/UX instructor at V School. I just have to say, I will kiss his butt in this post the entire time. Using Figma, Cody turned Tegridy Farms from a website that looked like it was created in 1990 and by a teenager that loved marijuana ( a sophomoric website someone called it ) into something AMAZING and professional which I will always be grateful for.

When Cody finally handed off the design to Tegirdy to me, I was very excited to start diving into changing the webdesign. I went to my computer, sat down, and started to open everything up. I put the Figma design ( which is web browser base ) on one screen, my code on my laptop, and booted up Tegirdys' code and website through VS Code.

Crap, Where do I begin?

When I was looking at my website live ( through VS Code ), my code, and Codys' design in Figma I had no idea where to start. Which is when I said to myself "Where do I begin?!"

That is when I pulled one of my Instructors to the side Eric and asked him how I should go about this. I asked if I should start with the front end or back end which he replied it would be better to start with the back end.

I started to do just that, and the only thing I really had to do was change the way that it did a search. However, I couldn't think of a way to do this at the moment, and I was started to doubt myself, so I decided to start with something a little easier and go with the header of my website.

AND THAT IS OKAY

There is nothing wrong with starting out with something a little easier when you are refactoring or redesigning a website. In my eyes, it will be the quickest bang for my buck to get me back into my websites code and see a result.

How I started, is that I zoomed in on Codys' design in Figma just for the header. I opened up just the code files for my header which is 1 NavBar.js and 1 NavBar.css file.

Figmas' setup.

Figma has a really neat tool that literally gives you the code for EVERY aspect of the design. So in my case, it told me what size the image had to be, how far away from the left it had to be, the size, color, font family, etc. of all the text and where to put it. However, you have to remember that this is code that is generated by Figma, so it is not always perfect, and can produce more code than you need.

My Process

What I ended up doing with my header, especially since it was my first time using Figma, was to do all the code that it suggested. I noticed however that everything was not looking like it should have been based off the designs. I went to Cody, ( thank god he is so understandable and a good instructor, sometimes I thought I was annoying the crap out of him ) and asked what i need to be doing, and how it is just not looking right. He went into the design and showed me how to drill into the code that Figma produced and how that Figma were more like guide lines. With my new knowledge, I thanked him profusely, and told him how I understand now and I got this. BOY WAS I WRONG, again thank you Cody for being understandable, and a great instructor because I think I was back asking him questions in 30 minutes, he HAS to think I am dumb haha.

Using Figma

So to use Figma, you have to drill down a few layers sometimes to get all the code you need. Like for the icon image in the top left corner of my website, there is a div around that which tells me some code, but then I need to either double click on the image ( maybe a few times ) or open some nested folders to get even more of the code. Doing this, was kind of a pain in the butt when I first started learning how to use this software because I was leaving code on the table so to speak.

I started to drill down into the code, and after cleaning up some elements that I made already and deleting css and divs that I no longer needed now that I had an idea of what I was doing, my header came together pretty quickly. I don't remember how long it took me, but I know it took me about a day to redesign just the header.

Before

After

Goals

After I got done redesigning the header, I was VERY proud of myself and happy. I showed it off to my friends at V School, and to Cody as well and bragged about it. After the excitement, I had to figure out a plan so that I could get this done quickly, but also keep applying to jobs, attending meetups, and learning. I decided that if I worked used Deep Work practices, and really focused on what I was doing, I should be able to do each component in a day. With the website having a,

1. Header [x]
2. Footer []
3. Home Page []
4. Product List Page []
5. Product Detail Page []
6. About Page []
7. Contact Page []
8. Filter by strain race []

I figured that I could do the entire website around in 8 days, denoting about 4 hours a day and with the first day already done I was motivated. ( Still am guys no worries ;) )

Final Thoughts

When I first started the project of redesigning Tegridy Farms, I was very nervous. I am not going to lie, I was scared and thinking whether I made a mistake because I had no idea where to begin. However, once I decided to just take one step at a time, I was able to get started and knock out the header in no time, and was able to feel accomplished even if it was just a little one.

It is okay to be scared, I get scared some times ( a lot ) but what matters if you can live with that fear and just keep pushing forward.