🌐 Harsh Dev Jha — Personal Portfolio

Welcome!
This is my Assignment Submission for Web Dev Assignments responsive personal portfolio website using semantic HTML5 and external CSS. The project demonstrates both technical and creative skills, following all required criteria (see “Objectives & Assignment Coverage” section below).

🎯 Assignment - 1

Refer to index.html for html done in the Assignment

🎯 Assignment - 2

Refer to index.htmlfor html done in the Assignment, and styles.css for CSS done for the Assignment.

---

🎯 Objectives & Assignment Coverage

Assignment-1: Semantic HTML5 Portfolio

• Use only semantic HTML5 tags: <header>, <nav>, <main>, <section>, <footer>, <table>, <form>, <button>, etc.
• Navigation bar with links for smooth section jumps.
• Structured content: Includes hero section, about with profile image, projects list, skills table, and contact form.
• Accessibility: Alt text for images, semantic labels for forms.
• Validation: Form fields use required attributes.
• No external CSS: Styles are not applied; HTML structure focuses on semantics.

Assignment-2: HTML5 with External CSS

• Separation of style and structure: All styles are in an external CSS (style.css), no inline CSS.
• Navigation bar with background, links, hover/focus, and padding.
• Consistent color theme: Uses CSS variables for HEX/RGB colors.
• Fixed and responsive sections: Utilizes box model (margin, padding, border, border-radius, box-shadow) for spacing and layout.
• Styled table for skills: Alternating row colors using :nth-child selector, bold headers, cell padding.
• Styled buttons: Custom color, padding, border-radius, and interaction effects on hover/focus.
• CSS positioning: Example: fixed "Back to Top" button and relative positions for other UI elements.
• Custom <hr> separators for section clarity.
• Accessibility: Alt text for images, semantic labels for forms, and Google Fonts for legibility.
• Validation: All form fields use required attributes.
• Mobile responsiveness: Layout adjusts via responsive units and tested on multiple device widths.
• Fallbacks: Profile images have alt text for accessibility.

---

🧠 About This Project

These assignments demonstrate the progression from semantic HTML5 structure to styled, responsive web design. Assignment-1 focuses on semantic markup for accessibility and structure, while Assignment-2 adds external CSS for visual design and interactivity.

The websites are structured around the following core ideas:

• Clarity: Each section—welcome, about, projects, skills, contact—has a clear role.
• Semantics: HTML tag choice reflects the meaning and role of content, improving accessibility and SEO.
• Separation: In Assignment-2, all CSS is kept in a separate file for maintainability and assignment compliance.
• Progressive enhancement: Future JavaScript features could be added for interactivity.

---

🧩 Site Structure

Assignment-1 Structure

• Header & Navigation: <header> with name and <nav> with links to sections.
• Main Content (<main>): Includes hero section, about with profile image, projects list, skills table, and contact form.
• Contact Form: Outside <main>, with labels, inputs, and buttons.
• Footer: Copyright notice.

Assignment-2 Structure

• Header & Navigation: <header> with title and inline <nav> links.
• Main Content (<main>): Sections for about (with image), skills table, projects (divs), and contact form (table-based).
• Back to Top Button: Fixed positioned link.
• Footer: Copyright notice.

Both assignments use semantic HTML5 for structure and accessibility.

---

🛠 Technologies and Methods Used

Assignment-1

• HTML5 with semantic tags for structure and accessibility.
• No external CSS; focuses on markup only.

Assignment-2

• HTML5 with semantic tags.
• CSS3: Element, class, and ID selectors for styling.
• External CSS only—no inline styles.
• Box model usage: margin, padding, border, border-radius, and shadows.
• Pseudo-classes: :hover, :focus, :nth-child(even) and :nth-child(odd).
• Responsive units: % for layout.
• Google Fonts integration for typography.
• CSS variables for consistent color theme.

---

👁️ Code and File Layout

profileO/
├── README.md
├── Assignment-1/
│   ├── index.html          # Semantic HTML5 portfolio
│   └── Placeholder.png     # Profile image placeholder
└── Assignment-2/
    ├── index.html          # HTML5 portfolio with external CSS
    ├── style.css           # External styles for Assignment-2
    └── Placeholder.png     # Profile image placeholder

Assignment-1/index.html

• Semantic HTML5 structure with header, nav, main sections, form, and footer.
• No external CSS; focuses on markup and accessibility.

Assignment-2/index.html

• Semantic HTML5 structure with sections, table, form, and back-to-top button.

Assignment-2/style.css

• External CSS with variables, selectors, box model, pseudo-classes, and responsive design.

---

💡 How the Code Is Written

Assignment-1

• Structured with indentation and logical groupings for clarity.
• Semantic elements mapped to content purpose for accessibility.
• Focuses on HTML5 markup without styling.

Assignment-2

• Structured with indentation and logical groupings for clarity.
• Semantic elements mapped to content purpose for accessibility.
• External CSS for separation of concerns, using variables and selectors.
• Each feature reflects assignment criteria—no extraneous dependencies.

---

✅ Assignment Checklist

Assignment-1

• Semantic HTML5 tags used throughout
• Navigation bar with links
• Structured content with sections, table, and form
• Accessibility: Alt text for images, labels for forms
• Required validation on form fields
• Clean code organization

Assignment-2

• External CSS (no inline styles)
• Semantic tags used throughout
• Styled table with alternate row shading, bold headers
• Custom nav bar and buttons
• Visually distinct sections, separators with hr
• Fixed element using CSS positioning (Back to Top button)
• Responsive/mobile friendly
• Required validation on form
• Accessible images and form labeling
• Clean code organization, easy to extend/refactor

---

📄 License

For personal educational/demo use only. Not open for direct reuse or redistribution.

---

Thank you for viewing my portfolio project!