-
-
Home Page
-
page_3
-
Page_6
-
Page_4
-
Page_2
-
Page_5
Inspiration
This website is inspired by the real-life museums around the world. COVID-19 pandemic has restricted us from visiting places. And so, this website concept tries to imitate the feeling of visiting a museum, virtually.
What it does
This is an informational website consisting a total of 6 pages. The first page is the home page. The second page explains "cretaceous paleogene" in a nutshell. And the remaining pages contain the 3 most popular dinosaur which are tyrannosaurus, triceratops and velociraptor alongside an image gallery. Although, the information might be superficial, it gives an overview of the dinosaur era.
How we built it
The website is built entirely out of HTML, CSS and Vanilla Javascript. I started learning web development about a month ago, and on and off, and I have yet to learn any frameworks or javascript libraries. The website is built by collecting the photos for the intended page, then writing the html while at the same time, writing a little CSS along the way. And I carried on doing this for the rest of the pages. And lastly, I research and wrote the Javascript for the dropdown menu, carousel images and observer js. Everything was built from scratch from Saturday - Sunday.
Challenges we ran into
The biggest challenge was that this is my first hackathon and the first website that I have ever built. I was really confused at first on what to make because I didn't know what the competition was looking for. I don't have much programming background either. This was also the first time I created a full on publishable website. I have tried to make a few small pages here and there, but not this much. The Javascript code felt less natural to me compared to CSS and HTML. And so I had to spend a lot of time to research it and learn how to do it. Lastly, I started writing the code on Saturday instead of Friday, which gave me less time to experiment with new designs. Working alone also proves to be a challenge. I wasn't able to get any help and inputs on anything and so, this whole journey has been an amazing one. One aspect of a good website is to code it for multiple device, however, due to time restrictions, I wasn't able to do it since I would need to do more research.
Accomplishments that we're proud of
I am definitely proud of finally building my first coded website. I didn't have the time before to commit to making one before, and because of this hackathon, I tried giving it my all for this and successfully building one. I also proud that I finally able to implement javascript in my code. Lastly, the "cretaceous paleogene" page is able to move up and down using the arrow keys, which is a first time for me as well.
What we learned
I learned a lot from this project, especially structing my website pages. HTML sometimes is pretty confusing, and this really helped clarified on how to place things in certain places. I also learned to use scroll-snap which allows the pages to be moved by arrow keys. Lastly, I got to explore more on HTML DOM and how its operated which I used on the image carousel, dropdown menu and navigation color change.
What's next for Prehackstoric Museum
There is definitely a lot of improvements that can be made, from making and searching better photos, adding more information and more pages. And so, what's next for Prehackstoric Museum is adding more dinosaurs to the catalog and adding more information to each pages. More Javascript code could also be added to increase the user interface and experience.
Log in or sign up for Devpost to join the conversation.