🏠 https://ceciliabinck.github.io/Travel-with-Rajesh/

Because this company is know on Facebook and Instagram under this name I did not change the name. It would have been strange if the website would have a different name then their Facebook and Instagram.

I want to help this company to reach more users. They can use this page in combination with their other social media. What makes this company special is the fact that it is still a small company, so they will guide you from the frist to the last step. I hope with making this website users will find them on there online search for a company to do some amazing activities in Nepal with.

What I want to bring for the external users is a clear overview of all the different possible tours and trekking that his company offers. What they can expect on those tours and maybe even getting an idea of what the surrounding looks like with the photo gallery. With the different reviews I want to show them that this company will go the extra mile to give them a great trip and maybe even an once in a life time experience along the way.

I wanted to keep the colors neutral because I did not want it to stand out to much against the different pictures that are on the site. I wanted to high light some pictures showing how amazing Nepal is. I also did not want it to be to busy to scare of some users.

I made a dropdown in the navbar to make it easier for users to find different sections on the trekking and tour page, the text on these pages can be a bit overwhelming especialy on the trekking page. There is a lot of information there. A colleauge told me all that white doesn't read very good. So I made some changes to the colours of the background as where it is easier to distinct the different region/sections on the page.

I also heard they will modify a tour or a trekking to your needs, some want more comfort then others. I put that in h4 centered underneed the page as there wasn't really a good place any where else. I put a link next to al the trek and tour names with a star symble to link them to this information.

If you fill out the contact form correctly it will send you to the success.html, with the message that your message has been send to the company. As I am not sure yet how to make a alert that it has been send in a pop up.

This website is for users that are intersted in traveling to Nepal. Whether it is for an adventures and active or a leisure holiday it is all possible in Nepal.

Users how are interested in a holiday in Nepal, can find different treks to do in Nepal. With every trek there is listed if it is an easy, medium or hard trek. This is not specified with the tours because the are more of the easy kind.The tours can be modified them to make them easier or harder if the user would want to. They can also read in the discription what they can expect on the trek and there is even a link that will take them to the gallery page. On this gallery page they can see pictures of how that region looks like to get an better idea of what kind of view they can expect.

As a user type:

• I want to do a trek up to Mt. Everest, so that I can get it off my bucketlist.
• I want to see how people live in Nepal, so that i can learn more about the cultural differences in different countries.
• I want to see the highlights of Kathmandu, so that I can mark Nepal off my to go list.
• I want to see kathmandu, so that I can find the best places to shop.
• I want to see a rhino, so that I can tell everyone they live in more places then just Africa.

I have tried to us the website Mockbird, https://gomockingbird.com/home. To help me make the different frameworks for this page. I have to be honest I did not know how to use it. I was able to work some aspect of the site but not all. I had just had a meeting with Rajesh Timalsina and it was still fresh in my mind so I draw it on paper. I have incerted them in the repository in the folder mockups.

• Home page. On this home page users can find more information about the company and the people behind it. They can also find some reviews that people left after using the this company.
• Trekking, here users can find all the different trekking that this company offers.
• Tours, here users can find all the different tours that this company offers.
• Photo gallery, to show users the beautiful surrounding and give them an idea of what they can see on the way.
• Contact Form, help them get in contact with the owner for information or book a tour.

Feature 1 - Allows useres to get an idea of what kind of company it is and what oter people think of the company and there staff. Feature 2 and 3 - Will give users a better idea of the kind of possibilities there are for there holiday in Nepal. They can see if it suits there expectations on what they would want to do on there holiday, by reading the difficulty range. Feature 4 - Allows users to get a sneakpeak in to the beautiful country and give them an idea of how the different regions look like. Feature 5 - Allows users to get more information or book a tour/ trekking for there holiday. By having them fill out the contact form,which allows the company to give feedback back to them.

• A place to send the contact form to. I don't know yet how to link an email address to the contact form. So that when users fill out the contact form, they will get an suitable anwers back on their question or booking.
• Also an message that tells users they have filled in the contact form correctly and that is has been send.
• A up button at the trekking page, to go to the top of the page again. A colleauge of mine suggested this to me because he found this as an user easier to go back to the top og the page, as to scroll all the way up again.
• When you click on the pictures that a pop up of the picture will appear. Als the pictures in the gallery appear quite small it would be nice that when users click on it, they will get an pop up of the picture in a bigger size. So they can have a better look.
• Put prices on the page. When users are looking for things to do on there holiday they would like to have an indication of what the cost would be, at least I would want to know. I have been told that because of the different factures during or preparing for the tour/trek can effect the price. So it makes it difficult to just pot down a price.

• HTML
• CSS
• Markdown
• jquery
• popper

Bootstrap, https://getbootstrap.com/ I have used it to style:

• Footer
• Navbar
• Review section
• About us

• W3school, https://www.w3schools.com/. For some extra help with
  • Center Align Text
  • How to make my dropdown
  • To make message text area bigger in my contact form.
