This is taken inspiration from my Random Quote Machine project that I did for the freeCodeCamp Front End Development Libraries Project.
I had a selection of Mindful Meditation cards and I wanted to make this into a web page, this was to make it easily accessible for on the go or when I need to take a moment and practice Mindful Meditation.
This has 100 meditation to break you away from everyday stress and bring you back to a sense of calmness and to reflect on every day life and living!
A deployed version of my website can be found here
This domain will allow you to access the Mindful Meditation website.
This website is for anyone who wants to practice Mindful meditation and to calm their everyday life day. Filled with 100 inspiring Meditation quotes and practices to bring inner peace and calmness to their busy life style. Features links to my social media sites where they can interact with me directly.
- I want to be able to have ease accessed to a new and inspiring mindful Meditation Practice
- I want to have a calming theme and presence to the site
- I want the practices to be enlightening and ease to follow
- I want to experience a new Mindful Meditation Practice that is easy to follow and to understand
- I want it to be easily accessible on my desktop, tablet and phone so i can always access it when I would like to practice
- I want the site to be easy navigable on both desktop and on mobile so I can pick this up where and when I can
- I want to be able to see and interact with them via social media
- As a site owner I want to ensure the user generates a new Mindful Meditation each time the button is clicked
The wireframes were created using Adobe XD and the imagery can be found in the wireframes in pdf format.
| Desktop & Laptop | Tablet & Mobile |
|---|---|
| Home | Home |
There are some differences between my wireframes and my final website.
I decided to add a footer so users could interact with me or check out my other works in the social media links.
This section is a brief highlight of features that this site contains.
- This is vertially and horizontally central on the main view width
- This contains the meditation body that generates a new Mindful Meditation practice when the button is clicked
- Button to generate new Mindful Meditation practice at random
- Contains the copyright text, this is on the right side of the page which is then centred and on the bottom of the social media links on smaller screens for easy readability.
- Contains the ‘LinkedIn’ and ‘GitHub’ navigation links on the left side of the page and evenly spaced these are then stacked ontop of the copyright text, these are centred to the width of the screen
- All navigation links have an animation and a colour change when the user hover over the icon, this is so the user knows they are interactive and have a purpose
- The ‘LinkedIn’ and ‘GitHub’ icons opens a new window to the relevant page
- The footer runs along and is fixed at the bottom with no fill colour to make this easy to read and visual appealing
- I've used Adobe XD to create wireframes of my website before building the actual site.
- The project uses the Bootstrap framework to be a mobile responsive, useing prebuilt components, plugins built on jQuery, and Bootstrap styles to my site, before adding my own custom styling
- The project uses CSS to apply the custom styles to create the look of my site. The index.html file is linked directly to the styles.css stylesheet
- The project uses Font Awesome icons for all navigation and social media links that feature in the header and footer of my site
Google Chrome Dev Tools
- For testing purposes for responsive design
- Google fonts was used to import the chosen font into the HTML which is used throughout this project.
- The project uses HTML to create the basic elements and content of my site
- The project uses JavaScript from my custom script.js file to add functionality and interactivity to my site. This is the core focus of this project. The project also uses JavaScript from Bootstrap which is required to add functionality to the Bootstrap framework
- The project uses jQuery to simplify DOM manipulation. This is both the standard jQuery that is built with Bootstrap components
- I used Visual Studio Code as the development environment to write the code for my website
- I've used Git as a version control system to regularly add and commit changes made to project in Visual Studio Code, before pushing them to GitHub.
- I've used GitHub as a remote repository to push and store the committed changes to my project from Git. I've also used GitHub pages to deploy my website in a live environment.
Browsers tested: Google Chrome, Mozilla Firefox & Opera. The devices used in this testing include Samsung S10 v.Android 10.
Expected: when hovering over 'LinkedIn' icon, the icon changes colour Testing: tested by hovering over item Result: icon changes colour
Expected: when clicking on the ‘LinkedIn’ icon takes the user to my LinkedIn page Testing: tested by clicking on the ‘LinkedIn’ icon Results: link takes user to LinkedIn
Expected: when hovering over 'GitHub' icon, the icon changes colour Testing: tested by hovering over item Result: icon changes colour
Expected: when clicking on the ‘GitHub’ icon takes the user to my GitHub repo page Testing: tested by clicking on the ‘GitHub’ icon Results: link takes user to GitHub
Expected: the text to change and bring a new mindful meditation practice when the button is clicked Testing: click on the button to generate a new mindful meditation Results: mindful meditation changes to another random mindful meditation
Expected: button to generate a new mindful meditation when this is clicked Testing: click on the button Results: button changes the mindful meditation that is randomly generated
Expected: to be displayed and re-sized across different screen sizes and width Testing: re-layout the smaller screen and landscape screen for more visual readability and to make the most of the available space Results: multiple testing and layout plans to achieve the look, smaller screens have text and buttons stacked so they take up the full width
I used Google Chrome's Development tools to constantly test each change that I made to my website and to ensure that it appeared in the desired way on different screen sizes. I also tested my website on different screen sizes (mobile, tablet and desktop) to ensure it appeared in the desired way on different devices.
I used my own phone to test the orientation and how the site differs from portrait to landscape and to get a feel on the user experience.
W3C testing completed for: index.html No issues were stated.
W3C testing completed for: styles.css No issues were stated.
Font Awesome
-
Issue: Was not displaying the icons, was showing a square box display rather than the icon itself, these were also not re-directing to the desired linked site
-
Testing:
- Tested various CDN links to see if this displayed the icons - did not work
- Downloaded the Font Awesome css library to see if this displayed the icons - still was not showing the icons
- Tested removing of links, removing my own style sheet displayed the images; from this:
- Removed different elements from the styling to see if the icons were displaying,
- Removed the ::before and ::after elements and this showed the icons correctly
-
Results: Displaying and correctly re-directing the user to the appropirate site
-
Personal Note: I will research more into the ::before and ::after psuedo elements and see why this could be affecting the font awesome icons
The hosting platform that I've used for my project is GitHub Pages. To deploy my website to GitHub pages, I used the following steps:
- Loaded the terminal window in my visual studio code workspace
- Initialised Git using the Source Control in the control panel
- Files that have been amended are automatically listed in the ‘Source Control’ panel
- Add message in the ‘Message’ section, making sure the commits are clear and concise (re-checked previous commits for layout and what was fixed / still pending)
- Click the ‘tick’ icon which stored the files in visual studio code
- Click the ‘ellipsis’ icon and select the ‘push’ option
- This then push all files and commits to the main branch
- This will add the updated files into the ‘main branch’ option under the ‘GitHub pages’ section
- Ran several commits after testing was carried out throughout my project.
To run my code locally, users can download a local copy of my code to their desktop by completing the following steps:
- Go to my GitHub repository.
- Click on 'Clone or download'.
- Click on 'Download ZIP'.
- Once downloaded, extract the zip file's contents and run my website locally.
This website was a quick and fun site for me to practice more web development skills and styling .
Created by Ellie Judge