Skip to content

CoderSales/Portfolio_Project_1

BranchesTags

Repository files navigation

Portfolio_Project_1

The History of the Silicon Based Desktop Computer

Overview of Project

Developing a website on the conventional desktop computer using HTML5 and CSS3. This project goes through about a century of progress bringing us up to today. This includes early work on field effect transistors. That led to work on other transistors including the Bipolar Junction Transistor, collectively caled the first generation computers. This in turn led to a breakthrough giving MOSFET transistors or metal–oxide–semiconductor field-effect transistors. This era was the second generation. The third generation was all about integrated circuits and the fourth generation is about microprocessors. The fourth generation was from 1971 to 1980. However, as current silicon based desktop computers essentially use a very small scale version of these microprocessors, effectively we are still in the fourth generation of desktop computers.

This project was a good learning experience about css and html. Challenges included modifying css style rules to target only specific sections of code without affecting others. This was most difficult towards the end of the project. Also, trying to position items on the page involved trail and error. Another challenge was ingtegrating different features together.

Picture of Final Project

Image of Final Project Final Project Source Code

Features

The parts of the project

Value of feature to user

who website is for: - People who have an interest in the history of computers.

What they want to achieve - To get a quick overview of some of the main points of computer history, with some detail on interesting technologies.

How the project achieves this - This website uses CSS Style Sheets to present information on computer history in a way that is intuitive and creates a positive user experience.

Existing features

  • Wireframe in Balsamiq
  • Navigation bar
  • User survey form
  • Horizontal timeline
  • Vertical timelines

First Table of Wireframe Rough Plan Sketch made in using Balsamiq:

Computer History Timeline Image Created with Balsamiq Tech Event 1 Created Using Balsamiq Tech Event 2 Tech Event 3 User Survey Form
Computer History Timeline Image Created with Balsamiq Tech Event 1 Tech Event 2 Tech Event 3 User Survey Form Image

Second Table of Wireframe Rough Plan made using Balsamiq: Videos ideas for tech event 1, 2 and 3

Image Created with Balsamiq of wireframe for videos proposed for webpages named tech event 1 2 and 3
Image Created with Balsamiq of wireframe for videos proposed for webpages named tech event 1 2 and 3

Third Table of Wireframe Updated Plan made using Balsamiq: Content and video ideas for tech event 1, 2 and 3

Image Created with Balsamiq of wireframe for content and videos proposed for webpages named tech event 1 2 and 3
Image Created with Balsamiq of wireframe for content and videos proposed for webpages named tech event 1 2 and 3

  • There are 5 webpages on the site.

    • Home Page with Timeline spanning from 1925 to the 2021.
    • 3 pages dedicated to different eras of development of the Computer
      • pre_and_first_generation.html has two eras.
        • Prior to First Generation: Gives information on the field effect transistor (FET)
        • First Generation: Gives information on other transistors including the Bipolar Junction Transistor (BJT).
      • second_generation.html gives information on the key technology of the Second Generation of Computers, the MOSFET or metal-oxide-semiconductor field-effect transistor
      • third_and_fourth_generation.html has two eras.
        • Third Generation: Gives information on integrated circuits (ICs)
        • Fourth Generation: Gives information on the microprocessor and explains that while this era is listed as being from 1971 to 1980, current desktop computers still use microprocessors, although the technology has significantly advanced. Also including is a piece on EUV Extreme Ultraviolet lithography, used in semi-conductor fabrication. Finally, there is a link to a recent news article semiconductor shortages and how this is affecting not only desktop computers but a wide range of other technologies.
    • Survey Form to gather user feedback about the website.

  • The website features a form element. This is a survey of how the user found the content and overall impression of the website. Form

  • The love-running guided website building project was used as a template.

  • Button Button

  • Matrix Color Scheme

  • Navigation Bar

    • Featured on all five pages.
    • Responsive element.

nav bar

Footer

Table of Technologies Used

HTML5 CSS3 Gitpod Git GitHub stackoverflow W3 Schools MDN Web Docs
HTML5 CSS3 Gitpod Git GitHub Stack Overflow W3Schools MDN Web Docs

Features Left to Implement

  • Tried to make a reflection like shine effect occur above the buttons on the navigation bar as well as below. However, can only use a single before pseudo-class on a single element.
  • Make buttons rotate, giving the illusion of shifting perspective when user moves mouse.
  • Add light switch to switch from Matrix theme green font on black background to blue font on white background.
  • Add audio to website, with image of an amplifier, switch, and sign asking if user wants to turn the sound on.
  • Improve Compatibility: Remove flexbox as not supported in Internet Explorer 10 as mentioned here.

