Learning Objectives

Create a Well-Structured HTML Document:
- Comprehend the basic syntax of HTML, including tags, elements, and attributes.
- Learn to construct a well-organized HTML document with essential elements like DOCTYPE, html, head, and body.
Use Basic and Advanced HTML Elements Effectively:
- Apply basic HTML elements such as headings (h1-h6), paragraphs (p), text formatting (b, strong, i, em), lists (ul, ol, li), hyperlinks (a), images (img), line breaks (br), and horizontal rules (hr).
- Utilize advanced text elements, including tables (table, th, tr, td), quotations (blockquote, q), code snippets (code, pre), and understand their significance.
Incorporate Multimedia Elements:
- Embed multimedia elements such as images, audio, and video into web pages.
- Bonus: Integrate YouTube videos to enhance the visual content.
Leverage Semantic HTML5 Elements:
- Understand the importance of semantic HTML5 elements in structuring web content.
- Implement semantic elements like header, footer, article, section, nav, and aside effectively.
Build Interactive HTML Forms:
- Create interactive HTML forms with various input elements, including text fields, passwords, checkboxes, radio buttons, and submit buttons.
- Apply attributes like name, placeholder, and autocomplete to enhance form functionality.
Implement Form Validation and Accessibility:
- Explore HTML5 form validation attributes for validating user inputs.
- Consider accessibility principles when designing forms to ensure inclusivity.
Version Control with Git and GitHub:
- Learn the basics of version control using Git and how to create a GitHub repository for the project.
- Understand the importance of regular code commits and maintaining a clean and informative README.
Documentation and Project Communication:
- Understand the significance of clear project documentation.
- Learn how to create and maintain a README file with instructions on running the application and explanations of its features.
- Consider effective project communication, such as creating video presentations or explanations to demonstrate technical concepts and project details.

📚 Welcome to the Personal Portfolio Project! 🚀🌐📄

Hello, future web developers and digital creators! Are you ready to embark on a journey that will bring your web development skills to life? Welcome to the Personal Portfolio Project, where you'll craft your own online canvas to showcase your talents, experiences, and unique identity.

In this project, you'll be the artist and the architect, using HTML as your medium to design a stunning personal portfolio website. But this project is more than just code; it's a reflection of who you are and what you're capable of in the digital realm.

Your personal portfolio is not just a website; it's your digital canvas, where you can display your skills, achievements, and aspirations to the world. This project is your opportunity to shine and leave a lasting impression on the web.

So, let's get started on this creative journey! Grab your HTML toolkit, let your imagination flow, and turn your personal portfolio vision into a reality. The digital stage is set, and your spotlight awaits. Happy coding! 🌟🎨👩‍💻

In this Personal Portfolio project, you'll embark on an exciting journey to create a captivating and informative online showcase of your skills, experiences, and interests. Your personal portfolio website will serve as a digital canvas to express your creativity and showcase your talent to the world.

To successfully complete this project, you'll need to meet the following requirements:

Try to have fun with this project - it can be your actual portfolio or it can be for a fictional character (ie Superman)

Try not to worry too much about formatting/styling - we will be updating this project when we get to CSS so you will have an opportunity to make it pretty then.

Project Requirements

