webdev1

HTML & CSS Learning Journey

Core Concepts Learned

Semantic HTML

I learned to use meaningful tags instead of just div. This makes my code cleaner and accessibility-friendly.

Example Code:

<header>
  <nav>
    <ul>...</ul>
  </nav>
</header>

CSS Grid & Mix-Layout

To fix layout issues from A1, I implemented CSS Grid. I used the grid-column property to create the "Featured" card layout.

Example Code:

/* Mix-Layout Logic */
.card-featured {
    grid-column: 1 / -1; 
    display: flex; 
}

Tools & Resources Used

I utilized various industry-standard tools and resources to build this responsive website.

📚 Learning Resources

  • MDN Web Docs: Used for looking up semantic HTML tags and CSS properties.
  • W3Schools: Great for quick CSS Grid examples.
  • Unit Materials: Followed the Module 1-6 guides for best practices.

🛠️ Development Tools

  • VS Code: My primary code editor.
  • Chrome DevTools: Used for debugging layout issues and testing mobile responsiveness.
  • cPanel & WordPress: For deploying the live site and managing the blog.

Daily Learning Log (A1 + A2 Progress)

  • Day 1-2 (A1): Started with basic HTML structure and added photos with alt text.
  • Day 3-5 (A1): Struggled with layout overlaps and inline CSS. Teacher's feedback highlighted the need for improvement.
  • Day 6 (Refactoring): Created styles.css. Moved all inline styles to this external file to fix the issues mentioned in teacher's feedback.
  • Day 7 (Responsive): Implemented "Mobile First" design. Added @media queries to switch from 1 column to 2 columns on desktop.
  • Day 8 (JavaScript): Added form validation in script.js. Now it alerts users if they forget to type their email.
  • Day 9 (CMS Setup): Installed WordPress in the /blog directory using Softaculous. Customized the theme to match my style.