Minor Features Left to Implement

  • Make Buttons align center in Navigation bar.
Potentially useful tools for features
  • Use list item appended to content id and ::marker pseudo element selector as a CSS selector, as identified using Google Chrome Developer Tools Inspect Element.
    • Purpose: To style tech event 1 page content

Testing

  • Details of testing.

Usability Testing

Consistency testing

A unified theme was needed to communicate that the website was about computer history. So, the color scheme of green and black used in the 1999 Movie "The Matrix" was used.

Accessibility Standards

AAA requires a contrast ratio of 7:1. WCAG 2.1 Part 1.4.6 Contrast(Enhanced) - Level AAA

Visibility Testing

For contrast, bright green on black rated well.

As a secondary color combination, white and light blue were too low contrast. So, blue color was deepened.

Validator Testing

HTML HTML Validator Check

CSS CSS Validator Check

User Experience

By default, internal website pages open on same page for the user, in order to avoid cluttering up browser with many tabs when moving around the website.

Accessibility

High Contrast

Browser Compatibility

  • Box-shadow inset parameter not used, as only partially supported on Internet Explorer 9.
  • Browser Compatibility: inset not used as shorthand for positioning top right bottom left as no support for functionality in Edge, Internet Explorer, Opera Android or Samsung Internet.
  • Browser Compatibility: hsl CSS property, alpha parameter: Internet Explorer Browser does not support alpha parameter in hsl hue staturation lightness property in CSS Stylesheets.

Color Scheme

Results of color accessibility check. Screenshot from WebAIM website showing contrast ratio results of 10.33:1 for green font on black background

Figure above shows results of color accessibility check for high contrast green font on black background color combination

Results of color accessibility check. Screenshot from WebAIM website showing contrast ratio results of 8.59:1 for Blue on White

Figure above shows results of color accessibility check for high contrast blue font on white background color combination

Green black Blue and white colors on Adobe Color wheel

Figure above shows green, black, blue and white colors on Adobe Color wheel

Color code for green used in Matrix color theme

Figure above shows green used in Matrix color theme

Color code for black used in Matrix color theme

Figure above shows black used in Matrix color theme

Color code for blue used in project

Figure above shows blue used in Secondary color theme

Color code for white used in project

Figure above shows white used in Secondary color theme

Bugs

Fixed Bugs

Bug: Unstyled Home Button (Resolved)

  • Home button on Navigation bar on Home page was not being styled by CSS. Cause:
  • The button id deleted from anchor for home page in Navigation bar in error. Fix:
  • The button id reinstated to anchor for home page in Navigation bar.

Bug: Bulleted Navigation bar (Resolved) (Note: See also nav Bug 2 here) Since the addition of unordered list and list item tags to Navigation bar on home page:

  • Bullets are present to the left of buttons Cause:
  • Unordered list and list item tags. Fix:
  • Add bulletless class selector rule to CSS stylesheet with list-style property set to a value of none.
  • Add bulletless class to list items on home page.

Bug: Vertical Navigation bar (Resolved) Since the addition of unordered list and list item tags to Navigation bar on home page:

  • Navigation bar is displaying vertically not horizontally Attempts:
  • Tried setting text align to center in CSS to override user agent stylesheet setting text align to webkit match parent in Browser. However, when new setting was applied, this did not change the display. Potential Solutions:
  • Use card, instead of Unordered List. Detail to be added. Fix:
  • Use inline-block value for display property in CSS rule targeting list item element in CSS Stylesheet
File name in file path unchangeable Bug (Resolved)
  • Problem:
    • Detection: The following images were not displaying in README in "First Table of Wireframe Rough Plan Sketch made in using Balsamiq:" pre_and_first_generation.png second_generation.png third_and_fourth_generation.png
    • Cause:
      • files not found for given href and src values
      • Root Cause:
        • Renaming the files does not seem to affect the name in the path the system uses to refer to the files.
    • Solution (Workaround):
      • Changed href and src values back to original values
      • Refer to deleted version of path in commit b560138c5da5bc558a0fbd5ffe5cfe98ec6ac308 for original values used for href and src, featuring Capitalisations in file names Solution: renamed files and issue resolved. (Had to copy files into a folder outside of the git repository delete and commit the images and add the images. So, from git or bash perspective the files being added were new so no discrepancies between old and new file extension cases.)
