TheYuvraj_Blog-Spot

Building a personal blog and career portfolio is an excellent way to apply your BCA Semester 2 knowledge while creating a professional "digital handshake" for the industry. Since you are working a full-time shift from 07:00 to 16:30, this plan is structured into high-impact, modular phases that fit into your early morning and evening windows.

Phase 1: Architecture & Conceptual Design (Week 1)

Before writing any code, you must define the structure of your site. This prevents "rushing into code," which is a common beginner mistake.

• Identify Pages: Plan for a Homepage (Hero section), a Blog (Career lifestyle posts), an Experience section (Working history), and a Collaboration/Booking page.
• Visual Sketching: Use pen and paper or a free tool like Figma to draw your layout.
• Content Gathering: Prepare your bio, photos for the "lifestyle" aspect, and a list of your professional milestones.

Phase 2: HTML Structural Building (Week 2)

In this phase, you will focus on the "skeleton" of your website using semantic HTML5 tags. This ensures your site is accessible and organized.

• Core Structure: Learn to use <header>, <nav>, <main>, <section>, and <footer>.
• Blog Logic: Practice using <h1> to <h6> for post titles and <article> tags for your blog entries.
• Collaboration Elements: Create the structural components for your collaboration page, such as a contact form using <form>, <input>, and <textarea> tags.

Phase 3: CSS Styling & Aesthetics (Weeks 3–4)

This is where you transform plain text into a professional brand. Focus on layout techniques that make the site look good on both desktops and mobile phones.

• The Box Model: Master margins, padding, and borders to create spacing around your experience cards.
• Layout with Flexbox: Use Flexbox to align your navigation links horizontally and create a grid for your lifestyle blog images.
• Typography & Colors: Choose a consistent 2–3 color palette and readable fonts like Roboto or Lato.
• Responsive Design: Use Media Queries (@media) to ensure your site remains readable on a smartphone during your commute.

Phase 4: Appointments & Integration (Week 5)

Managing appointments requires either a complex backend or a smart beginner integration.

• Booking Forms: Build a detailed appointment request form where users can select a date and time.
• No-Code Widgets: To make your collaboration functional immediately without deep backend knowledge, learn to embed a free booking widget like Calendly or Elfsight. This allows users to see your availability and sync it with a calendar automatically.
• Social Connectivity: Add clickable icons linked to your LinkedIn and GitHub profiles.

Phase 5: Deployment & Documentation (Week 6)

The final step is making your site live so others can see your work.

• GitHub Hosting: Since you already have a GitHub repo, learn to use GitHub Pages. This is a free service for hosting static HTML/CSS sites.
• Clean Documentation: Write a professional README.md for your repo explaining the project goals and the technologies you used.

Learning Schedule for Working Professionals

To maintain consistency while working 07:00–16:30, follow this high-ROI routine :

• Morning (05:00 - 06:30): Use this "Deep Logic" time to learn one new concept (e.g., how Flexbox works or how to link a CSS file).

• Evening (18:30 - 20:30): Dedicate this block to building. Apply the concept you learned in the morning directly to your website files.

• Weekends: Use 4–6 hours for "Synthesis and Review," where you fix bugs and refine your design aesthetics.