So a couple of years ago I decided to start showing people that traveling solo isn't that scary and that you can learn a lot about yourself. I have never been very happy about Wordpress, everyone has its own preference, and always wanted to do something else to make it more mine.

This second project is for me so to get back at sharing my experience with traveling with people that are interested in traveling but are not ready to take that first step. I don't just want to inspire them to take the first step just by writing blogs, I want to show then that this is a big world with beautiful place by sharing pictures I have made while I was traveling.

The goals for this project is to give people who want to start traveling to stop waiting till someone else will go with them, or for the perfect moment/time or what other reason they might have and just to start traveling even if that means alone. To get people to not only visit tourist spots in countries but to go explore what makes that county so amazing, most of the time it is not the tourist places. To make people go and do what they have always wanted to do in live but where scared to do or just put it in the category I will do that when the kids are older, on their own or even when we are retired. Even if travel is not part of that dream. It would be great if we could show people that there is enough to discover just around the corner from them because traveling doesn't mean you have to go far.

• For people that are looking for inspiration on next travel destination.
• For people thinking of traveling solo or with partner.
• For people that can use some extra encouragement in life.
• For people looking for pictures

• To be able to send a message throw the contact form.
• To be able to seen pictures from different countries throw the Google map
• To get information on the pictures like were taken, which country
• Interact with the website on different devices like desktop, laptop, and mobile.
• Getting information on traveling solo.

• I want to navigate this website with ease.
• I want to go travel but I could never go alone but no one has time to go with me.
• I have always wanted to go to this country but I have no idea where to go and what to visit.
• I saw your Instagram and I want to see more amazing pictures.
• I want to go ot less crowed places, tourist places.  

• All menu links work well and there is never a need to use the back button on the site.
• There are a couple of blog posts that talk about what I think traveling is, how I experienced starting traveling solo and what to do with those negative scenario's people keep telling you.
• With the map you can get an idea of all the places I have visited in the different countries I have been to and most of them are not tourist places.
• In my portfolio section in this project you can find more amazing pictures from places I have visited.
• There is an blog post about challenging myself to travel for more than 3 weeks with only hand luggage.

• Show my pictures to an audience.
• Tell people there are not alone in the way they think.
• Give people inspiration on visiting less popular places.
• Show people that can't travel how the world looks like.

I made my wireframe on the website moqups.com, it looked like a good website and easier to use then the last website I tried use. I made an mockup for the 5 differnent pages. My idea was to have almost the same layout on different devices, the navbar column and the larger column next each other. I have incert the pages in the project in the folder frameworks.

I thought the design looked good but after working on it and seeing how the project developt I found out that it is not going to work as well as I hoped, so I had to make some changes.

In the wireframe I have a footer on every page in the same colours as the nav bar but that became to much drakness when you came to the end of the page. Also the layout with the nav bar did not work correctly.

The idea was to put a photo gallery and the map on the same page and the gallery in different sections. While I was working on my photo gallery I saw that putting the map and the gallery on one page was not a good idea becasue it would be to much for one page.

So because the gallery and the map where to much information on one page I moved the map to the page explore.html. Where the map has enough space to be displayed, so that the user can see more than just a couple of countries.

The design I come up with for my project is different to most of the webpages that I see on a daily basis and involves a lot of pictures.

• The primary fond is Roboto because I think it is very readable and compact, it is used on all the main text.
• The secondary fond is Merriweather because I think the two fonts go well together. It is in the same style but it looks a bit more elegant. They don't differ to much from each other but it is very clear it is different.

All the social media icons I have choose are very understandable for everyone.

The colors for this project are #262626 and #ff8c00. I thought black #000000 was to harsh for what I wanted. So I choose #262626 to make the navbar stand out from the rest of the content of the page because the touch of grey in it makes it softer. I want to grap the users attention to the navbar but i do not to have all the attention, as I think the #000000 would do.
I choose #ff8c00. because I want to put a bit of my background in it. It pops out of the dark background and it has a special meaning to me. From there I started using it making sections clearer.

• Navbar
• Modal in Gallery
• Map
• Emailjs

• HTML
• CSS
• JavaScript
• Markdown