File Extension Name Bug (Resolved)
Some images are named with capitalised .JPG endings.
  • To try and address this, the ending was amended to lowercase, .jpg in keeping with the rest of the .jpg files.
  • However, when the links were updated to .jpg they did not work.
  • It emerged that even though the file was renamed to .jpg, the system stil refered to them as .jpg
  • In the interest of simplicity, the files were reverted to the orignal .JPG extension.
    • Note: Images are hex_to_rgb_hash3af568.JPG hex_to_rgb_hash2b2527.JPG and nav_bar_image.JPG Solution: Renamed these files from .JPG to .jpg and this issue resolved itself. (Had to copy files into a folder outside of the git repository delete and commit the images and add the images. So, from git or bash perspective the files being added were new so no discrepancies between old and new file extension cases.)
Potential Cause for File Extension Name Bug and File name in file path unchangeable Bug (Resolved)
  • Potentially, changing the file names or file paths through the Windows system does not change the Linux file paths in the same way.
Navigation bar displays in regular font on home page but bold on other pages (Resolved)

Solution: Adjusted font in stylesheet.

Debugged

Home page Bugs
Navigation bar Bugs (Resolved)

Bug: Partial width Navigation bar Before the addition of unordered list and list item tags:

  • Navigation bar was not stetching fully horizontally across screen. Information Gathering:
  • Set nav element and unordered list element to orange in turn. Both took up full width of screen.
  • Set list element to orange, and it took up the width of a button on home page. Potential Causes:
  • Button class, button hover class, anchor element, or list item element could be preventing buttons from spreading across width of page.
  • Document Object Model is not set correctly.
  • Browser default properties
  • Some single property is set wrong or inherited preventing full width. Attempts:
  • Tried setting width to different percentages, however these did not take into account different text widths.
  • Other than using new units for width like view width, with potential Backward Compatibility issues, there does not seem to be a way to set font to a percentage of screen width.
  • Added orange and blue background color to body element in home page. This did not take effect in the Browser.

Potential Other Solutions:

  • Use card, instead of Unordered List. Detail to be added.
  • Revisit HTML file
  • Build second Nav bar for trial purposes
    • Use card approach mentioned above in trial Nav bar
    • Try using only Nav bar or only unordered list to see which is easier to make fill full width of pages
  • CSS Grid
  • 1 Dimentional alternative to CSS Grid
  • Experiment with display, position, float, inline-block, block and inline values.
  • Experiment with center, right, left, bottom, top values.
  • Revisit solution search.
  • Try using span element
  • Look up div element
  • Try using margin property Resolution:
  • Added div element as a container for the nav bar and added CSS Style rules for asterisk nav menu and nav links button.
  • Resolved
Horizontal timeline and horizontal scroll slider bug (Resolved)
  • Problem:
    • Detection:
      • timeline displays vertically on home page
    • Cause:
      • style2 css stylesheet not connecting to style home page
      • Root Cause:
        • rel attribute of CSS Stylesheet set to "alternate stylesheet" not "alternative stylesheet" -Solution:
        • Changed rel attribute of CSS Stylesheet from "alternate stylesheet" to "alternative stylesheet"
  • Resolved

minor Bugs (fixed and unfixed)

minor Bugs (fixed and unfixed) Unclassified

  • Context: For vertical timeline merged with two columns.
  • Problem:
    • 2 section opening tags and two section closing tags within nested element tree.
    • Only one set is coupled together by system.
  • Cause:
    • Second section opening tag does not close before the containing unordered list element, inside the first opening Section tag, closes.
    • So, after the unordered list nested inside the first opening section element closes, the second opning Section tag nested in the unordered list seems closed off like a local variable within the unordered list.
    • Therefore, when first Section closing tag appears, since the most recent Section tag is not visible so to speak, due to being nested in the unordered list, the system pairs the aforementioned first Section closing tag with the first Section closing tag.
    • A second Section closing tag comes after this first, now paired Section closing tag; however, the aforementioned second Section closing tag is unpaired.
    • This is because the first opening Section tag is now paired with the first Section closing tag; and the second Section closing tag is not visible, due to being "locked" it seems inside the unordered list.
  • Root Cause:
    • Although this reference is for XML it illustrates a similar problem to that experienced here with highlighting a right and a wrong approach to closing nested elements in HTML.
  • Solution: Second Section element was brought outside nested unordered list, allowing both opening Section tags to pair with both closing Section tags.
    • Original incorrect, problematic Section tag order, including unordered list: open (unordered list open) OPEN (unordered list close) close CLOSE. Where, OPEN and CLOSE are unpaired.
    • Final correct Section tag order, showing nested unordered list: open open (unordered list) close close.
  • General take away rule of thumb: Nested element must close before parent element.
