Giter VIP home page Giter VIP logo

walk-with-me-project's Introduction

#Walk with me | Meet Dublin It's my first project based on a webiste aimed to show the city of Dublin going on walking tours.

##Description The website has the homepage as introduction of the concept. 2 other pages; 1 with day walks and 1 with night tours, where the user can pick areas to visit, time and language of the tour. About us and contact page where the user can leave comments, feeback, etc.

###Images All images come from getty images (work account) and unsplash private account.

###UX The user needs to find a tour that he or she likes and book it. When enabled, a calendar should pop-up when clicking "book your walk" button. I tried to create a uniform style (colours and layout) thoughout all pages.

The form in the contact page means to be simple and to the point. When enabled, a "sent confirmation message" should appear when submitting the form.

###Features ####1. For the tour booking pages I used cards to present the different walk choices. The cards have a simple design with a clearly visible button with the CTA. They have also an intro text above to explain the user what to expect. ####2. The about us and contact page are built with 2 block. Un with text explaining about the page and one with a form for the user to fill out to contact with a choice of specific reasons.

###Technologies I used code from Bootstrap 4, HTML5 and CSS editing. I used Font awesome. I took some inspiration from previous projects from the course.

###Process After some fustrated few days trying to understand AdobeXD to create the wireframes, I wrote them on paper as suggested by my menthor. That was my only interaction with my menthor as he never got back to me after I sent them the wireframes.

I created the index page first and when I had it ready as a template for heading and footer I created the contact page. The contact page i taking a while to have the content fitting the background image or should I make the image to fit the content? This part is taking me a while to figure out.

Day and night tour pages are built last. One I have the day walk tours created, the night walk tours will be very similar in terms of layout.

I ended up changing back to my original idea of 2 section per page (except homepage). This way images and cards are all responsive.

###Testing After much researching and tweaking, I was not able to solve the problem of adjusting an image background to smaller screen size.

###Deployment I uploaded all the work to my github account.

###Comments ####17/09/19 It has taking me a while to come up with the concept and start with it. It's common for me to hesitate at first but once I have the basic structure created, I'm confident I won't stop. ####30/09/19 Getting used to editing the bootstrap code and getting used to the grid it ws a bit harder than expected. Tons of twicks and backs and forths. ####08/10/19 Working full time and being a full time time while tryig to do this project is very challenging. I'm struggling with time, energy and concentration. I must find my pace. ####13/10/10 I mananged to finish the project but I'm not fully satisafied. As mentioned above there are some responsive issues I think I'll be able to solve them further along the line as I progress with the course.

###Acknowledgments W3schools and FreeCodeCamp as well as documents from Bootstrap page have been very important at the time of finding my way around the code.

walk-with-me-project's People

Contributors

mariapsegarra avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.