Project 1: Build a Portfolio Website

Objective:

Create a simple personal portfolio website to showcase your journey as an aspiring web developer. This task will help you practice fundamental web development skills.

Task Overview:

1. Set Up Your Project:

  • Create a new folder on your computer for your portfolio website.
  • Open your code editor (like VS Code) and create three files: index.html, styles.css, and script.js.

2. Design Your Portfolio:

  • Layout Planning: Start by planning the layout of your website. Consider the following structure:
    • Header: Include your name, a navigation menu (with links to sections like "About Me," "Projects," and "Contact"), and a logo or icon if you have one.
    • Main Section: Write a brief introduction about yourself. This could be a short paragraph that describes who you are, what you're learning, and your goals in web development.
    • Projects Section: Create a space where you can showcase any projects you’ve worked on, even if they are small exercises or sample projects. If you don’t have projects yet, include placeholders with descriptions of what you plan to work on.
    • Contact Section: Provide a way for visitors to contact you, like a simple email link or a contact form.
    • Footer: Add a footer with your name, the year, and any relevant links (like a GitHub profile or social media).
  • Color Scheme:
    • Choose a simple color scheme with 2-3 complementary colors. For example, a primary color for your header and buttons, a secondary color for backgrounds, and a neutral color (like grey) for text.
    • Use a tool like Coolors or Adobe Color to help you pick colors that work well together.
  • Typography:
    • Select two fonts: one for headings and one for body text. Google Fonts is a great resource to find free fonts.
    • Make sure your text is readable by choosing appropriate font sizes and line spacing. Headings should be larger and stand out, while body text should be smaller and easy to read.
  • Images and Icons:
    • Add a profile picture or avatar to the "About Me" section if you have one.
    • Use simple icons to enhance the design (e.g., social media icons in the footer). Sites like Font Awesome offer free icons.
    • Ensure that all images and icons are optimized for web use (small file size, appropriate dimensions) to keep your website loading quickly.
  • Responsiveness:
    • Plan your design to be responsive, meaning it should look good on both desktop and mobile devices. Use a grid layout or flexbox in your CSS to help with this.
    • Test your design by resizing your browser window and adjusting styles as needed to ensure content doesn’t overlap or get cut off.

3. Build the Website:

  • HTML: Structure your content in the index.html file. Use semantic HTML elements like <header>, <nav>, <section>, and <footer>.
  • CSS: Style your website in the styles.css file. Implement the color scheme, typography, and responsive design you planned.
  • JavaScript (Optional): Use the script.js file to add a small interactive feature like a button that changes color when clicked, or a simple light/dark mode toggle.

4. Test Your Website:

  • Open your index.html file in a web browser to see how it looks.
  • Check that all sections are displaying correctly, and that the design is responsive (adjusts to different screen sizes).
  • Make sure all links work and that there are no broken images or layout issues.

5. Show Your Work:

  • Once you've completed your portfolio, practice showing it to others. Share it with friends or classmates to get feedback.

This task will help you practice basic HTML, CSS, and optionally, a bit of JavaScript, while focusing on creating a clean, simple, and responsive design. It’s a great starting point for building your online presence as a web developer.