minor Debug (asterisk selector, zero padding, bullets and numbering, list related elements, indented nav bar minor Bug)
Shorter name: asterisk padding bullet list indent nav Bug: "bullet nav Bug 2"
  • (Note: No bullet nav Bug 1, as it was slightly different for "Bug: Bulleted Navigation bar (Resolved)"). See Fixed Bugs.
  • In style css, asterisk selector with padding set to zero was preventing bullets and numbers in unordered and ordered lists from being displayed.
  • However, removal of this declaration makes nav bar indent on all pages.
  • Potentially, could make a more specific selector than asterisk, which selects all elements, to set padding to zero in most elements while avoiding all elements related to lists: unordered list, ordered list, and list item elements.
    • However, ideally this would not affect the nav bar, or any other elements now being styled by the asterisk selector.
    • To pursue this line of debugging, could try to find out and list all the elements which are styled by asterisk.
      • Could potentially use Google Chrome Developer Tools Inspect Element.
  • For the purpose of moving on with adding text content to the website, the nav bar may temporarily need to be left indented, to allow bullet point lists.
  • Next Steps:
    • Replace asterisk selector with nav bar Selector.
    • Check which, if any, parts of site change.
    • Add duplicates of rule changing selector as needed to include more elements in order to undo these changes.
    • If unfixed by this approach potentially revert to asterisk selector and modify or try a different approach.

minor Bugs Fixed

Right align text in left column Bug (Resolved)
  • Scenario: Adding and merging vertical timeline and two columns with each other and pre_and_first_generation.html.
    • Trying to right align text in left column
  • Problem: Text aligning half way across left column not towards right of column.
  • Why was this a problem: Verticaly timeline runs down the center of the page and years (on the left) need to be close to this line (to the right of the left column).
  • Debugging: Drew out element tree and tried alternatively using different selectors in element tree with same declaration
    • Used Inspect Element on Browser
    • Adjusted colors of different elements
      • Recorded how colored elements in question appeared by color, then related this back to selector in CSS stylesheet and finally back to element in HTML.
  • Cause: The same column class was targetting multiple elements in left and right columns and at different points in the element tree.
  • Solution: created numbered column classes as needed.
Padding missing on vertical timeline Bug
  • Problem: Padding not showing between right aligned text in left column and bullet point used as time point.
  • Debugging: Added colors to elements and same padding declaration to different selectors
  • Solution: It was necessary to target the inner elements nested in the element tree. By process of elimination narrowed it down to two rules and picked the one which set padding correctly.

minor Bugs Unfixed

minor Bugs Unfixed Using Workaround

Multiple section tags in vertical list merged with two columns Bug
  • Scenario: Wrapping section opening and closing tags around merged vertical timeline with two columns in pre_and_first_generation.html
  • Problem: Content of second time point aligns left when merged vertical timeline with two columns is wrapped in section tags.
  • Workaround: Left merged vertical timeline with two columns without section tag wrapping.
  • Potential Cause: Enclosing section tags within each other may be problematic if not nested correctly.
    • If section closing tag for first section is supposed to come first, this will probably not be read this way by the system.
    • This may result in unexpected behaviour of site.
  • Reference on the use of section elements
  • It appears that using section tag for timeline means section cannot be used to contain timeline.

Unfixed Bugs

Unfixed Using Workaround

Deployment

process to deploy on GitHub.

Live Link:

Media

  • photos
  • images
    • images online
    • images in assets>images
      • blue_white_color_combination.jpg
      • color_contrast_check_matrix.png
      • color_contrast_check_matrix.png
      • css_validator_check.png
      • final_project_validated.png
      • green_black_blue_white_colors.jpg
      • hex_to_rgb_hash0000ff.jpg
      • hex_to_rgb_hash2b2527.jpg
      • hex_to rgb_hash3af568.jpg
      • hex_to_rgb_hashffffff.jpg
      • matrix_image.jpg
      • nav_bar_image.jpg
      • pre_and_first_generation.png
      • qr_code_for_further_reading_first_generation.png
      • second_generation.png
      • third_and_fourth_generation.png
      • time_line_sketch.png
      • user_survey_form.png
      • wireframe_for_content.png
      • wireframe_for_videos.png

Reference Sources

  • Here are reference sources used in the project.
Reference Sources / Readme / Image Alignment
Reference Sources / Readme / Markdown
Internal links to navigate README

HTML

Non Navigation bar HTML

Reference Sources / All HTML Pages

Use unordered list element with list item elements for each anchor element to make navigation bar stretch across page.

Reference Sources / HTML on Home Page
audio
Content / head element
Content / body element
link
link
link types
  • Describes link types using a, area, form and link Link types
article

-Used in selector at the start of first CSS Stylesheet article tag W3 Schools