• Propper: Click here for Propper
• Google Fonts: Click here for Google Fonts
• For the main grid of the page:
  • Bootstrap: Click here for Bootstrap
• For my sidebar:
  • I have used the code from here to make the basis
  • Get some more information about navbar's
• To help me with creating a better README.md and documenting my project in a little more detail.
  • Github, Click here for Github
  • How a good README.md looks like
  • How a README.md looks like
  • My last project
  • Cheat sheet Markdown
  • Cheat sheet Emoji
• For Sending of my contact form I used:
  • To really send the contact form
• To get a better knowledge of some aspects that I need in my project
  • Window alert() Method
  • Pick a color
  • For giving me an idea how the color would look
• For my map:
  • Click here for Leaflet
  • How to use Leaflet
• To help put image in the center of page. Where I found the coordinates
• For my photo gallery:
  • I want to make a image gallery using a modal
  • Bootstarp model only showing backdrop
  • Reponsive JavaScript imag gallery .
  • How to make a modal.
• To compress my images.
• JQuery Click here for JQuery
  • I have used this for sending my email.
  • For making my modal in the gallery show up with the correct image and description.
• For validator I have used:
  • CSS validator
  • HTML validator
  • JavaScript validator
  • JavaScript validator
• To help me beautify my Html I have used Free Formatter

• Plan: My idea was one design that would adjust to different devices. So the navbar would be always about 20% of the screen and the rest would feel the other 80%. The gallery would be one column on the smaller devices and would get one column bigger is it was appropriate.
• Implementation: I thought I used the correct bootstrap grid in my project that would make it response correct with different devices. When testing in DevTools with the different devices options I found out that some of the sections did not respond accordingly. So this is a bug that I still have to fix but for now I have put different media queries in place to make the response to different devices better.
• Result: It looks good now on different devices. The layout on different screen sizes looks very simular although the flow of the different screen sizes is not perfect.
• Verdict: It works but not based on the expected behavior.

• Plan: I only had a global idea for the design. The navbar would have a darker color and the other column would have an image on the background. I want to make the navbar different and interesting and the rest of the pages interesting. I also decided to put nothing on the home page to lat the background image speak for it self. Make it a pick into what is to come.
• Implementation: I didn't think that the darkest black worked well voor the navbar, it was to much so I went with a black that is a bit more grey. I played around with different orange tints to see which worked better and I feel this one works good. The idea of an image in the background of the larger column did not work in the pages where there was more than just a bit of text. It clashed to much with each other and it did not make reading the text pleasent.
• Result: I have heard that my colors work good together and that the navbar is something different to most websites that we see daily. Not everyone agrees with my idea for the home page to only show the image.
• Verdict: It works based on the expected behaviour.

• Plan: I wanted to have a vertical navbar on the left side of the page, it would be stuck there even if you needed to scroll down. It should be responsive so it would make sure it would always be max 20% of the screen, no matter what device.
• Implementation: Making sure the navbar would stick to the left side was easy when I did not have any other content. When I was making the larger column I stumbled on some difficulties. The larger column would go under the navbar. I made a two column grid but this would end up in either the larger column being under the smaller column or the larger column moving under the smaller column. So I had to go back to making the columns stand separte from each other. This makes them stand next to each other.
• Result: It works how I was hoping only it is not responsive as I would have wanted it.
• Verdict: It works but not based on the expected behavior.

• Plan: The idea was that an user would click on a image and that this image would appear bigger and with a discritpion of where the images was taken.
• Implementation: The modal worked fine when I usede the modal button but I needed it to work from clicking on an image. The click event was written ad working first. After that I wrote the part where the image and description where appended in the modal. It first would keep the data so I would get double or tripple the data. After changing that the most difficult part, or at least I thought so, making that it know what image is clicked and the correct data to append in the modal
• Result: When you click on an image this will make the modal to appear with the correct data but only if you click on a white space next to an image the modal also will be appear and that should not be happening.
• Verdict: It works based on the expected behaviour.

