About the project
This project allowed me to hone my JavaScript skills as well as refine and practice a little vanilla HTML and CSS. I definitely accomplished both as this project provided a number of challenges I was able to overcome. Here's what I accomplished during this project:
- HTML/CSS - I was able to mimic almost perfectly the current version of the Twitter site. The only thing thats different as of this writing are the cover images and profile pictures. I paid close attention to all of the hover effects, color changes, and icon placements. The layout is one for one and I became an expert working with Chrome's developer tools.
-
JavaScript - I implemented a number of cool features into
this project. For one, the Tweet Menu is fully functional,
created by me from scratch. Next, each tweet is pulled from
JSON data and each tweet is generated for each user based on
the number of entries the user had. Essentially the entire
page renders with JS alone, pulling all the necessary
information from a 'users' JSON object. I had a number of
small victories while making this project:
- All the date and number formatting was done by me. I struggled a little with the dates during the project and quickly discovered that I'm not the first one to pull my hair out over them. I kept at it and was able to mimic the formatting for the real Twitter site exactly!
- The timeline page was particularly difficult for me as I had trouble sorting all tweets across users. I was finally able to figure out a way to get it to work. It's not the most elegant of solutions, but it works!
What was the goal of the project?
To create a carbon copy of the Twitter profile page. I challenged myself to see how close I could get. Completing this challenge was some of the most fun I had had up to this point on my web development journey. I was free from tutorials and books, doing things completely on my own, and loving every minute of it!
Project results
I'm happy with these results. Not every button does something and there are still a few things that stand out to me as differences. It was difficult to pull myself away as I found it easy to get lost in making sure every tiny detail was perfect. In the end, I realized that this project had served its purpose and it was time to move on to bigger and better things. I believe this project was, overall, a successful one and one that I could be proud of. I learned a lot while doing it and it only made me excited for the next one!
Project completed on:
December 17, 2022