HTML Elements

Self Closing HTML elements
anchor element
HTML Attributes
anchor element target attribute
The id attribute
The rel Attribute

Reference Sources / Navigation bar / Bug

Reference Sources / Navigation bar / Bug / Vertical
  • Potential solution to Bug with unordered list making Navigation bar display vertically. Use display property, with a value of inline-block to set navigation bar horizontal. horizontal nav bar / unordered list
Reference Sources / Navigation bar / Bug / Partial Width

CSS

Reference Sources / CSS

Reference Sources / style.css file
Using CSS Box sizing
Pseudo-elements in CSS
Using the "before" selector in CSS
Using the "after" selector in CSS
Can only target a single HTML element with a single id selector
Can only target a single HTML element with a single before pseudo-element
Pseudo-classes
  • A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it. Pseudo-classes
CSS position Property
CSS left property
  • The left CSS property pertains to the horizontal position of an element. left
CSS transform
CSS filter Property
CSS blur()function
  • The blurCSS function applies a Gaussian blur to the input image. blur
CSS hover Selector
Using Asterisk selector in CSS

The CSS Asterisk selector * selects all HTML elements.

Using CSS padding property
Using rem units
Cursor Pointer
Embedding iframe element

-Method of embedding a YouTube video: Go to video select SHARE > embed > copy the iframe element into your HTML

Anatomy of a CSS Rule
Reference Sources style2 css file
CSS Background Image
CSS Center
Reference Sources / style3 css file
Using CSS Grid
Single Grid
Multi Grid
Header and Footer
Reference Sources / CSS Center Header
CSS flex Property
CSS flex direction Property
CSS align items Property
Reference Sources / CSS h1
CSS h1 / Override Google Chrome Developer Tools user agent stylesheet / margin
  • Using CSS properties from user agent stylesheet to create rule native to project stylesheet that overrides these properties, to increase margin at top of webpage
  • This gives instructions from December 2018. Chrome was on version 72 and is now on version 91. So, there have been changes in the interim. This includes changes to the instructions given. Instead of the Select automatically checkbox, now there is a Use Browser Default checkbox. Also, as there is an option to set different devices. Override the user agent string
  • What is a user agent stylesheet?
CSS Best Practice
How to Structure CSS
CSS multiple classes per element
CSS links
Reference Sources / style.css file / Color
Color HEX
CSS Color Wheel
Colors - Tool for selecting multiple colors for website. Adobe Color Wheel
CSS HSL Colors
CSS text shadow
  • How to use text shadow in CSS Stylesheets. CSS Syntax uses horizontal shadow, vertical shadow, blur radius, and color parameters. CSS text-shadow Property W3 Schools
CSS box shadow
Fonts
CSS Font Size
Google Fonts
  • Using Google fonts in a few of my pages and hit a wall when trying to use variations of a font. Importing three faces, Normal, Bold, ExtraBold via the link tag. How to use the variants of the font in my CSS. Answer: They use regular CSS. Just use regular font family property. Now decide what "weight" the font should have by adding font weight property (values in parentheses) as needed for semi-bold, for bold (700), for extra bold (800). Specifying Style and Weight for Google Fonts
How to use Google Fonts
Open Sans Google Font
Responsive Design
CSS media Rule
Nav bar vertical
CSS selectors

Timeline

Scroll bar

  • Used to add button colors to scroll bar used in horizontal scroling timeline on home page. ::-webkit-scrollbar

Reference Sources / Non-content support material

Content / Git

Content / Git / Commit Messages
Git: Methods of adding Header and Message to git commit messages
Git: Adding Commit Messages
Git: How to open editor from terminal, why not to punctuate commit messages
Viewing GitHub Commits
Comparing Git Commits
IDE Integrated Development Environment
Content / Vim
Set word wrap at End of Line
General notes
Images side by side in markdown

Reference Sources by Issue

Center bullets of unordered list with text

Vertical Timeline 2 Columns Merge

Remove Bullet Point

Media References

Matrix Color Scheme

Technologies Used

Image Compressors
  • Default image compressor. TinyPNG
  • Used any time TinPNG gave jfif file, which will not run in Integrated Development Environment. JPEG_compressor

Templates Referenced

Templates Referenced / Readme

W3Schools Educational Walkthrough Code Used

Custom Scrollbar

Credits

Credits / Content

README

Internal Linking

Credits Content Timeline

Credit Contents Scroll

Multi Grid

Used section elements as containers to allow for multiple grids on home page.

Center Header

Historical data sources

Credits / Media

About

The History of Silicon Based Desktop Computers

codersales.github.io/Portfolio_Project_1/

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages