Project Submission

Overview

Before your presentation on November 9th, you must update your complete project information on the course platform. This is a mandatory requirement for the exam.

Action Required: All project information must be complete before your presentation group's scheduled time.

Submission Platform

Website: https://webprojects.lrock.net/projects/

Required Project Information

You must provide the following details about your website:

1. Project Title

Requirements:

Keep it concise: Maximum 3-4 words
Should be descriptive and professional
Avoid generic names like "My Website" or "Final Project"

Good Examples:

✅ "Creative Portfolio"
✅ "Mountain Bike Shop"
✅ "Personal Blog"
✅ "Coffee House Menu"

Bad Examples:

❌ "My Super Amazing Incredible Website Project" (too long)
❌ "Website" (too generic)
❌ "Final Exam" (not descriptive)

2. Short Description

Requirements:

One sentence summary of your project
Brief and clear
Explains the purpose in 10-20 words

Format: "A type website for audience/purpose featuring key feature."

Examples:

✅ "A portfolio website showcasing my web development skills and projects."
✅ "An e-commerce site for a fictional outdoor gear store with product catalog and shopping cart."
✅ "A personal blog about travel photography with image galleries and trip reports."

3. Long Description

Requirements:

Comprehensive description of your project
3-5 paragraphs
Explain purpose, features, and technical approach

What to Include:

Paragraph 1 - Project Overview:

What is the website?
Who is it for?
What problem does it solve or need does it address?

Paragraph 2 - Key Features:

List main sections/pages
Highlight special functionality
Describe user experience

Paragraph 3 - Technical Implementation (optional):

Technologies used (HTML5, CSS3, JavaScript)
Responsive design approach
Any special techniques or libraries

Paragraph 4 - Design Approach (optional):

Visual style and theme
Color scheme and typography
Layout strategy

Example:

This is a portfolio website designed to showcase my web development skills
and completed projects to potential employers and clients. The site
demonstrates my ability to create responsive, modern websites using HTML,
CSS, and JavaScript.

The website features four main sections: a homepage with an introductory
hero section, an about page with my background and skills, a portfolio
page displaying my web development projects, and a contact page with a
functional form. Each project in the portfolio includes screenshots,
descriptions, and links to live demos.

I built the site using semantic HTML5 for structure, modern CSS with
Flexbox and Grid for layout, and vanilla JavaScript for interactive
elements like the mobile navigation menu and form validation. The design
follows a mobile-first approach with responsive breakpoints at 600px and
1200px.

The visual design uses a minimalist style with a dark blue and white color
scheme, complemented by accent colors for call-to-action buttons. I chose
the Roboto font family for readability and professional appearance across
all devices.

4. GitHub Repository URL

Requirements:

Link to your project's GitHub repository
Repository must be public (not private)
Should contain all project files

Format: https://github.com/yourusername/project-name

Example: https://github.com/stefanlandrock/my-portfolio

Note: Your GitHub repository has already been uploaded for you by the instructor. You just need to verify the URL is correct.

What the Repository Should Contain:

All HTML files
CSS folder with stylesheets
Images folder with all images
JavaScript folder (if applicable)
README.md with project description

5. Live URL (Optional)

Requirements:

Link to your deployed website (if you've deployed it)
Should be publicly accessible
Use HTTPS (secure connection)

Deployment Option Github:

GitHub Pages: https://yourusername.github.io/project-name

Note: This field is optional. If you haven't deployed your project yet, you can leave it blank. Alternatively you can present your website using local Live Server.

Required Project Images

You must upload 4 images to showcase your project:

1. Favicon

Specifications:

Size: 32×32 pixels
Format: PNG
Purpose: Small icon displayed in browser tabs

How to Create:

Design a simple, recognizable icon
Use a tool like Photoshop, Figma, or Favicon.io
Export as 32×32 PNG
Name it favicon.png

Tips:

Keep it simple - complex designs don't work at small sizes
Use high contrast colors
Consider using your initials or a logo

2. Open Graph Image

Specifications:

Size: 1200×630 pixels
Format: JPG or PNG
Purpose: Preview image when sharing on social media

What to Include:

Project title
Visual representation of your website
Your branding or logo (optional)

How to Create:

Take a screenshot of your homepage
Add text overlay with project title
Resize to exactly 1200×630 pixels
Export as high-quality JPG

Why It Matters: When you share your project link on Social Media this image will be displayed as a preview.

3. Desktop Screenshot

Specifications:

View: Homepage displayed in full desktop width
Format: JPG or PNG
Size: Minimum 1200px wide
Purpose: Show how your site looks on desktop

How to Capture:

Method 1: Full Browser Screenshot

Open your website in Chrome
Press F12 to open DevTools
Press Ctrl+Shift+P (Cmd+Shift+P on Mac)
Type "screenshot" and select "Capture full size screenshot"
Save the image

Method 2: Manual Screenshot

Resize your browser to approximately 1920×1080
Open your homepage
Use screenshot tool:
- Windows: Win+Shift+S
- Mac: Cmd+Shift+4
Capture the browser window

Tips:

Make sure navigation is visible
Include hero section or main content
Ensure images are loaded
No browser UI (address bar) in the shot

4. Mobile Screenshot

Specifications:

View: Homepage displayed on mobile device (or mobile viewport)
Format: JPG or PNG
Size: Typical mobile width (375px - 414px)
Purpose: Show responsive design

How to Capture:

Method 1: DevTools Responsive Mode

Open your website in Chrome
Press F12 to open DevTools
Click device toolbar icon (Ctrl+Shift+M)
Select "iPhone 12 Pro" or "Pixel 5"
Capture screenshot:
- Click three dots menu in DevTools
- Select "Capture screenshot"

Method 2: Real Mobile Device

Open your website on your phone
Take a screenshot
Transfer to computer
Crop if needed

Tips:

Show the mobile navigation menu
Include hero section
Ensure text is readable
Show vertical scroll if needed

Submission Checklist

Before finalizing your submission, verify:

Project Information

Project title is concise (3-4 words maximum)
Short description is one clear sentence
Long description is comprehensive (3-5 paragraphs)
GitHub repository URL is correct and public
Live URL is provided (if deployed)

Images

Favicon uploaded (32×32 PNG, < 10 KB)
Open Graph image uploaded (1200×630, < 100 KB)
Desktop screenshot uploaded (showing homepage, < 200 KB)
Mobile screenshot uploaded (showing responsive design, < 100 KB)
All images are final (no placeholders)
All images are optimized for web

Quality Check

No typos in descriptions
All links work correctly
Images display properly on platform
Information accurately represents your project

Timeline

Recommended Schedule:

1 Week Before Presentation (November 2):

Finalize project (all pages complete)
Take screenshots (desktop and mobile)
Create favicon and Open Graph image
Write project descriptions

3 Days Before Presentation (November 6):

Upload all information to webprojects.lrock.net
Verify all images display correctly
Review descriptions for typos
Ensure GitHub repository is up to date

1 Day Before Presentation (November 8):

Final check of all information
Make any last-minute updates
Confirm everything is ready

Deadline: All project information must be submitted before your presentation group's scheduled time on November 9th.

❌ Last-Minute Submission: Don't wait until the day of presentation ❌ Wrong Image Sizes: Check specifications carefully ❌ Placeholder Content: Use real, final content ❌ Generic Descriptions: Be specific and descriptive ❌ Broken Links: Test all URLs before submitting ❌ Unoptimized Images: Large files slow down loading ❌ Missing Information: Complete all required fields