Welcome to Explore Romania. Dive into Romania's captivating history, vibrant culture, must-visit attractions, and savory cuisine.

Live Preview Of Explore Romania

Explore Romania is a website that offers insights into Romania's history, culture, rich cuisine, and top attractions. This project is tailored for tourists and anyone interested in learning more about Romania.

• UX
  • User Goals
  • User Stories
  • Site Owners Goals
  • User Requirements and Expectations
    • Requirements
    • Expectations
  • Design Choices
    • Fonts
    • Icons
    • Colors
    • Structure
• Wireframes
  • Features
    • Navigation Bar
    • Welcome Section
    • History Section
    • Culture Section
    • Attraction Section
    • Cuisine Section
    • Contact Section
    • Footer
    • Thank You Page
    • Features to be implemented
• Technologies used
  • Languages
  • Tools
• Testing
  • Unfixed Bugs
• Deployment
• Refactor
• Credits

• Visually appealing, including images.
• Easily navigated around.
• Quality and valuable content.
• Easily found contact details.

• As a user, I want to learn more about Romania's history.
• As a user, I want to learn more about Romania's cuisine.
• As a user, I want to learn more about Romania's culture.
• As a user, I want to learn more about Romania's top attractions.
• As a user, I want to be able to easily contact the website.
• As a user, I want to be able to make contact with the website via several different methods, i.e. social media.
• As a user, I want to be able to easily navigate through the website.

• Attract more visitors to Romania.
• Inform visitors about Romania's history, culture and cuisine.
• Inform visitors about the top attractions to visit.
• Increase rankings on search engines.

• Easy to navigate on various screen sizes.
• Clear and precise information about Romania.
• Simple method of contacting the website.
• Visually appealing design.

• I expect all links to social media sites to be opened in a new tab.
• I expect all navigation links to work correctly.
• I expect screen size not to affect the quality of the website.
• I expect all information to be correct and accurate.

  Back to Top
 

To diversify the font choices beyond the standard options, I've integrated Google Fonts to find a typeface that complements the website's aesthetic. For the main text, I've opted for Montserrat due to its sharp, simple, and easily legible appearance. To make headings stand out, I've applied "Open Sans" with a sans-serif fallback.

As for icons I decided to use for my website Font Awesome library.

As for colors I decided to use the same colors as the Romanian National flag. I have picked Colorcombos to generate my own set of colors.

I will explain the uses of the various colors below, starting from top to bottom.

• #3a71c5 - This color will be used for links and hover effects.
• #e9eb0a - This colors will be used for borders and for styling the "Romania" word
• #e31616 - This colors will be used for headings
• #dee2e6 - This colors will be used for shadows, nav links, footer links, and text
• #ffffff - This colors will be used for sections backgrounds
• #0d1b2a - This colors will be used for background

My website development will follow a mobile-first strategy, focusing on creating a visually appealing design for smaller screens. Specifically, I'll begin styling for the iPhone 5, which has a width of 320px. To ensure responsiveness, I'll rely on the predefined screen size breakpoints provided by Bootstrap.

  Back to Top
 

I opted for Balsamic for wireframing to visually structure and plan the layout and design of my website, aiming to provide a user-friendly experience and maintain design consistency across different devices.

The wireframes are below:

  Back to Top
 

The navigation bar is fully responsive. Since the navbar is fixed to the top it provides to user a way to navigate the website very easy, making it a user-friendly

• Desktop (>=992px)

• A blue hover effect is used to visually highlight active, clicked, and hovered links, making it clear to users when they are interacting with these elements.

• Small devices (<576px)

• When the screen width is less than or equal to 576 pixels, the navigation bar adopts a hamburger-style menu, maintaining responsiveness across all devices.

• When pressed, it opens the main menu with all available links.

Back to Top

• Welcome Section

  • In the welcome section, I've used a picture of "Oradea," a city in Romania, as the cover image.
  • This image offers users a sneak peek of some places in Romania.
  • The hero text consists of the website's name, "Explore Romania," followed by a brief description about the website.

  

