It seems like you are using an ad blocker. To enhance your experience and support our website, please consider:

  1. Signing in to disable ads on our site.
  2. Sign up if you don't have an account yet.
  3. Or, disable your ad blocker by doing this:
    • Click on the ad blocker icon in your browser's toolbar.
    • Select "Pause on this site" or a similar option for INITAcademy.org.

LCC: Web Apps Development Essentials

Course by zooboole,

Last Updated on 2024-09-05 14:50:08

Day 14: End Of Week Project - Personal Blog Page with HTML and CSS

Project Description:

This project will guide participants to create a simple personal blog page. Below are the steps and the HTML tags to use for each part of the project.

Step 1: Set Up the Basic Structure

  1. Create a New HTML File:

    • Create an index.html file.
    • Structure the document using:
      • <html>, <head>, <body>, and <title>.

  2. Inside the <body>, create a header for the blog:

    • Add a <header> tag to include the blog name or logo.
    • Use a <nav> tag for navigation links like Home, About, and Contact.
    • Inside the <nav>, use an unordered list <ul> with list items <li> to create the menu links (<a> for the links).

Step 2: Build the Main Content Section

  1. Introduce the Blog:

    • Create a main content section using <main>.
    • Add a heading (<h1>) for the blog title and a paragraph (<p>) for the introduction text.

  2. Create Blog Post Cards:

    • For each post, use a <div> to structure the card.
    • Add an <img> tag for the blog image.
    • Use a subheading (<h2>) for the blog title.
    • Write a short description using a paragraph (<p>).
    • Add a "Read More" button using an anchor tag (<a>).

Step 3: Design the Footer

  1. Add Contact Information:
    • At the bottom, create a footer using the <footer> tag.
    • Inside the footer, add a paragraph (<p>) with contact information.
    • Include links to social media using anchor tags (<a>), wrapped in <li> elements if you are using a list for the icons.

Step 4: Apply Basic Styling with CSS

  1. Create a New CSS File:

    • Create a style.css file.

    • Use the <link> tag inside the <head> to link the CSS file:

      <link rel="stylesheet" href="style.css">

  2. Style the Header:

    • Use CSS to style the <header> and <nav>.
    • Align navigation links horizontally with display: flex or inline-block.
    • CSS Focus:
      • display, background-color, color, padding, margin.

  3. Style the Blog Post Cards:

    • Style the <section> and <div> elements to display blog posts neatly.
    • Add padding and margins for spacing, and style the <img>, <h2>, <p>, and <a> tags.
    • Add hover effects to the "Read More" button (<a>).
    • CSS Focus:
      • width, padding, margin, hover.

Step 5: Ensure Responsiveness

  1. Use Media Queries:
    • Use CSS media queries to ensure the layout is responsive for mobile devices.
    • Stack blog posts vertically on smaller screens by modifying the layout of the <section> and <div>.
    • CSS Focus:
      • @media, flex-direction, font-size.

Step 6: Final Touches

  1. Review the Page:

    • Ensure that the <header>, <main>, <section>, and <footer> are visually appealing and properly spaced.

  2. Test on Different Devices:

    • Open the blog page on desktop and mobile to check responsiveness and design.