Welcome to the Website that will allow you to learn Human Nature with Robert Greene, the modern Macchiavelli. The site offers an overview about the books of Robert Greene and how they will allow you to get invaluable insights about Human Nature, helping you to know deeper your persona and to navigate wisely the social arena.
Master Yourself has a simple and user-friendly design, and a captivating look aiming at conveying the golden value of the content of Greene's books.
The live link of our site can be found here - Master Yourself.
- Master Yourself
- Content
The Master Yourself Website targets an audience of people interested in self-development, working mostly in business, politics or in social environments where people skills are fundamental. It aims as well at reaching anyone who is eager to learn more about Human Nature, to know oneself and the others thoroughly and ground their life and personal development in reality, past the pain and boredom of everyday life.
- As a first time user I want to understand the main purpose of the website and learn about why I should read the books of Robert Greene
- As a first time I want to have a website that is easy to navigate and that would spark my interest
- As a first time user I want to have on overview of all the books of Greene and get some free content
- As a returning user I would like to get an overview about which book of Robert Greene I could read next
- As a returning user I would like to get an additional free eBook
- As a returning user I would check the video and the "About the author page" to know more about the background of the writer
- As a frequent user I want to signup to the newsletter to get weekly practical advices in the field of self-development
- As a frequent user I want to get all the 7 free eBooks that are available on the site
The colors chosen for Master Yourself are black, metallic gold and cerulean blue. The first two recall the colors of the cover of Greene's book entitled "Mastery". Gold symbolizes wealth and prosperity, abundance and accomplishment throughout history, reminding that Greene's books are a mix of distilled wisdom from the biographies of multiple successful historical characters. Black symbolizes elegance, power, restraint, fear, evil and occult. It represents how Greene's books take deeply into analysis the negative emotions of human beings, the dark side of human nature, but teaches as well how to control and master them for our own goals and wellbeing. The color blue can be found only in the window on the index.html. Blue represents open spaces, imagination, the serenity and freedom that we can achieve with wisdom and knowledge.
The Font chosen for the text on all the pages is Lora. Purpose of the font with the golden color is to be elegant, easy and pleasant to read. In the Newsletter section there is a live icon with a "jumping" book, that invites the visitor of the site to get the free eBook.
Images used for the website are photos of Robert Greene both in younger age - on the "Home" page - and as he looks today - on the "About the Author" page. On the pages "The Books" and "Get your free eBook" there are the captivating covers of his books.
The wireframes for the "Master Yourself" website were created with Balsamiq.
1-Wireframe for Desktop
2-Wireframe for Mobile
The navigation menu can be accessed by clicking on the black round icon on the top left corner. When clicking or hovering on it each time - clicking for mobile version, hovering for the desktop version- the colors of the text and the background will reverse - from black to gold and from gold black - to facilitate the navigation.
- In the landing image there is a younger Greene than his current age, who looks ambitious, clever and successful. The photo should mirror the personality of businessmen and politicians who would like to be like Robert Greene, or anyone aiming at self-developing.
- On the left of the image there is a blue cerulean window introducing the worldwide reputation of Robert Greene as the modern Macchiavelli
- Under the landing image of the Home page, there is a short introduction about the writer and a list of reasons about why the visitors should read the books of Robert Greene.
- At the bottom of the Home page, under the paragraph "Why should you read the books of Robert Greene?", there is a YouTube video in which Greene talks about Human Nature. The scope of the video is for the visitors of the website to get acquainted with Greene and his passion and knowledge about Human Nature, and to encourage them to visit the other pages of the site.
Here the visitors can find an introduction about the content of every book of Greene.
In this page there is Greene with his cat and surrounded by books. This page wants to give some information about the life of the author and the photo with the pet conveys friendliness and familiarity with him. The books around him remind of his knowledge.
- Here the visitors have the opportunity to fill out a form to subscribe to our newsletter and get one of the books in eBook format. It is an option to promote free culture and knowledge for the sake of society and learning.
- On the photo of the page there are all the books of Greene. They look on a "homy" surface and some of them are used. The photo wants to give the idea to the visitors of the site that with "one-click" they can receive the free eBook and read it comfortably on the sofa of their home.
- The footer allows to reach us on Facebook, X-Twitter, Youtube and Instagram, so that visitors can stay up-to-date with everything about Robert Greene and the publishing of his next books.
in "The Books" page, we would like to modify the cover of the books to become flip cards. When the user would click on the cover, this should flip and each time give a new short quote extracted from the book on which the visitor clicked.
We would like to add a Video page to the website, where new videos are published weekly about the teachings of Robert or his participation to public events
We would like to develop an ecommerce page to provide the hard copies of our books directly to our customers.
We would like to create a page with the list of all the events to which Robert Greene will take part. Fans of Robert could buy their tickets to the event here and it would be a great opportunity to meet him in person.
The result of the W3C Validator is all correct, no errors. Here below the results of all the HTML pages.
No errors after checking the code with W3C Jigsaw CSS Validator. There is just one warning visible in the screenshot below at the bottom. This is due to the imported Google fonts.
Here below the score resulting from Lighthouse testing for the Website.
And the following the result for the Mobile version.
The form has been tested to ensure that it will not submit without the required fields being filled out - First Name, Last Name, Email-Address.
The Website was tested on Google Chrome, Microsoft Edge and Safari with no issues. On Firefox the dropdown menu and the Form - just on Mobile - do not work completely.
The Website was tested on various devices, OnePlusNord10, iPhone13 mini, Google developer tools - Galaxy Fold, iPhone 12 pro, iPad mini, MacBook -, Desktop and created for the following screen sizes: 320px, 576px, 768px, 992px, 1240px and up.
My mentor, my family and friends checked the site and helped to identify bugs and get a feeling about how the user-experience is perceived by visitors of the site.
- The dropdown menu was opening too quickly on mobile, and it was often redirecting to the Home page before having the time to select any of the other pages. This was because the dropdown hover fuction implemented in CSS works on desktop, but not on mobile where the hovering should be replaced by clicking.
- I was unsure what was the root cause, what of the elements to which I applied the CSS was the one provoking the issue.
- The issue was resolved by applying the CSS declaration "display:block" to all these elements as per line 97 of the CSS file.
- On the deployed version of the website, the images were not loading on the pages mentioned in the title.
- For the photo in the "About the author" page, I added a dot at the beginning of the url - src="./assets/images/robert-greene-cat.jpg" - and then the photo loaded successfully.
- For the second photo in the "Get free eBook" page, I removed the mentioned dot and I changed the name of the file to all lowercase - src=/assets/images/all-the-books.png . Then the loading worked out.
- Firefox Mobile: the layout of the form section does not display completely as it should. As mentioned in the Browser testing, the dropdown menu does not work completely in Firefox.
- Image on the "About the Author" page is slightly pixelated on big screen sizes. I tried to look for the same image with better quality but there was not in the web.
- HTML
- CSS
- Balsamiq - to generate Wireframes
- Chrome Dev Tools - for testing responsivness, development of the website and lighthouse testing
- Google Fonts - to import fonts to the website
- Font Awesome - for social media icons in footer and for the icon of the dropdown menu
- W3C - for HTML & CSS Validation.
The project was deployed using GitHub pages. The steps to deploy using GitHub pages are:
- Go to the repository on GitHub.com
- Select 'Settings' near the top of the page.
- Select 'Pages' from the menu bar on the left of the page.
- Under 'Source' select the 'Branch' dropdown menu and select the main branch.
- Once selected, click the 'Save'.
- Deployment should be confirmed by a message on a green background saying "Your site is published at" followed by the web address.
The link of the deployed site can be found here - Master Yourself
The content about Robert Greene's biography, activity and the summary of his books was sourced from the below websites:
The video on the Home page was sourced from the Youtube channel of Robert Greene:
The photos were taken from the following websites:
- Wikipedia - landing image on the Home page
- Pinterest - covers of the books on "The Books" page and photo of the author on "About the author" page
- [Medium] (https://medium.com/@keepasking/a-year-with-robert-greene-102876c9b4ca) - photo of all the books on the page "Get free eBook"
- Inspiration for the dropdown bar - W3Schools
- Inspiration for the form menu - [Code Institute] (Coders Coffehouse Project, Love Running Project) and Ferrari
- Starting structure of the site - [Code Institute] (Love Running Project)
- Books section for screens from 768px and up - line 394 of CSS code - Amazon
- Inspiration for the Readme - mindyoga and pawsome
My mentor Antonio for his great support and all the useful advices.
My wife for her great love and support in everything I do.
Kay of Code Institute for the many tips on how to use different programs for the project.