Create a personal project about me using html and css

Project Description

Be prepared to explain your code. If you cannot justify your decisions and walk through how you built it, you will not receive credit!

This project, worth 20% of your final grade, requires you to plan, design, and develop a static personal website using HTML and CSS technologies only. The site should showcase your professional skills and a portfolio of your academic or work projects.

The goal is to create a professional online portfolio that can support your job search. Present yourself professionally and include only materials appropriate for potential employers. You may revise and reuse previous work if needed.

This is an individual project. Even if you already have a personal website, you must build a new one from scratch that meets the specified requirements.

Minimum Requirements:

Must have a minimum of three sub-pages excluding the homepage. Additional pages MUST be subpages linked off the homepage

    1. Homepage: Brief introduction, navigation links, images.
      • Name the Homepage file index.html
    2. About Me page: Professional background and information for employers.
    3. Resume page: Create a resume and display it on this page in HTML using a Flexbox layout. Also include a link to download a PDF version of your resume.
    4. Other pages may include the followings:
      • Project page: This page should include an organized set of your past/current projects.
      • Future goals page: This page should include an outline of what you want to achieve in the future.
      • Contact page: A contact form or clearly listed contact details, and links to professional social media profiles* (e.g., LinkedIn, GitHub).

*Note: For this assignment, placeholder links are acceptable. You are not required to link to your actual professional accounts.

Important Considerations:

  • Each page must include a clear and descriptive title that appears in the browser tab when viewed.
  • Each page must be responsive and display properly on both mobile devices and desktop screens.
  • Use HTML5 and CSS3 only (no templates or CMS).
  • Keep pages professional, well-organized, and include a clear navigation bar on every page.
  • Ensure all links work correctly.
  • Check spelling, grammar, and overall design (attractive and easy to navigate).
  • Follow accessibility standards (readable fonts, alt text for images, etc.).
  • Write clean, well-structured, properly indented code with helpful comments.
  • Avoid unnecessary code and multiple styling methods.
  • Verify that the entire website functions properly broken content will be considered missing.

Where to start?

  • Plan your content and wireframe before coding.
  • Start with the homepage file named index.html.
  • Create blank HTML files for each page and use short, meaningful filenames.
  • Save everything in one folder named Lastname_Firstname_Project1.
  • Put all supporting files (images, videos, docs) inside that folder do not link to files outside it.
  • Keep file relationships unchanged after editing.

How to submit?

  • Place all website files (HTML, CSS, images, videos, etc.) into one folder named Lastname_Firstname_Project1 (e.g., Garcia_Ana_Project1).
  • Rename the folder correctly before compressing it. Then zip the folder and upload the zipped file to Canvas.
  • Your submission must follow the required naming format or it will not be graded. The final upload should be one main folder containing all subfolders and files.

Use of Generative AI

AI may be used only for:

  • Debugging code
  • Improving wording, formatting, or clarity
  • Minor refinement of ideas

AI must not be used for the critical stages of website design, including:

  • Creating the overall concept
  • Designing the layout or structure
  • Generating the core implementation

***Improper use of AI for major design or development components will result in a grade reduction. Submitting work primarily generated by AI or failing to disclose AI use may result in a zero.***

Project Deliverables

1. AI Use Statement (REQUIRED) – This document is mandatory. Assignments submitted without it will not be graded. You must:

    • State whether you used AI (if not, clearly say so).
    • Include the full conversation history from any AI tool used (ChatGPT, Gemini, etc.).
    • Accepted formats: .docx or .pdf

2. Website Wireframe (10 pts)

    • Create a wireframe to plan your websites layout. You may use PowerPoint, free online tools (e.g., SmartDraw), or a hand-drawn sketch.
    • Accepted formats: .pptx, .docx, .pdf, or image files (.jpg, .png)

3. Design Rationale (10 pts)

    • Briefly explain your design choices (layout, colors, fonts, navigation).
    • Accepted formats: .docx, .pdf

4. Website (80 Pts)

    • Code Quality (20 pts) -> Code Readability, Code Correctness (valid HTML5 and CSS3)
    • Content & Appearance (20 pts) -> Content Relevance, Professionally, Appearance and Attractiveness
    • User Experience (20 pts) -> User Friendliness, Accessibility, Navigation Clarity
    • Responsiveness (20 pts) -> Flexbox, Grid layout and @media queries for mobile friendliness

Total Grade: 100 pt (20% of the Final Grade)

CREATE A SUPER BASIC HTML WEBSITE

BELOW I ATTACHED MY RESUME, AN IDEA OF WHAT THE PROJECT SHOULD LOOK LIKE, AND ALSO PDF FILES OF WHAT THE CODE SHOULD LOOK LIKE. VERY SIMPLE, NOTHING COMPLEX!!!

WRITE MY PAPER

Comments

Leave a Reply