https://github.com/michaelhochlan/portfolio-one

https://michaelhochlan.github.io/portfolio-one/

Dandelion 101 is a continuously growing fictional page collecting dandelion recipes from around the world. The page aims to reach the community of off-grid and self-reliance enthusiasts who are increasing in numbers by the hour. The page will be a fountain of never-ending ideas. It will encourage people to try new things and get connected with nature. It guarantees hours of fun trying out these recipes and getting people to spend more time in nature and actively participate by sending in their own recipes.

• UX
  • Site owner business goals
  • Visitor goals
    • New visitor goals
    • Returning visitor goals
    • Frequent visitor goals
• Features
  • Navigation bar
  • The page header image
  • Footer
  • The recipes page
  • The Contact Us page
• Technology
• Validation and Testing
  • Functionality testing
  • Compatibility testing
  • HTML Validation
  • CSS Validation
  • Performance
• Deployment
• Credits
  • Content
  • Images
  • Dandelion Quotes
  • Code

The goal is to draw as much traffic as possible to the page and the placement of relevant adds for the targeted visitor groups. Content sells and the site might generate an income for the site owner.

• the visitor will find a continuosly growing source of information around dandelion.
• the visitor is encouraged to send in own ideas and recipes using the contact form.
• giving the site visitor to participate in the site will establish an emotional connection to the site.

• visitors are interested in finding new posts.
• visitors will return to see their recepies and ideas published.

• visitors are interested in finding new ideas and recipes.

Back to Table of contents

The website has three pages.

The website has the features listed below:

• The site name/logo is on the left.

• The menu is on the right.

  • The menu consists of:
    • Home
    • Recipes
    • Contact Us

• • The navigation bar has a consistent look on all three pages. It is fixed to give the visitor easy access especially on pages with a lot of content like the recipes page. The dropdown menu makes for even more accessability.

    • The navigation bar will drop underneath the logo on devices with a max width of 900px and less.

• The page header image includes a drawing of a dandelion picturing three different growing stages.

• Underneath is an animated text showing a different quote for each page. On devices with a width of less than 480px the image will change into a single dandelion plant.

  

• Explains, what the page is about and asks visitors to participate.
• The visitor will get informations about Why Dandelion, where it grows, what parts you can eat and if there is a medical benefit to dandelion.

• The footer is consistent on all three pages. Social links are centered. A copyright is posted centered blelow the social links. Each link will open in a separate tab in a browser.
• The social media links will give the visitor to meet like minded people on their favorite social media.

• The visitor will find three recipes explained in detail and supported by step by step photos.
• The navigation is made easy by either jumping directly to the recipe by using the link at the end of the recipe introduction or using the navigation bar.

• The Contact Us page gives the visitor the possibility to sign up for the Dandelion101 newsletter and/or to send in their recipes or messages.
• The user can choose a category for the message.
• The user can also choose if the recipe should be published, if it's ok to publish the visitors name and to get a link to his reipe as soon as it is published.

• In the future there will be a Dropdown Menu in alphabetical order to easily find a recipe by name or by author.
• On the recipes page could be a recipe of the week.
• A ranking and comment section for each recipe.

Back to Table of contents

• To structure the page.

• To style the page.

• For the social media icons and the triangle in the Home and Recipes menu, when selected.

• I used Caveat Regular 400 for the main headings and the quotes and Nunito for the rest of the page to keep it consistent.

• For hosting the code and keeping track of the development process.

• For hosting the page.

• To be able to use my IDE offline and update the code when neccessary.

• The IDE I use.

• As an image editor to resize and alter images.

• As a drawing program.

Back to Table of contents

All links were tested and are working. The social media links will open in new tabs. The internal and page links work without any issues.

The page was tested in Google Chrome, Firefox, Safari, Microsoft Edge, Opera and Brave on Windows 11, Suse Linux Tumbleweed and Mac OS Catalina. Google Chrome Dev Tools was used to test the responsive design of the page and to determin the width for the different media querries.

Devices I used to test:

• iMac (MacOS Catalina)
• PC (Windows 11)
• G5 (Suse Linux Tumbleweed)
• Ulefone Armor 8 Pro with Android 12

No issues were found.

I used the Nu Html Checker on http://validator.w3.org. All pages passed with no errors and no warnings to show.

I used the Jigsaw Validator found under http://jigsaw.w3.org for validating the index.css.

I tested the performance of the page with the Performance tool in Google Chrome Dev Tools.

Back to Table of contents

The page was uploaded to GitHub Pages:

• On GitHub open the Repositories
• Choose the Repository you want to publish
• Choose Settings in the top menu
• In the side menu select Pages
• Under Source select Deploy from branch
• Under Branch select main and 7(root)
• click save and wait a moment to update the page
• You will find the link to your page on the top under GitHub Pages
• Click Visit site
• The page is online

Back to Table of contents

For the content of the pages I was kindly given written permission by Ms. Ashley Adamant, the creator of https://practicalselfreliance.com/.

The header images were downloaded from:

Bild von macrovector auf Freepik

Bild von WangXiNa auf Freepik

Credit for the Dandelion drawings go to macrovector and WangXiNa

The photos of the page were also kindly provided by Ms. Ashley Adamant, the creator of https://practicalselfreliance.com/.

The Dandelion Quotes were found on https://everydaypower.com/dandelion-quotes/#:~:text=Poetic%20dandelion%20quotes%20for%20a%20new%20perspective&text=%E2%80%9CThose%20cotton%20dandelions%20wafting%20on,seeds)%20enjoy%20their%20flight!%E2%80%9D

• Menu, dropdown and flexbox galary were researched on w3school. I looked up what I needed to know and modified it to fit my needs.

• The code for the required fields in the Contact Form were taken from https://developer.mozilla.org/en-US/docs/Web/CSS/:required?retiredLocale=de

• For the media querries I used the template provided by https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488 and modified it to fit my needs

Back to Table of contents