My idea for my first project is to try to make a website around Thomas Sowell’s book “Basic Economics: A common sense guide to the economy”. In this book Thomas Sowell proves that it is possible to write intelligently about economics, without graphs, charts or calculus. In Basic Economics Dr Sowell does an incredible job of presenting economic principles and theories in plain English and in a straightforward way, providing relevant examples from history as well as from present day, without dumbing the subject down in anyway.

Simply put, my idea was to try adapt this book into a digital format to be able to keep sharing the incredible depth of knowledge that I have had the privilege to be able to engage in myself.

Like mentioned in my introduction, my idea was just to be able to transfer the masterpiece that is Basic Economics into digital form. The two subheadings of the book is: “A Common Sense Guide to the Economy” and ”A Citizen’s Guide to the Economy” depending on which edition you buy. So it was important for me to be able to appeal to as big of a group of people as people as possible, to be appealing, read and understood by 16-90 year-olds, to further be able to replicate a similar experience to the book. In fact in the beginning of the book Dr. Sowell clearly states that the book is for anyone looking to better understand the economic reality around them, so just like the book I kept my focus on the subject while trying to stick to straightforward plain English.

In the amount of time, space and skill I had for this project my main goal was to give a summarized version about what the book is about while also trying to get people to purchase and read the book for themselves. Economics sometimes get a bad reputation for being boring or complicated, my main goal was to help ignite people’s interest in the subject, and therefor maximise the amount of traffic toward purchasing the book. Which I do by giving a description of the book, by lifting some parts of the book I find interesting and by providing several links to purchase all throughout the page. In the amount of time, space and skill I had for this project my main goal was to give a summarized version about what the book is about while also trying to get people to purchase and read the book for themselves. Economics sometimes get a bad reputation for being boring or complicated, my main goal was to help ignite people’s interest in the subject, and therefor maximise the amount of traffic toward purchasing the book. Which I do by giving a description of the book, by lifting some parts of the book I find interesting and by providing several links to purchase all throughout the page.

• As a high school student, I am writing a paper in social sciences and want to get a better understanding of some economic principles, so that I can show my teachers that I properly understand basic economic principles.
• As a high-risk group during corona crisis, I know I have a lot of free time and would like to fill it with something intellectually stimulating, I have heard of the book Basic Economics but would like some more information before I feel comfortable purchasing the book.
• As a teenage parent, I have an obligation to teach my kids about the world, I need some basic economic examples that I can understand as well as properly explain to my kids.

In the beginning of the project I had a clear idea of what I wanted to do in terms of structure of my three pages. Through trial and error I eventually figured out that what worked on paper didn’t always transfer like I thought it would into digital form. All of my initial sketches did however provide a clear direction of where I wanted to go in terms of colour pallet and design of navigation bar and footer element.

The color palette of my entire page is designed to replicate the colour palette on the front of the fourth edition of Basic Economics by Thomas Sowell.

• Navigation bar
  • At the very top of the page is a navigation element that allows you to manoeuvre around the page in between the Home, Dr. Sowell and Newsletter page. In smaller screen sizes the element can be collapsed to not take up much screen real estate.
• Callout/head section
  • Under the navigation bar there is a hero image of a dollar bill with a jumbotron displaying the thesis of Basic Economics.
• General information section
  • General information section contains an overlook of the content in Basic Economics.
  • An image of the cover of the book.
  • A call to action button with the word ‘Purchase’ on it, which takes you directly to Amazon where you can buy the book. The ‘Purchase’ button has a hovering effect of changing colour when the mouse is hovering over the button to further indicate to the user that this is a call to action button.
• Sections from the book section
  • There are four different summarized sections from Basic Economics, all identical looking. There is a header and 40 words of the main text which is followed by a ‘Read More’ button which connects to a scrollable modal element, again containing the subject headline line as well as the full text.
• Footer
  • There are two sections: on the left the main thesis of the book is reinstated, on the right there is a section providing another link to purchase the book from Amazon, the link is accessible through clicking the book icon. The book icon has a hovering effect of changing colour to make the user more alert to the fact that the icon is a call to action.