Back to Top

• History Section

  • In the history section, users will discover valuable insights into the rich and diverse history of Romania

  • The section provides a concise overview of Romania's historical timeline

  • Desktop view

  

  • Tablet view

  

  • Mobile view

  

Back to Top

• Culture Section

  • In the culture section, users will learn more about the language, folklore, religion and architecture of Romania

  • Desktop view

  

  • Tablet view

  

  • Mobile view

  

Back to Top

• Attractions Section

  • In the attractions section, users will be presented with a collection of images showcasing some of Romania's most popular tourist destinations.

  • Desktop view

  

  • Tablet view

  

  • Mobile view

  

Back to Top

• Cuisine Section

  • In the cuisine section, users will be presented with a collection of images showcasing some of Romania's most popular dishes.

  • Desktop view

  

  • Tablet view

  

  • Mobile view

  

Back to Top

• Cuisine Section

  • In the contact section, users will be presented with a form where they can contact Explore Romania.

  • Desktop view

  

  • Tablet view

  

  • Mobile view

  

Back to Top

• Footer

  • In the footer section, users will find external links to social media also a made by message.

  • Desktop view

  

  • Tablet view

  

  • Mobile view

  

Back to Top

• In this page users will see a section with a thank you message and they will be redirected back to homepage after 5 seconds.

• View

  

• Cuisine section, the images should have the name of the food as watermark.
• History section, a link to Wikipedia to learn more about Romania and a documentary video about Romania.

Back to Top

• HTML
• CSS
• Javascript

• Google Fonts
• Font Awesome library

• Balsamic
• W3C HTML Validation Service
• W3C CSS Validation Service
• Colorcombos
• CSS Scan
• Squoosh

Back to Top

• The website has met the objectives set by all parties involved. It's responsive on various screen sizes, ensuring clean and crisp images without excessive empty space. Users can easily navigate and contact us through the contact form or social media. The content is concise, and the design is uncluttered, providing a user-friendly experience.

• While testing I didn't encounter any errors with the final project.

• HTML (index.html) validator results

• CSS validator results

• The final project was tested using Google's Lighthouse on github pages. The results are below

• Performance test for Mobile:

• Performance test for Desktop:

• When testing on Google Chrome mobile version I didn't like the default browser theme color so I've customized the browser's theme color to match the website's theme, ensuring that everything looks just the way I prefer it.

<meta name="theme-color" content="#121A18">

• Using Mobile Simulator extension in Google Chrome I have tested the website on differite devices. Test results are listed below.

• There are no bugs to fix in the final project

Back to Top

After writing the code, committing, and pushing it to GitHub, the project was deployed using GitHub by following these steps:

• Go to the repository on GitHub and click on Settings

• In the side navigation, select Pages

• In the None dropdown, choose main

• Click the Save button.

• The website is now live at https://USERNAME.github.io/explore-romania/

• If any changes are needed, you can make them, commit, and push to GitHub, and the updates will be reflected on the website.

Back to Top

After the refactor some of the design changed. See details below.

• The attractions section has a hover effect of a blue-box-shadow of 3px to distinguish from the others.

• In the cuisine section the images have a padding of 3px.

• To make the user experience and provide visual cues for the currently viewed section, I've incorporated a hover effect in the menu using scrollspy (Javascript). This idea was inspired by a video I watched on YouTube.

Back to Top

For readme, help and advice,

• Simen Daehlin

For navigation and footer:

• Love Running Project

For scroolspy

• Mr. Web Designer

For images and content inspiration:

• Chefspencil
• Tripadvisor

For Screen Size Breakpoint:

• Bootstrap

Images credits

• Fabrice Florin
• Savori Urbane
• Restaurant Sergiana
• Unica
• Nitu Iulian
• Laura Laurentiu
• pixabay.com

Back to Top