How I built my first website.

I perceive the purpose of this blog is to expose and share the trip a beginner has footed to put together his first website, to show that the website is indeed done by himself, rather than to demonstrate one’s academic writing skills. So please excuse my language if it comes across too rambly.

1, I wasn’t planning on to build a one page website, as you recommended that’s more of a choice for experience designers to show off their designing skills, so I originally was going to copy the design of Tesla website. As you can see, the layout of my home page is pretty much the same as tesla website.

2, Everybody’s been saying the flashing background media doesn’t seem to be a good idea, you advised it’s making it hard to read. But I really really like the video, and I spent good hours on looking for it, so I decided for this assignment I’m still including it.

3, I only started using Toggl to track my hours in our class on the 17th. After I realised everyone else is using it. Toggl have tracked roughly 35 hours. I have definitely spent more time before that.

4, I wasn’t using Trello well enough. I have a general lack of planning when i first started doing this assignment. Instead of planning on what I want to feature in my website, I was just playing with different components and effects on Webflow. I was sitting in front of my laptop checking different things out like, oh that’s something flashing I want that, oh this is something shining I want this. This is the major reason I ended up spending so much time on this project. One could easily spend 3 hours on just combining different box shadow effects if there’s no specific goal of what to achieve. That’s me. I ended up digging into the fantasy world of Webflow, got entranced and amazed by how much I could do there without actually getting much work done.

5, The tutorial videos are indeed very useful.

A, https://help.webflow.com/video-tutorial/lets-rebuild-teslas-homepage-in-webflow

this video taught me how to set background video and the scale up transform on the buttons.

B, https://help.webflow.com/video-tutorial/load-trigger-interaction

From this one I learnt the load page tripper interaction.

C, https://www.youtube.com/watch?v=CqQkhmH7ftI

From this one i learned how to draw a video play button by simply setting the border widths of a Div box.

D, https://www.youtube.com/watch?v=_C2NJniRELU

This one taught me how to do a pop up modal interaction.

E, https://www.youtube.com/watch?v=APiSNBkyD5Y

This one I learnt to how do a scroll interaction, and changed my mind to do a one page website.

6, Our class support team member Oscar shared with me that the three water drops button can clean up previously created classes those are not in use, which was tremendously helpful.

7, https://www.youtube.com/watch?v=tkGhuA5HDaE&feature=youtu.be

Sometimes, how you imagine the effects and transforms would appear don’t turn out to be the same. Like these buttons in the video, they were working sometimes and being mad sometimes. I literally have spent a whole day trying to figure out what’s wrong with them. Had the same problem with the lightboxes wouldn’t play videos properly, fixed Navbar wouldn’t stay fixed on the top. Eventually I gradually came to realise that, a feature doesn’t work properly is normally to do with some other features which were set on the parent elements or sibling elements are overriding or effecting them. For example, the intrigued button, it was mad because it had a Hover transform, a load interaction, and pop up model interaction. I was being ambitious.

8, I have made sure all buttons work.

9, Webflow service team has been unbelievably helpful. I feel truly grateful to them. I emailed them about a problem. They got back to me not just with solution to my problem, but also suggestions how I can change things around to make the website run more smoothly, with screenshot illustrations. They checked into my account and ran an audit of my work.

Show your support

Clapping shows how much you appreciated Tom Zheng’s story.