• Navigation bar
  • At the very top of the page is a navigation element that allows you to manoeuvre around the page in between the Home, Dr. Sowell and Newsletter page. In smaller screen sizes the element can be collapsed to not take up much screen real estate.
• Callout/head section
  • Hero image of books
• Information about Thomas Sowell section:
  • This section has an image of Dr. Sowell, as well as information about him both as a person and as an author.
• Other books by Thomas Sowell section
  • This section has a the same design as the “Sections from the book” section on the home page. Instead of sections from the book there are four more books presented, all written by Dr. Sowell. All with the title of the book as well as 40 words containing the first part in the book description as well as a ‘Learn More!’ button that takes you straight to where you can purchase that particular book on Amazon.
• Footer
  • There are two sections: on the left the main thesis of the book is reinstated, on the right there is a section providing another link to purchase the book from Amazon, the link is accessible through clicking the book icon. The book icon has a hovering effect of changing colour to make the user more alert to the fact that the icon is a call to action.

• Navigation bar
  • At the very top of the page is a navigation element that allows you to manoeuvre around the page in between the Home, Dr. Sowell and Newsletter page. In smaller screen sizes the element can be collapsed to not take up much screen real estate.
• Callout/head section
  • Under the navigation bar there is a hero image of a dollar bill with a jumbotron asking if you would like to sign up for a newsletter about Dr. Sowell’s work and books. Underneath the header of the jumbotron there is a form section requesting first name, last name and email all needing to be filled in before clicking the ‘Sign Up’ button at the bottom of the form. The ‘Sign Up’ button has a hovering effect of changing colour when the mouse is hovering over the button. The sign button is of right now not connected to anything, since I don’t as of right now don’t have the knowledge to do so.
• Footer
  • There are two sections: on the left the main thesis of the book is reinstated, on the right there is a section providing another link to purchase the book from Amazon, the link is accessible through clicking the book icon. The book icon has a hovering effect of changing colour to make the user more alert to the fact that the icon is a call to action.

There are a couple of things that I would like to incorporate to the page in the future:

• YouTube:
  • I personally found Thomas Sowell and Basic Economics though a Youtube recommendation, which literally changed my life. He brought a kind of clarity to the world that I had never experienced before, I would therefor like to give others the same opportunity to come in contact with Dr. Sowell’s work in a long format video form through a Youtube extension. Some people prefer reading some prefer video, the book is designed to try to reach as many people as possible I would simply like to carry on tradition in a digital format.
• Amazon reviews:
  • I would also like to add an extension to Amazon, or another bookselling website to be able to show other people’s reviews of the book, the book is generally well received online by many different readers. Online a main selling tool is to be give the potential customer access to other people’s experience. This allows people to have a human connection to the product and feel more confident to click to purchase.
• Newsletter:
  • I would like to be able to connect the newsletter sign up to a newsletter. As of right now I don’t have the knowledge to do that.

• HTML5

  • The project uses HTML5 for basic content.

• CSS3

  • The project uses CSS3 to provide individual styling.

• Bootstrap

  • The project uses Bootstrap to provide a grid system, as well as basic layout and styling. Bootstrap also offer JavaScript extension navigation bar.

• Font Awesome

  • The project uses Font Awesome to add icons.

• Cloudflare

  • The project uses Cloudflare to add hovering effects.

1. Go to “Home” page
2. Scroll down to “Purchase” button
3. Hover mouse over button
4. Button reacts to mouse
5. Clicks button
6. Button takes me to separate Amazon purchase page
7. Test successful

1. Go to “Home” page
2. Scroll down to footer section
3. Hover mouse over book icon
4. Icon reacts to mouse
5. Clicks icon
6. Icon takes me to separate Amazon purchase page
7. Test successful

1. Go to “Home” page
2. Scroll down to “Sections from Basic Economics” section
3. Hover mouse over “Keep Reading” button
4. Button reacts to mouse
5. Clicks Button
6. Button deploys a modal containing the rest of remaining text
7. Tries to scroll in modal
8. Scrolling successful
9. Modal successfully close when clicking “Close” button
10. Re-clicks “Keep Reading” button
11. Clicks on the side of the of modal to see if it closes correctly
12. Modal successfully close
13. Test successful