• Slack, thanks to Sean Murphy for helping me with my internal link and Richard Wells for hepling with my contact furm issue.
• Fontawsome, https://fontawesome.com/. I have used it to make the social media more visable.
• Webfx, https://www.webfx.com/tools/emoji-cheat-sheet/. To get some emoji's in my markdown.
• Facebook, I used information for the review section from the facebook page Travel with Rajesh. So that people can see that real people left those reviews and where not made up just for this webpage.
• I have used the mini project whiskey drop and love running. I used the navbar and quote section of whiskey drop and changed it to suit my layout. From love running I used the cover-text to get the name of the page show up on my cover picture and for there contact-form.
• code institute, https://codeinstitute.net/. To watch back some of the video lessons I found interesting to make this website.
• stockoverflow, https://stackoverflow.com. To help me center my contact form in a better way and where the anwser of my 405 error came from.
• Wikipedia, https://en.wikipedia.org. To help me look up the hights of different peaks/mountains
• Make a readme, https://www.makeareadme.com. To get an better idea of how to write a good readme.md but it wasn't very helpfull.
• Google/Yahoo, https://www.google.nl / https://nl.search.yahoo.com. with translating words from Dutch to English and with finding out how to spel some English words. As I am not a native speaker of Engilish I would like my writing to be in correct English. With if possible not that many spelling mistakes.
• Yandex Translate, this is an app on my phone that helps me find the correct spelling to the english words I want to use. It translates the Dutch word to English.

My goal was to keep the layout in the different screen sizes the same. Then the user will not get confussed about if they where still on the same page or not. I have learned that when you work with a smaller screen size some elements just take up to much of the screen estate and it would make it look messy, so I had to change some elements.

I have used Bootstrap for some elements in this project, that I have already practiced in the video lessons. So these elements would change when I put the view browser in a Different screen size. I have tried to use it for more elements but after testing them in the browser view, I saw that they did not work. I still have to read up on how to use Bootstrap for different elements. Because just copy and past them is not going to help you figure out what you did wrong when it does not work, that is what I found out.

I know that the navbar had to change in the smaller screen size. Otherwise it would be to messy and to big for the screen. I also wantedto have a dropdown in my navbar, I made one in the mini project whiskey drop. As naive that I was, I thought just copy and past it and it works, that did not work. After a while I remember reading on Bootstrap that in some of the cases you need to use popper.min.js. So I thought I will just watch the video lesson again and then I will see how it worked again. This when I found out they changed it for a different mini project, so no watching back.

I copied the scripts from my mini project and started experimenting with leaving one out and seeing what would happen. Testing it this way one by one made me see what the difference was and if my navbar had a dropdown or not. I was very happy when I found out that i needed all of them but more by the fact that it was working. As I think the dropdown sections in my navbar are very important for users to navigate this site.

Thanks to the Bootstrap it also changed when I would go to a smaller size. The dropdown in the navbar takes up a bit of space when in use but it will go back up when you are done with it. So on the smaller screen the column of the navbar looks the same, color wise but all the different pages are now hidding behind a button with three stripes. I modified it so it fits better in my site, it doesn't have the logo in it and the dropdown text comes out Centered and not to the left.

I didn't have to think long on how I wanted my footer to look like. I wanted it in three sections with two of them linking to a different page and with the third linking to social media, it is very important now a days. I made a similar footer in another mini project, so I copied the code and tested it in my browser viewer. Then I changed the content and the links to suit my site. Because of the Bootstrap code it changed correctly when I changed screen sizes.

In my mockup I made my header with a big image and on there the logo, so i just had to make it. It took me a couple of trys to find the image that would work for this site. I put the code for the image in my css so that my code in index.html would be better readable. I have made a couple of mini projects where I made text on an image appear, so I did the same here.

When I went to test it in teh different screen sizes, I saw that the idea that I had changed to much. I looked in to Bootstrap if i could find anything that could help me but I was overwhelmed and I could not find anything that I thought could help. I rememberd that in the beginning of the course I learned about media queries. So I made four different media querie for the different screen sizes. I had to modify the height and change the font size of the logo in every query to make it look the same. I used the inspect tool in chrome a lot to figure out what worked for what size.

I also tested the browser viewer in the restore down mode and then making it smaller and bigger. I saw that the screen changes when it hit the different media screen queries. But inbetween these media queries I saw that they image did not really look the same, the changes are small but they are there. Not sure if that is because the image that you see is part of a bigger image or not. I have seen the same in some of the mini projects that the image is displayed a bit different.

I chose to go with a mobile approach when it comes to my media queries as I have learned it will make it easier with loading the page on a smaller screen.

For most of the content between the navbar and the footer I have not used Bootstrap. Even with the elements where I have used Bootstrap, I notice they they did not change to the way I liked. So with the help of the inspect tool I changed the layout of the four different screen sizes. I found out that some of the elements I only had to change in the smaller screen size and the biggest screen size. These elementa worked the way I liked them to in the other two screen sizes.