• Plan: The plan for the map is that there are different markers on the map over different countries. When the user clicks on a marker it would take them to an picture that was taken at that place.
• Implementation: Making the map was the most difficult part in this all project. After I tried it for 3 times before without any luck. I hit it big, my map appeared in my webpage. After making the map the most difficult was remembering where the images where taking so I could place the marker on the correct place. I made the images bigger to make it better to view them. I have to cluster some of my markers so it is easier to see that there are more than one.
• Result: All the markers and the corresponding popups with images are visable and work correct. When you put in a place in the search bar the map will go to that place on the map.
• Verdict: It works based on the expected behaviour.

• Plan: In my last projct I also made a contact form but I didn't know how to make the form send. I have had a lesson on how to send contact form using Emailjs API. So this project I needed to make it send to take a step forward.
• Implementation: It started all very simple as in the lesson but when it came to writing the function it went wrong. Because the template I made was different to the template that I had to make in the lesson. So I had to change that.
• Result: I recived an email after sending the contact form.
• Verdict: It works in the expected behaviour.

• Ajay Ajodhia

"The interface and the colours makes sure that the website has a calm atmosphere. The text is well and clearly written. It is very welcoming for first time visitors. The map and the gallery has a good interactivity with the pop-up screen. The gallery itself is well organized. The blog has chapters and that is very welcoming. And in the blog. The different blog posts are seperated by borders which has two different colours from eachother."

When submitting contact form it gave an error.

Solution: I had used the wrong value names in my function so when I gave the values the same names as the parameters I was able to send and receive an email.

After setting up my Google maps API it was not showing a map.

Solution: Tutor Scott Kipp saw that my function was targeting an ID but in my HTML file I put in a class. So I only had to changed the class in to ID in my HTML file .

My background image would not cover the entire page or would through off the navbar.

Solution: Tutor Tim Nelson has looked at it and found that with less css and when put in the body element it works. It will still be under the navbar but it covers the entire page.

Container keeps sliding under the navbar.

Solution: I gave the container a margin-left of 220px to push it from going under the navbar.

All images are in a folder in VS code. Some of the images are turned sideways on my page.

Solution: I have tried many things but when I was working on my map and was looking for it on my page all the images where in the correct position.

Every time I would click on an image to make my modal appear it would do +1 on the image and description.

Solution: I had to put in my code that the Id's where empty before append the data in there.

While working on my modal function, the modal didn't show any more only the backdrop.

Solution: I had to rename the Id of the model and close a tag and it showed again.

The images in the gallery take to long to load and some of the images are turned on there side.

Solution: Turns out that my images where to big so i had to compress themto make them easier to load for the internet browser.

• Sometimes the images are slow to load.
• The website only looks good in Chrome, gallery images, background image and when srolling down and than up and than down again the bottom of the navbar is to slow with responding.

This project was developed using the Visual Studio Code IDE, committed to git and pushed to GitHub. To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub.
2. From the list of repositories on the screen, select ceciliabinck/binck-explores-project.
3. From the menu items under ceciliabinck/binck-explores-project, select Settings.
4. Scroll down to the GitHub Pages section.
5. Under Source click the drop-down menu labelled None and select Master Branch
6. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
7. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
8. Click on the link to see the website of ceciliabinck/binck-explores-project, https://ceciliabinck.github.io/binck-explores/

Cloning Binck Explores from GitHub:

Navigate to https://github.com/ceciliabinck/binck-explores. Click the green 'Clone or Download' button. Copy the url in the dropdown box. Using your favourite IDE open up your preferred terminal. Navigate to your desired file location. Copy the following code and input it into your terminal to clone binck-explores. git clone https://github.com/ceciliabinck/binck-explores.git

Most of the contant in this project are frome the webpage Binck Explores. The rest of the content is written by myself.

The photos used in this site were obtained from the folder photo's on my computer. All the photos used on this site are made by myself while traveling different countries.

I want to thank Tom Dignan for all his help especially when I switched over from cloud9 to Visual Studio Code. Ow what was that difficult to set it up so that I could and I couldn't have done it without his help. he also gave me feedback on different issues I have had. Tom is the best 😃.

Tim Nelson for all his help when making my map and making it more understandable. Now I feel a lot more confidant that I can make another map that looks as good as this one.

I received inspiration for this project from my frustration of my lack of knowledge to work with Wordpress.