1. Go to “Dr. Sowell” page
2. Scroll down to “Other books by Thomas Sowell section”
3. Hover mouse over “Learn More!” button
4. Button reacts to mouse
5. Clicks button
6. Button takes me to separate Amazon purchase page
7. Test successful

1. Go to “Newsletter” page
2. Tries clicking “Sign Up” button with all fields empty
3. Error message appear under “First name” section telling me to fill in this section
4. Fill in “First Name” section, leave “Last Name” and “Email” section empty
5. Clicks “Sign Up” button
6. Error message appear under “Last Name” section telling me to fill in this section
7. Fill in “Last Name” section, leave “Email” section empty
8. Clicks “Sign Up” button
9. Error message appear under “Email” section telling me to fill in this section
10. Fill in “Email” section, all three sections are now filled in
11. Clicks “Sign Up” button
12. Button successfully bring me to a separate Error page (the button isn’t connected to anything)
13. Test successful

The Basic Economics website works on Google Chrome across different screen sizes and devices:

• Extra large screen sizes - screens above 1200px in width
• Medium screen sizes - screens above 768px in width
• Extra small screen sizes - screens bellow 578px in width

There is one major bug in my project which I cannot solve no matter what I do. On my Newsletter page, the page is fine in both big and medium screen sizes, and in a small screen size everything is ok except for the fact that there on the right side of the screen there is a block of white space all along the page. I suspect that it has something to do with Bootstrap clashing with some of my own personal code, but I haven’t been able to find it. I just wanted to make a note of this so anyone checking out the website is aware.

The project is hosted on GitHub pages, published by a master branch. I used GitPod workspaces to be able to work on my project, which I accessed through GitHub, I follow the official instructions from Code Institute in terms of download and launch. One of the things provided by the Code Institute is “gitpod-full-template” which provided me with useful extensions, shortcuts and other useful things.

If you would like to download and work on this project separately, make sure to:

1. GitPod is installed on your local system
2. Go into JosefinE7 repositories
3. Click onto the: basic-economics-TS repository
4. Click git clone or download
5. Open the project up in your own workspace
6. Write a git add command: git add . in terminal
7. Write a commit message: git commit -m “XXX”
8. Write git push

• Part of navigation bar code is copied from the Bootstrap Whiskey drop project, where the copied code starts and ends is clearly marked with comments at top and bottom.
• Modals as well as buttons to modals from “Sections from Basic Economics” on Home page are all copied from Bootstrap modal components. Where the copied code starts and ends is clearly marked with comments at top and bottom.
• The text for Subject section, subject-one was copied from the book Basic Economics, accessed through Google books.
• On Dr. Sowell page all book descriptions are from Amazon:
  • Economic Facts and Fallacies
  • Housing boom and bust
  • Discrimination and Disparities
  • Applied economics
• On Newsletter page the form displayed on the jumbotron is copied from the previous “Love Running” project at Code Institute. Where the copied code starts and ends is clearly marked with comments at top and bottom.

• Styling regarding background image of all callout/head sections of all three pages are all copied from the previous Bootstrap Whiskey drop project from Code Institute, where the copied code starts and ends is clearly marked with comments at top and bottom.
• Styling of the form on the “Newsletter” page is copied from the previous “Love Running” project at Code Institute, where the copied code starts and ends is clearly marked with comments at top and bottom.

From: Needpix: From: Libreshot

Icons: All icons are copied from Font Awesome.

• I received inspiration for this project from Dr. Sowell’s book Basic Economics, it is truly a spectacular book and I did my best with the limited amount of knowledge I have within coding to try to imitate its greatness.
• Copyright:
  • This is a school project intended to show my teachers my ability to code. When talking to Student care from Code institute about copyright, I was told that as long as a I state the fact that this is a school project intended for no other use that it would be ok to use some copyrighted material. The image of Dr. Sowell and The book cover may be subject to copy right. Text in the “Sections from Basic Economics” under the “The economic principle that will change your life” section, as well as accompanying text in attached modal may also be subject to copyright.