All Pages:
- Include the same navigation bar on every page that links to all the other project pages
Home Page:
- The main landing page that provides an introduction to you and your portfolio.
- May include a brief bio, your name, a profile picture, and a welcome message.
About Me Page:
- A page that offers more detailed information about yourself.
- May include your background, education, career goals, and personal interests (pick at least 3)
Resume/CV Page:
- List your education, work experience, skills, certifications, and achievements (pick at least 3)
- Highlight your technical skills, languages. frameworks or software proficiency
- You can use visual representation like a skill bar or chart (bonus)
Portfolio Projects Section (Bonus):
- Showcase your past projects and works.
- Include project descriptions, images, links, and any technologies or tools used
Blog/Articles Section (Bonus):
- Share your thoughts, insights, or technical articles related to your field.
- This does not need to be original. If you choose to include an article/blog from another site, make sure you cite it and consider using iframe
- Write blog posts and showcase them with titles, dates, and brief summaries.
Contact Page:
- Provide a way for visitors to get in touch with you.
- Include a contact form, your email address, and links to your social media profiles (should include additional elements from yesterdays homework).
Testimonials/Recommendations Section:
- If available, showcase testimonials or recommendations from colleagues, clients, or supervisors.
- This can be as simple as a quote or blockquote at the bottom of your home page or as advanced as a whole section
Projects in Progress Section (Bonus):
- Mention ongoing or upcoming projects to keep visitors informed about your current work.
Portfolio Archive Section (Bonus):
- Archive older projects or articles that you no longer feature on the main portfolio page.
Photography/Art Gallery Section (Bonus):
- If you're into photography or art, create a gallery to display your creative works.
Certificates and Awards Section (Bonus):
- Showcase certificates, awards, or honors you've received throughout your career or education.
Skills Demonstrations Section (Bonus) :
- Develop interactive elements to demonstrate your skills, such as coding examples, animations, or data visualizations.
Video Introduction Section (Bonus):
- Include a short video introduction where you introduce yourself and talk about your interests and skills.
GitHub Repository (Do this!):
- Create a GitHub repository for the project and commit code regularly.
- Maintain a clean and interactive README.md file in the GitHub repository, providing clear instructions on how to run the application and explanations of its features.
- Include a link to the GitHub repository in the project documentation.
Effective Project Communication (Bonus):
- Create a video presentation or explanation of the Personal Portfolio Project.
- Demonstrate the ability to explain technical concepts and project details in a concise and understandable manner.

Submission

Upon completing the project, submit your code and video, including all source code files, and the README.md file in your GitHub repository to your instructor or designated platform.

Project Tips

Plan Your Portfolio Structure:
- Not all of these sections should be on the same page. Figure out a good way to organize the required content
- Page Structure: Plan the structure of your portfolio by defining the main sections or pages you want to include. Common sections may include an About Me page, Projects page, Contact page, and Resume page.
Semantic HTML5 Elements:
- Semantic Tags: Make use of semantic HTML5 elements to provide meaning and structure to your content. For example, use <header>, <footer>, <nav>, and <section> elements where appropriate.
Image Optimization:
- Image Compression: Optimize images by compressing them to reduce page load times. Use the appropriate image formats and sizes for different types of images.
- Here is the resource we used in class TinyPng
Cross-Browser Testing:
- Browser Compatibility: Test your portfolio on multiple web browsers to ensure consistent rendering and functionality.
Form Handling (Contact Page):
- Functional Contact Form: If you include a contact form, ensure that it is functional and that form submissions are processed correctly.
Accessibility Considerations:
- Accessibility: Ensure that your portfolio is accessible to all users, including those with disabilities. Use appropriate HTML attributes and follow accessibility best practices.
Content Organization:
- Content Hierarchy: Organize your content logically, with clear headings, subheadings, and sections. Use lists and paragraphs effectively.
Regular Backups:
- Data Backup: Regularly back up your project files to prevent data loss. Store backups in a secure location.
GitHub Repository and Version Control:
- Repository Management: Establish a GitHub repository for your project and commit code regularly. Utilize version control to keep track of changes and collaborate effectively with team members if applicable.
- **README.md:** Maintain a clean and interactive README.md file in your GitHub repository. Provide clear instructions on how to run the application and explanations of its features. Include a link to your GitHub repository in your project documentation.
Effective Communication:
- Project Presentation: Consider creating a video presentation or explanation of your Personal Portfolio. This can be an excellent opportunity to showcase your understanding of technical concepts and project details in a concise and understandable manner.

Useful Resources

HTML Tutorial by Mozilla Developer Network (MDN):
- Website: MDN Web Docs - HTML Basics
- Description: MDN provides a comprehensive guide to HTML, covering the basics, elements, attributes, and more. It's an excellent resource for beginners.
W3Schools HTML Tutorial:
- Website: W3Schools HTML Tutorial
- Description: W3Schools offers interactive tutorials on HTML, making it easy for beginners to learn HTML elements, attributes, and best practices.
HTML5 Doctor:
- Website: HTML5 Doctor
- Description: HTML5 Doctor is a blog that focuses on HTML5 and provides articles and tutorials on HTML5 features, semantics, and best practices.
DevDocs - HTML:
- Website: DevDocs - HTML
- Description: DevDocs is an online documentation platform that aggregates documentation for various technologies, including HTML. It provides a quick reference for HTML elements and attributes.
HTML and HTML5 Cheat Sheet:
- Website: HTML and HTML5 Cheat Sheet
- Description: This cheat sheet provides a quick reference for HTML and HTML5 elements, attributes, and their usage

Mini-Project: Personal Portfolio Project