Portfolio Website HTML/CSS Validation and Deployment Issues

[murphyben238-hub]

Overview

This issue documents critical bugs and improvements needed for a -google-sheet"` contains extra space

• Should be: name="submit-to-google-sheet"

7. Font Awesome Icon Typo:
   • <i class="far fa-evelope"></i>
   • Should be: <i class="far fa-envelope"></i>

Content Quality Issues (Low Priority)

8. Spelling & Grammar Errors:
   • Title: "Ac personal portfolio website (Murphy Ben Kufre - Graphic Designer & Web Developer) that requires deployment and cross-browser compatibility testing.

Critical Issues Identified

🔴 High Priority: Syntax Errors

1. CSS Syntax Error - Background Color

   /* conting" → "Accounting"
   - "proffesional" → "professional"
   - "Whattsapp" → "WhatsApp"
   - "brithday" → "birthday"
   - Multiple other typos throughout content

Required Actions

• Validate all CSS syntax
• Correct CDN URL protocols (https)
• Replace local Windows file paths with valid web URLs
• Fix HTML structure and close all tags properly
• Correct form element attributes
• Update icon class names to match Font Awesome documentation
• Proofread and correct spelling/grammar throughout
• Test responsive design across devices (mobile, tablet, desktop)
• Validate HTML using W3C validator
• Set up proper hosting (GitHub Pages, Netlify, Vercel, etc.)

Acceptance Criteria

• All CSS validates without errors

• All CDN and external resource URLs resolve correctly

• All images load successfully without 404 errors

• HTML validates without structural errors

• Form submits successfully to intended backend

• Page is fully❌ INCORRECT */
  background: local#111;

  /* ✅ CORRECT */
  background: #111;

  Location: Inline `<style>` tag, `body` selector
  
  

2. Font Awesome CDN URL Malformed

   <!-- ❌ INCORRECT -->
   <link rel="stylesheet" href="htpps://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
   
   <!-- ✅ CORRECT -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

   Issue: Missing 't' in 'https' protocol

3. CSS Grid Property Error

   /* ❌ INCORRECT */
   grid: 20px;
   
   /* ✅ CORRECT */
   gap: 20px;

   Location: `. responsive (mobile-first design)

• No console errors or warnings in browser DevTools
• All text is spell-checked and grammatically correct
• Website is hosted and accessible via public URL
• Performance metrics meet best practices (Lighthouse score >90)

Additional Notes

This website demonstrates fundamental web design principles using vanilla HTML/CSS. The integration withportfolio` class

4. Icon Class Typo

   <!-- ❌ INCORRECT -->
   <i class="far fa-evelope"></i>
   
   <!-- ✅ CORRECT -->
   <i class="far fa-envelope"></i>

🟠 Medium Priority: Asset & Path Issues

5. Local File Path References
   All image sources use absolute Windows file paths that won't work on the web:

   <!-- ❌ INVALID the Editor.js Link Tool repository suggests potential use as a case study or documentation reference for the project.