🌍 Discover Tunisia
Click here to explore the live version of my website: 👉 https://dev-by-ahlem.github.io/discover-tunisia/
-
User Stories & Acceptance Criteria
- User Story 1 – User-friendly navigation and responsive design
- User Story 2 – High-quality images and engaging descriptions
- User Story 3 – Detailed destination and culture information with interactive gallery
- User Story 4 – Contact form for inquiries
- User Story 5 – Subtle animations and micro-interactions
- User Story 6 – Social media integration
- User Story 7 – Newsletter sign-up form
- User Story 8 – Interactive map for destinations
- User Story 9 – User testimonials
- User Story 10 – Location, contact details, and travel information
- User Story 11 – Travel quiz or itinerary builder
-
- At the top of this README, a mockup generated using Canva showcases screenshots of the website displayed on different devices, including desktop, tablet and mobile.
- This visual overview highlights the website’s responsive design and ensures a quick understanding of how the layout adapts across screen sizes.
- The flowchart bellow was created using Miro to represent the navigation structure of the Discover Tunisia website.
- Implemented a pure CSS scrolling gallery using @keyframes to animate vertical movement.
- Used transform: translateY() to shift the entire image track from top to bottom smoothly.
- Applied a linear animation to maintain constant scrolling speed across all devices.
- Ensured the gallery remains fully responsive by using flexible image sizing and overflow control.
“This project uses CSS variables defined in the :root selector to create a centralized design system. This approach improves maintainability, ensures visual consistency, and makes it easy to implement theming such as dark mode by updating variables in one place.”
- All HTML, CSS, and image file names now follow a consistent naming convention:
- Lowercase letters
- Hyphens (
-) to separate words
Example:hero-destination.jpg,kairaoun.mosque.png
- Create an informative and visually engaging website that showcases Tunisia as a travel destination.
- Promote Tunisia’s rich culture, history, and landscapes through high-quality images, interactive sections, and well-structured content.
- Provide visitors with clear and useful travel information, including destinations, cultural insights, and practical tips.
- Inspire users to explore Tunisia by creating an immersive and user-friendly experience that highlights the country’s beauty and diversity.
- Encourage engagement through modern design, smooth interactions, and accessible navigation across all devices.
- The website was designed with flexibility in mind, allowing it to adapt smoothly to different screen sizes and devices, from large desktop displays to tablets and smartphones.
- This was achieved using Bootstrap’s grid system alongside custom CSS media queries to ensure a consistent and user-friendly experience.
- Visitors: The website is designed for visitors who want to explore Tunisia through a modern and visually engaging portfolio-style experience.
- Travel & Business Interest: It also targets travelers and travel agencies by helping connect people interested in discovering Tunisia’s destinations, culture, and tourism opportunities.
- The Discover Tunisia website is designed to support the needs of different types of visitors.
- Below are the main goals users want to achieve when visiting the site:
- Learn about Tunisia quickly through clear sections, images, and descriptions.
- Explore destinations and understand what each place offers.
- Discover Tunisian culture, including food, clothing, and traditions.
- View high‑quality images to visualize the country before visiting.
- Use a simple contact form to ask questions or request more information.
- Navigate easily thanks to a clean layout and responsive design.
- Enjoy a modern experience with subtle animations and interactive elements.
- The Discover Tunisia website is designed to offer a smooth, enjoyable, and intuitive experience for all visitors. The UX focuses on clarity, simplicity, and visual engagement.
- The Discover Tunisia website is designed to support the needs of different types of visitors.
- Below are the main goals users want to achieve when visiting the site:
- Learn about Tunisia quickly through clear sections, images, and descriptions.
- Explore destinations and understand what each place offers.
- Discover Tunisian culture, including food, clothing, and traditions.
- View high‑quality images to visualize the country before visiting.
- Find essential travel information, including contact details and location.
- Use a simple contact form to ask questions or request more information.
- Navigate easily thanks to a clean layout and responsive design.
- Stay connected through social media links and optional newsletter sign‑up.
- Enjoy a modern experience with subtle animations and interactive elements.
- This flowchart represents the navigation structure of the Discover Tunisia website.
- All pages — Home, Destinations, Culture, and Contact — are fully accessible from one another through the main navigation bar, ensuring smooth and intuitive browsing.
- The arrows in the diagram show the possible navigation paths, highlighting that every section can be reached directly without unnecessary steps.
🌀The flowchart was created using Miro to visually map out the user journey and overall site architecture.
User story:
As a First-Time Visitor, I need easy navigation and a user-friendly design, including a responsive layout for my device, so I can find information quickly and efficiently without frustration.
- The website is fully responsive across various devices and screen sizes.
- The site layout and navigation are intuitive, allowing easy access to different sections.
- Apply responsive design principles using Bootstrap to ensure the website is accessible on various devices.
- Arrange the site layout and navigation based on best practices, ensuring all key sections and pages are easily accessible.
User story:
As a Tourist, I want to see high-quality images and engaging descriptions of Tunisia's destinations and culture, so I can decide if it's the right place for me to visit and explore.
- The homepage features a hero section and high-quality scrolling images of Tunisia that rotate automatically and pause when hovered over.
- Engaging descriptions of destinations and cultural aspects are displayed clearly and concisely within the site's content.
- The homepage layout prominently features the images and descriptions in an uncluttered manner.
- Integrate high-quality images of Tunisia into the website using a CSS-based scrolling animation.
- Embed engaging descriptions for destinations and culture within the site's content.
- Design and implement a homepage layout that prominently features the images and descriptions.
3️⃣ User Story 3 – Detailed destination and culture information with interactive gallery (must-have)
User story:
As a Traveler, I want to find clear information about destinations, culture, and experiences, along with an interactive gallery of images with hover effects, so I can plan my visit based on my interests and preferences while visualizing the places.
- Clear and accurate information about destinations and culture is displayed and easy to find.
- Detailed descriptions are presented on dedicated pages.
- An interactive gallery includes hover effects and image modals.
- Display information about destinations using engaging content.
- Clearly present cultural information with detailed descriptions.
- Create an integrated gallery section with hover effects and image modals.
User story:
As a Visitor, I want to send inquiries using a simple contact form, so I can easily get more information or assistance for my trip.
- The contact form is easy to find and simple to use.
- The form includes all necessary fields: Name, Email, Message.
- All fields must be completed before the user can submit the form.
- When the form is completed correctly, the user receives a success message.
- Implement a contact form on the website.
- Apply HTML validation to ensure all required fields are completed.
- Create a success message or page to confirm submission.
User story:
As a User, I want smooth animations and interactions (e.g., fade-ins, hover effects), so the website feels modern and engaging without being distracting.
- Elements like buttons, images, and sections include subtle CSS animations.
- Animations enhance user experience without affecting performance.
- Add CSS transitions and animations to interactive elements.
- Test performance on various devices.
User story:
As a Visitor, I want links to social media for real-time updates and community engagement, so I can stay connected and see current happenings in Tunisia.
- Social media icons in the footer link to relevant accounts.
- Optional embedded feeds or posts if applicable.
- Add social media icons to the footer.
- Link to Tunisia tourism or related accounts.
User story:
As a Regular Visitor, I want to sign up for newsletters and updates, so I can stay informed about travel tips, new destinations, and cultural events.
- The website includes a newsletter sign-up form.
- The form is placed in the footer on every page.
- Integrate the newsletter sign-up form into the website footer.
User story:
As a Traveler, I want an interactive map showing key destinations in Tunisia, so I can visualize locations and plan my itinerary more effectively.
- An embedded interactive map (e.g., Google Maps) highlights major destinations.
- The map is easy to navigate and includes markers with brief information.
- Embed an interactive map on the destinations page.
- Add markers and popups for each destination.
User story:
As a Prospective Visitor, I want to read testimonials from other travelers, so I can gain insights from real experiences and build confidence in visiting Tunisia.
- A testimonials section displays quotes and ratings from visitors.
- Testimonials are presented in an attractive, easy-to-read format.
- Create a testimonials section on the home or culture page.
- Populate it with sample testimonials.
User story:
As a Prospective Traveler, I need to find essential information such as location highlights, contact details, and travel tips clearly and concisely, so I can easily plan my visit or get in touch.
- The website contains a dedicated section for contact details and travel information.
- This section is clearly visible and accessible from all parts of the website.
- Design and place a section for contact details and travel information.
- Ensure the contact section is clearly visible and accessible from all parts of the website, adhering to common design standards.
User story:
As a Tourist, I want a fun quiz or simple tool to help build a personalized itinerary, so I can customize my trip based on my interests.
- A quiz or builder asks questions about user preferences (e.g., beaches, history).
- It provides tailored suggestions based on answers.
- Implement a simple based quiz.
- Display results with recommended destinations.
The visual design of Discover Tunisia is crafted to reflect the essence of the country: warm, vibrant, cultural, and naturally beautiful. Every color, image, and layout choice supports the goal of presenting Tunisia as a welcoming destination rich in history, landscapes, and traditions.
-
Warm gold tones are used to represent heritage, tradition, and elegance. Gold reflects Tunisia’s historical richness, from ancient architecture to artisanal crafts, and adds a premium, modern touch to the interface.
-
Soft beige and white backgrounds create clarity, balance, and readability, allowing images and cultural elements to stand out without overwhelming the user.
-
Deep blues and Mediterranean-inspired accents subtly reference Tunisia’s coastline, evoking feelings of calm, travel, and exploration.
-
The palette is intentionally minimal so that the vibrant images of food, clothing, and destinations become the main visual storytellers.Warm gold tones are used to represent heritage, tradition, and elegance. Gold reflects Tunisia’s historical richness, from ancient architecture to artisanal crafts, and adds a premium, modern touch to the interface.
-
The website uses Playfair Display for headings to create an elegant, cultural, and traditional feel that reflects Tunisia’s heritage.
-
Lato is used for body text because it is modern, clean, and highly readable on all screen sizes, including mobile devices.
-
The combination of a serif font (Playfair Display) and a sans‑serif font (Lato) creates a balanced visual identity that feels both authentic and contemporary, matching the website’s goal of showcasing Tunisia’s culture in a modern way.
- All pages contain: Navbar, Hero and Footer
- The Home page introduces the website with a welcoming hero image, a short introduction, and a visual gallery that highlights Tunisia’s beauty.
- It sets the tone for the site and guides users toward exploring destinations, culture, and contact options.
- The Destinations page presents a collection of key Tunisian locations through images and short descriptions.
- It gives users a quick visual overview of the country’s most iconic regions and encourages them to explore each place.
- The Culture page is divided into four interactive sub‑sections — Food & Drink, Traditions, Arts & Crafts, and Traditional Clothing.
- Each tab presents a different aspect of Tunisian culture, allowing users to explore the country’s heritage in a structured and engaging way.
- All sections are accessible through the tab navigation at the top of the page.
- The four interactive sub‑sections are:
- This section showcases Tunisia’s rich culinary heritage through a grid of realistic food images.
- Each card includes a dish photo and a short description, highlighting traditional meals such as couscous, brik, lablabi, and mint tea.
- The layout is visual and appetizing, designed to immerse users in the flavors of Tunisia.
- The Traditions tab presents cultural practices, celebrations, and customs in a clean text‑based layout.
- Each item includes an icon, a title, and a short explanation.
- This section focuses on storytelling — explaining rituals, seasonal events, and daily cultural habits that shape Tunisian life.
- This section highlights Tunisia’s artistic identity through text cards describing traditional crafts such as pottery, weaving, wood carving, and mosaic art.
- The layout is simple and elegant, allowing users to learn about the craftsmanship and creativity behind Tunisian artisanal work.
- The Traditional Clothing tab displays a gallery of realistic images featuring iconic Tunisian garments such as the sefsari, jebba, barnous, chechia, and kachabia.
- Each card includes an image and a short description, helping users understand the cultural significance and regional variations of these outfits.
- The Contact page provides a simple way for users to get in touch.
- It includes a short checklist, a clean contact form, and a confirmation message after submission, making communication easy and accessible.
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
🖥️ Desktop Screenshots
📱 Mobile Screenshots
- My project was developed using a combination of modern web technologies and professional development tools.
- I used HTML5 to build the structure of my website, organize the content into sections, and create a clean semantic layout.
- I used CSS3 to style the entire website, control colors, spacing, fonts, and make the design visually consistent.
- I used Bootstrap to speed up the design process with its responsive grid system and ready‑made components.
- I used JavaScript to validate the contact form and control the custom popup that appears after submitting.
- I used VS Code as my main code editor because it helped me organize my files, preview my project, and work efficiently.
- I used GitHub to store my project online, track my changes, and keep a clean version history during development.
- I used Git for version control to track project changes and manage the development workflow efficiently.
- I used Canva to design the visual mockups of my website, helping me plan the layout, colors, and overall look before starting the coding phase.
- I used Miro to create the flowchart of my website structure, which helped me visualize the navigation between pages and organize the user journey clearly.
- AI tools played an important role in helping me build, improve, and polish this project.
- I used copilot to generate hero images for home and destinations pages & also the wireframes.
- I combined multiple AI assistants to benefit from their different strengths and get better results during development.
- I used GitHub Copilot directly inside VS Code as an AI coding assistant.
- It helped me by reading my project files, understanding the context of my code, suggesting improvements, detecting mistakes, and speeding up my workflow.
- I also used it to generate code snippets, refactor sections of the project, and even create hero images based on my ideas.
- I used both Claude and ChatGPT to assist me throughout the development process.
- Since each AI tool has its own strengths and limitations, combining them helped me get clearer explanations, different problem-solving approaches, better design ideas, and more efficient coding support.
- After spending an entire week working closely with AI assistants, the experience became surprisingly funny and human-like.
- At some point, Copilot even started replying with Arabic expressions, motivating me, checking if I needed a break, and encouraging me during stressful moments.
- It genuinely felt like having a supportive coding partner during the project journey
- All validation issues and debugging notes found after checking with W3C validators are documented below:
- This validation warning appears because HTML requires headings to follow a logical order.
- I used h1 and then jumped directly to h3, without an h2 in between.
✔️ Solution:
- To fix that, I added a h2 tag between h1 & h3
- 1️⃣ Error: “Bad value 100% for attribute width on element iframe”
- 2️⃣ Error: “Bad value 100% for attribute height on element iframe”
- These errors appear because HTML validation rules do NOT allow percentage values (100%) inside the width and height attributes of an iframe.
✔️ Solution:
- To fix the width and height errors:
- I removed width="100%" from the iframe and applied width: 100% using CSS instead.
- I removed height="100%" from the iframe and used CSS to control the iframe height instead of the HTML attribute.
However, one recurring problem deserves special mention:
-
During development, I frequently encountered a situation where updating one part of the CSS caused other sections to break or behave unexpectedly. This happened because:
-
Styles were shared across multiple components
-
Some selectors were too broad
-
Small changes cascaded into other layouts
-
Media queries overlapped
-
Old rules were still affecting new sections
-
This issue required repeated debugging and careful restructuring to ensure that updates in one area did not unintentionally affect others.
-
All detailed notes, examples, and fixes are included in the validation.me file.
-
✨The Lighthouse performance test was completed at a later stage of the project, which limited the time available for deeper optimization; further improvements are planned in future updates.
-
✨The following "could‑have" user stories are planned for future development and may be added in later versions of the project:
- Newsletter Sign‑Up Form — allowing visitors to subscribe for updates.
- Interactive Destination Map — helping users explore Tunisia visually.
- User Testimonials — showcasing real visitor experiences.
- Location & Travel Information Section — providing essential travel details.
- Travel Quiz / Itinerary Builder — offering personalized trip suggestions.
-
The website was deployed using GitHub Pages.
-
Below is the deployment process followed for this project:
- The full project folder was pushed to a GitHub repository.
- In the repository settings, GitHub Pages was enabled.
- The deployment source was set to the main branch.
- GitHub automatically generated a live link for the website
- After each update, changes were committed and pushed, and the deployment refreshed automatically.
-
Throughout the project, I made a consistent effort to commit as frequently as possible in order to clearly document every update, fix, and improvement.
-
This ensured full transparency in the development process and made it easier to track changes over time.