I also tested the browser viewer in the restore down mode and then making it smaller and bigger. I saw that the screen changes when it hit the different media screen queries. But inbetween these media queries I saw that they layout did not really look the same, the changes are small but they are there. I did not have time to look deeper in to this.

Go to the "Contact" page. Try to submit the empty form and verify that an error message about the required fields appears. Try to submit the form with an invalid email address and verify that a relevant error message appears, these messages appear in the language you have your device in.

Try to submit the form with all inputs valid and for a while it would give and error message as there was no where to send or link to after submiting. I didn't think that was a very solution, as I don't know how to make it send just yet. So after thinking about it and asking people in slack i decided to make a separate page with the message that it has been send.

So when you submit the form with all inputs valid it will verify this by sending the user to the success.html, with the message that the message has been send to the company. This works very good in chrome when in my viewer browser. Turnes out it dit not work when I used the official https. I have tested it on a mobile device and Microsoft Edge instead of going to the success.html, with the message that it is send to the company, it gives an 405 error.

I have not been able to get that bug out of it.

After looking for help in Slack and after Richard Wells saw the 405 error he did some research. He found out that the issue is pages hosted on github pages don't allow Post Method (taken from stackoverflow - GitHub pages can only serve static content, and there is no way to run PHP on GitHub pages or upload things. That's why GitHub doesn't allow POST requests. If you need server side scripting (E.g. PHP), you'll need to use a web host which offers these things.)

So after removing the Method="post". I tried to submit the form with all inputs valid and it verified it with showing the succes.html with the thanks you message.

The user how wants to trek to Mt. Everest, the user will click on trekking in the navbar and then select Everest region, then the user will see all the trekkings that are possible around Everest.

The user how want to do experience life in Nepal. This use to be more difficult to find because the trekkings are arraged on regions. Dhading region is the region Where the homstay is located under. So I put in the about us section a mention about the homestay, so that it is easier to find. So now the user will click on trekking in the navbar and then select Dhading regin, then the user will find the homestay trekking.

The user how wants to do a tour of Kathmandu, the user will click on the tour page and then select Kathmandu, then the user will see all the tours that are possible around Kathmandu.

The user how wants to see a rhino, the user will click on the tour page and then select Chitwan, then the user will see all the tours that are possible around Chitwan national park.

When the user has found they are interested in, the user will feel in the contact form as a first step to getting a tour made for them, in ther price range.

I had worked with Cloud9 and Gitpod but for different reasons I decided not to use them. I made this project in Repl.it, I have to say it is easy to use. storing changes it GitHub is made very easy to. I choose Replit becaise it is easy to use, I don't have to worry about running out of credit and it is easy to see the result instead ofnin a little screen on the same page, to view it in a browser page. While I am working in Replit it automatically saves changes as I make them.

The one thing I am not happy about with Repl.it is the fact that it just puts all the pages you have change under each other and you can only write one commit for all the pages you changed. This made it difficult with saving changes in GitHub, I have a lot commits that are longer or for 8 or so pages all the same. Sometimes I worked on more then one page or I just keept working / changing things in different pages. I would be so focused that I forget to commit things in the order I would go. I know in Cloud9 and Gitpod that isn't any problem because you can just select the pages you want to commit to gether but in Replit that is not yet possible. That made for maybe a couple of strange commits.

After I deployed my project I found out why you should not use capital letters in the name of your website. It makes it difficulter to find. I had someone look at my website and he typed everything in small letters en we got an error that it could not be found. I changed the capital letters to small letters and asked him again to look it up. But it did not make any differance. That was when I found out that I made this mistake.

• The dummy content for the section about us that is supplied by myself as the owner was working at the time I was making this project.
• The content for the section reviews was copied from the facebook page of Travel with Rajesh.
• The content from the trekking page is supplied by the company Travel with Rajesh.
• The contant of the tour section is dumby text of one of the tours that can be found on the Facebook page of the company.
• The dummy content from the contact page is supplied by myself.
• The dummy content from the succes page is supplied by myself.

• The pictures in the review section, these are obtained from the facebook pages of the four people how left a review on the facebook page of Travel with Rajesh.
• The dommy photos in the gallery.html are from Rajesh Timalsina amd from myself.
• The main picture plus the picture in the about us section is from the facebook page from Travel with Rajesh.

• I would like to thank some of my colleagues for giving me suggestions on how to make this site more appealing for users.
• My mini projects that I have done. It gave me somthing to fall back on. I don't know if I could have done it if I didn't make those, How I made those is sometimes still a mistery to me.
• I would like thank the people on Slack that help me figure out issues that I had.
• I received inspiration for this project from my friend Rajesh Timalsina. He started his own company as a guide, to provide for his family and his future. He would be able to get a better income if he was his own boss then working for someone else. He found out that it was difficult to get jobs, even though he has his instagram and facbook page. I wanted to help him with getting, hopefuly, more known under all the tourist that go to Nepal every year to do trekking or tours through this beautiful country.