Giter Club home page Giter Club logo

cathalshandon-my-first-project's Introduction

Dzogchen Beara

Welcome!

Introduction

Dzogchen Beara is a website designed for Tibetan Buddish Retreat centre on the wild atlantic way. Dzogchen Beara is part of Rigpa, an international network of Buddhist centres dedicated to making the Buddhist teachings of meditation, compassion and wisdom available to the modern world. The site provides information about the centre and things you can do there. The main aim of this project is to encourage people to visit Dzoghen Beara and to get vital feedback on their stay.The site is targeted to people who are looking to go on a retreat and to get a break from their busy and hectic lives.

A live website can be found here

website preview

Table of Contents

Table of Contents

1. User Experience

2. Features

3. Technologies Used

4. Testing

5. Bugs

6. Deployment

7. Acknowledgement

1. User Experience

Most adults at some stage might feel stressed or under pressure during their busy days. Perhaps some have anxious feelings and worries can develop at certain time in their life.

Users of this site will gain information about the retreat and what you can do there like meditating and getting rid of all their stress and worry. The site also has a link in it for book to book a stay at the retreat.

The user can also navigate through the site easily, understand the information being presented, give feedback on their stay and view the websites clearly on different devices.

1.2 Site Skeleton

Balsamiq was used to create wireframes of the website. This was very useful as it gives the template of the UI. Wireframes were designed for web browser and a mobile browser format. The concept design (wireframes) of webpages prepared is presented below.

Home Page

Desktop Version

Mobile

Gallery Page

Desktop Version

Mobile

Feedback Page

Desktop Version

Mobile

2. Features

Go to the top

Home page:

  • A picture of the temple looking across the ocean is displayed just below the title.
  • The page contains the title "About" which is divided into four divisions. The first being the location and the community, The second being spiritual, third being the history of the locality and the fourth being the accommodation with a link to the page where can book a stay.

The screenshot of Home page is below:

home page preview

Gallery page:

  • The gallery page just has the title Dzogchen Beara and is again divided into four sections with pictures.
  • The first is "Meditation" with image of people medidiating and the benefits of medidiating, second is "Amazing views" with image of the centre overlooking the altanic ocean, third which is the "Cafe and Shop" image of the shop and opening times, and the fouth being "Shrine Room" image of people medidiating in the shrine room and information about the room.

The screenshot of Gallery page is below:

gallery page preview

Feedback page

  • The feedback pages includes the ability to message the retreat, provide feedback and suggestions.
  • Includes giving a rate on your stay forms where users can choose the options from (strongly agree, agree, neutral, disagree, strongly disagree) using radio-button option.
  • The Submit and Reset buttons with hoever effect on it
  • The form use the method="POST" action="https://formdump.codeinstitute.net/"
  • I use the option of placeholder for full name and email address.

The screenshot of Feedback page is below:

feedback page preview

3. Technologies Used

  • HTML5 (markup language) was used for structuring and presenting content of the website.
  • CSS3 (Cascading Style Sheets) was used to provide the style to the content written in a HTML.
  • Balsamiq was used to create wireframes of the website (desktop and mobile version).
  • Google Fonts was used to import font-family "Playfair" and "Roboto" into style,css file and which was used throughout the pages of the website.
  • Font Awesome was used to improt icons to the sites.
  • Chrome was used to debug and test the source code using HTML5 as well as to test site responsiveness.
  • Github was used to create the repository and to store the project's code after pushed from Git.
  • Gitpod was used as the Code Editor for the site

4. Testing

Go to the top

4.1 Testing using tools

4.1.1 Google Developer Tools

I made use of google developer tools (Chrome DevTools) as a debugging tools. When using this tool I inspected for every elements that I added in HTML and CSS style. Once I was happy with them I copied the CSS style code from Chrome DevTools and paste in my CSS style sheet.I also used the the tool in order to make sure that design web pages are responsive to all device sizes

4.1.2 W3C Validator Tools

W3C Markup was used to check for any errors within my HTML pages.

All 3 pages:

Navigation bars

TEST OUTCOME PASS / FAIL
Home page When I click on "Home", the browser redirects me to the Home page. When I hoever over the "Home" it underlines it. PASS
Gallery page on click "Gallery", the browser redirects me to the Gallery page. The hoever effect underline appears when mouse is on "Gallery". PASS
Feedback page on click to "feedback page", the browser redirects me to the feedback page. The hoever effect underline appears when mouse is on "feedback page". PASS
Responsive All pages and elements were responsive (mobile and website) using different breakpoints. PASS
Text Checked if all fonts and colors used are consistent or not PASS

Footer

TEST OUTCOME PASS / FAIL
Facebook on clicking Facebook icon, a new tab opens and redirects to the Facebook website. PASS
Twitter on clicking Twitter icon, a new tab opens and redirects to the Facebook website. PASS
Youtube on clicking youtube icon, a new tab opens and redirects to the youtube we. PASS
Instagram on clicking instagram icon, a new tab opens and redirects to the instagram website. PASS

Home page

TEST OUTCOME PASS / FAIL
Media Hero image checked to ensure it loaded . PASS
Responsive All pages and elements were responsive (mobile and website) using different breakpoints. PASS
External Links Checked if the external link "Book here" redirect to the Accommodtion page and open in new tab. PASS
Accessssibilty Checked the accessibility of the page using lighthouse PASS

home-page accessibility

Gallery page

TEST OUTCOME PASS / FAIL
Media All images on the pages load. All images were checked if it blurred in different screen sizes. PASS
Responsive All pages and elements were responsive (mobile and website) using different breakpoints. PASS
Accessssibilty Checked the accessibility of the page using lighthouse PASS

gallery-page accessibility

Feedback page

TEST OUTCOME PASS / FAIL
Radio buttons Checked if radio button works or not. PASS
Responsive All pages and elements were responsive (mobile and website) using different breakpoints. PASS
Accessssibilty Checked the accessibility of the page using lighthouse PASS
Google maps Checked if google map when clicked on view larger map redirect to the google map page in new tab works ot not PASS
Submit/Reset Checked if submit and reset button works or not. PASS

feedback-page accessibility

5. Bugs

  • When I checked the accessibility of the feedback page I discovered I forget to add title to the iframe (google map). I solved it by adding a title "google map".
  • W3C html validation did not pass for the index page and has an error " No space between attributes.". I solved this by simply putting a space between the website adress and the target.
  • W3C html validation also had a warning for index page "Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections." I didnt try to change this because i didnt think it was absolutely necessary.

W3C html validation

6. Deployment

  • Sign up to GutHub
  • Create a new repository on GitHub.
  • Click on settings on the navigation bar under the repository title.
  • Select pages on the left menu bar.
  • Click on the main branch and save.
  • This will now generate a link with your website live.
  • The live link can be found here -(https://cathalshandon.github.io/my-first-project/)

7. Acknowledgement

Code

  • The code for the "About" section came from the love running project.
  • The code for the footer came from the love running project.
  • the Icons for the footer came from Font Awesome.

Content

cathalshandon-my-first-project's People

Contributors

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