Giter VIP home page Giter VIP logo

vasaskeppet's Introduction

Vasa Skeppet

This is my first project done for code institute. Its an simple website for people intersted in the history of the Vasa ship.

The main goal with the website is to create a melting pot for people who are interested in the history of the Vasa ship and want to follow all the new reaserch that is made related to the Vasa Ship. As described the website is simble in its nature and should be seen as the site to sign up for and follow if you are on the hunt for new information about the Vasa ship.

am i responsive site test

features

Navigation

  • provides link to different sections in the page, home, sign up etc
  • Have the main heading for the page in the upper left corner
  • the navigation respons to different screen sizes

image displaying the navigation

Header

  • hero image that displays the Vasa ship
  • gives the user option to scroll down to watch the ship or press jump links to sections

image displaying the vasa ship inside the museum

Interesting Facts/More Information

  • This part of the page gives some nuggets of facts to spark interest about the Vasa ship
  • The more information part is so that interested readers can look up some more about the Vasa ship in an easy way image displaying the Interesting Facts/More Information part

Sign Up Form

  • The sign up form is so that the user can subscribe to the weekly newsletter that gives out facts/happening around and aboout the vasa ship
  • The form demands that the user put in a full name and an valid email adress

image displaying the sign up form

The Google map

  • The map section was important to the page because it brings a conection to the Vasa museum and creates a bridge to something real
  • The map is used through Google map and it shows where to find the Vasa museum in Stockholm, Sweden

image displaying the Google map section that leads to the Vasa museum

problems on the way, positioning, the hyperlinks to work properly problem with the anchor to link to the headings

Testing of The Website

  • the website is validated through:
  • W3C validation (HTML)
  • Jigsaw validation (CSS)
  • accessibility (Lighthouse)

image displaying the lighthouse validation

Color Palette

-Got the palette from This website

image displaying the color palette

Bugs

  • had problem with the css not loading correctly when uploading the website
  • early bug that made the jump links in the navigation un clickable

Solved bug

  • solved the bug through the changing of the source (assets/css/style.css) instad of (/assets/css/style.css)
  • The hero image div was layered over the jump links in the navigation, changed that so that the links works

Deployment

The site was deployd through Github pages

Credit content

Pictures

The picture was taken from the Vasa museum website

vasaskeppet's People

Contributors

albinhall 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.