/profile-styler

Primary LanguageHTML

Profile Styler

This project is designed to help you practice building web pages with semantic HTML and applying CSS for styling. By completing this exercise, you will enhance your understanding of HTML semantics and CSS styling techniques.

Objective

Your task is to create a personal profile card that is both visually appealing and semantically structured. This exercise will help reinforce your skills in using HTML and CSS effectively to create a standard web component.

Getting Started

  • Clone this repository:
    • git clone [https://github.com/turingschool-examples/profile-styler.git]
  • Navigate to the project directory:
    • cd profile-styler
  • Open the entire project in your favorite code editor.
  • View the index.html and style.css files to understand the existing structure and styles.

Project Structure

  • index.html - Contains the HTML structure of the profile card.
  • style.css - Contains the CSS for styling the profile card.

Exercise Instructions

Enhance the HTML

Ensure the HTML inside index.html uses semantic tags appropriately. Add any additional semantic elements you think could improve the structure and accessibility of the profile card.

  • Use an <article> element with the class profile-card to contain the entire card.
  • Include a <header> element within the article for containing the image and name.
  • Inside the <header>, place an <img> element for the profile picture with alt text. Assign it a class profile-pic.
  • Add a <h1> element for the name with a class name.
  • Use a <section> element with the class profile-info for additional information.
  • Include a <p> element for a short bio with a class bio.
  • Add a <footer> element containing a <nav> element for social media links.
  • The <nav> should contain an <ul> with the class social-media, where each <li> holds an <a> link to a social media profile.

Apply CSS Styles

Open style.css and customize the styles. Focus on the following:

  • Layout adjustments using CSS Flexbox or other techniques.
  • Font styles, colors, and other aesthetics.
  • Make sure the profile card is responsive and looks good on different screen sizes.
  • Apply CSS to the profile-card for general layout adjustments (e.g., max-width, margin, background).
  • Style the profile-pic to be rounded and properly scaled.
  • Ensure text in the profile-info is well-aligned and readable.
  • Use pseudo-classes like :hover to add interactive styles to the social media links.

Test Your Page

  • Open your project in a browser to see how it looks and functions.
  • Use browser developer tools to inspect the page and modify styles in real-time.

Learning Goals

  • Understand and apply semantic HTML tags.
  • Enhance page structure.
  • Practice CSS styling, focusing on layout and design.
  • Develop responsive design skills.

Submission

After you have completed your adjustments and are satisfied with the profile card, push your changes to your forked repository and share the link in your main Slack channel.