This project is a webpage witch will store all interesting information from different countries I have been. Web will focus on travelling, attractions and stories. Project is easily scalable and can be changed to different topic. You can use it as a template for your needs.
This website is for people who are interested in travelling. This is the reason why it will be categorized by country. Each post from trip will be build in 'one page' manner with navigation by attractions.
User stories:
- As a site visitor, I want to see latest post on the home page, so that i have the latest information shown,
- As a site visitor, I want to page load quickly, so I can avoid frustration,
- As a site visitor, I want to have easy to "digest" content so I can feel positive experience,
- As a site visitor, I want to have pictures, videos, audio, so I can better understand,what is the main idea in the content,
- As a site visitor, I want to have easy navigation by country, so I can read about country's I'm interested.
- As a site visitor, I want to have easy navigation by attractions in post I'm reading so i know where exactly I'm in the page.
- As a mobile site visitor I want to have content displayed in blocks, so i can better see pictures and text.
- As a mobile site visitor I don't need extra decorations, so i can focus on what is important.
- As a mobile site visitor I want to have sticky navigation so I can jump from interesting information easily.
- As a editor I want to have option to easy add a content so I can save time in future.
Here is Mind Map i made before creating the webpage. Is showing crucial question I was asking myself before development.
This was initial wireframe - is different from final version because during the
development better solution's were found.
Possibility to:
- Watch movies,
- Watch pictures,
- Listen recorded sound,
- Navigate by "attraction" in article,
- Navigate by "Country".
- showing more/less in navigation of article.
- Transform site to more dynamic approach,
- Rss channel,
- Subscribing by mail,
- Content Management system,
- Comments.
languages:
- HTML,
- Css,
- JavaScript.
frameworks:
- Bootstrap.
When clicking in: "trip journal" logo page is taking visitor to index.html , "Spain" page is taking visitor to index.html (main content of the page), "+" - navigation is showing, "-" - navigation is disappearing, links in navigation - page is taking to relevant sections on the page, "play on audio button" - audio is playing, "play on youtube movie" - movie is playing, map - is correctly working.
When validating using css validator there are known warnings:
29 -webkit-box-sizing is an unknown vendor extension 73 -webkit-sticky is an unknown vendor extension 233 -webkit-box-shadow is an unknown vendor extension 254 -webkit-box-shadow is an unknown vendor extension
Why they are showing ? Why i leave them ?
- Those errors will help support browser compatibility efforts.
- The validator only validates against valid code.
- And the vendor extensions are proprietary code.
- As such it will always be invalid.
You can visit the site on GitHub pages:
https://migacz85.github.io/trip
If you want to run code locally run:
git clone https://github.com/Migacz85/trip.git
uk picture https://unsplash.com/@withluke?utm_medium=referral& spain main picture: https://pixabay.com/en/barcelona-street-urban-spain-838742/https://pixabay.com/en/sagrada-familia-cathedral-552084/ Finder tool picture: https://www.pexels.com/photo/sign-arrow-direction-travel-52526/
- The rest photos in article section where made by me, so copyrights belongs to me. If you are interested in using them - drop me an email migacz85@gmail.com.