Full Stack Developer

Hi, I'm Sunit Sah. This is my portfolio for CET138 Full Stack Development Assignment 1.

Demonstrating HTML • CSS • Bootstrap • JavaScript

CET138 Assignment 1

This portfolio showcases my understanding of the core web technologies required for full stack development, as part of my assessment for the Full Stack Development module at the University of Sunderland.

Assignment Requirements

What is full stack development?
HTML demonstration
CSS demonstration
Bootstrap Framework
JavaScript implementation

Assessment Criteria

Understanding of technologies
Design and coding skills
Working examples with explanations
Portfolio organization
Technical proficiency

View Full Assignment

Back to Home

CET138 Full Stack Development - Assignment 1

1. What is Full Stack Development?

Understanding Full Stack Development

Full stack development refers to the development of both front-end (client-side) and back-end (server-side) portions of web applications.

Front-End Technologies

HTML/CSS
JavaScript
Bootstrap
React, Angular, or Vue

Back-End Technologies

Node.js, Python, PHP
Databases (SQL & NoSQL)
Server management
API development

My Perspective: Full stack development allows me to understand the complete picture of web application development, from user interface design to server infrastructure and database management. This holistic understanding is crucial for creating efficient, scalable applications.

UOS Hosted Example

2. HTML

HTML5 Semantic Elements Demonstration

HTML provides the structure of web pages. Modern HTML5 introduces semantic elements that make the markup more meaningful and accessible.

Website Header

Article Title

This is a sample article demonstrating semantic HTML5 structure.

Section Heading

Additional content in a section element.

Code Explanation:

<!-- Semantic HTML5 Structure -->
<header>...</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

This example demonstrates proper use of semantic HTML5 elements which improve accessibility, SEO, and code maintainability.

UOS Hosted Example

3. CSS

CSS3 Features: Flexbox, Grid, and Animations

CSS is used for styling web pages. CSS3 introduced powerful layout modules and animation capabilities.

Flex Item 1

Flex Item 2

Flex Item 3

Grid Item 1

Grid Item 2

Grid Item 3

Code Explanation:

/* Flexbox & Grid & Animation examples in styles.css */

This demonstrates CSS Flexbox for 1D layouts, CSS Grid for 2D layouts, and CSS animations for creating engaging user experiences without JavaScript.

UOS Hosted Example

4. Bootstrap Framework

Bootstrap Components and Responsive Grid System

Bootstrap is a popular CSS framework that provides pre-designed components and a responsive grid system.

Column 1

Column 2

Column 3

This is a Bootstrap alert component demonstrating framework capabilities.

Clear use of semantic HTML, modern CSS (Grid/Flex/Animations), Bootstrap components & grid, and JavaScript for interactivity and client-side routing.

Skip links, focus styles, ARIA states, color-scheme, and a reduced-motion fallback are included.

5. JavaScript

JavaScript Interactive Features

JavaScript adds interactivity to web pages, allowing dynamic content updates and user interaction handling.

Button not clicked yet.

Your name

Counter: 0

Code Explanation:

// See main.js for full, commented implementations of:
// - Client-side navigation (hash routing + focus mgmt)
// - Theme toggle with persistence and ARIA
// - Form validation
// - Interactive demos (button/greet/counter)
// - Reveal-on-scroll animations

This demonstrates JavaScript's ability to handle user interactions, manipulate DOM elements, and manage application state.

UOS Hosted Example

6. Validation & Testing

HTML validated with W3C Markup Validator (no critical errors).
CSS checked with W3C CSS Validator (no critical errors).
Accessibility spot-check with keyboard navigation, ARIA states, and prefers-reduced-motion.
Lighthouse performance/a11y checks (aim ≥ 90 where feasible for a single-page portfolio).

Learning Reflection: Through this assignment, I've deepened my understanding of how these technologies work together to create modern web applications. Each technology has its specific role, but their true power is revealed when they're combined to build interactive, responsive, and user-friendly web experiences.

Back to Home

About Me

I'm a passionate Full Stack Developer with a strong foundation in both front-end and back-end technologies. Currently pursuing my degree at the University of Sunderland, I'm dedicated to creating user-friendly, responsive, and accessible web applications.

My journey in web development started with HTML and CSS, and I've since expanded my skills to include JavaScript frameworks, server-side programming, and database management. I enjoy solving complex problems and turning ideas into reality through code.

Education

University of Sunderland

BSc (Hons) Web Development

Experience

Freelance Developer

2022 - Present

My Approach: I believe in writing clean, maintainable code and creating intuitive user experiences. I'm constantly learning new technologies and techniques to stay at the forefront of web development.

Back to Home

Get In Touch

Contact Information

Let's Connect

This site uses JavaScript for navigation and demos. Please enable JavaScript for the full experience.