w3-training

Welcome to the Portfolio Webpage Template Training! In this guide, you'll learn how to create a simple and personalized portfolio webpage using HTML and CSS. Follow the steps and customize the template to showcase your skills and projects effectively.

																												#############################################

Getting Started HTML Basics HTML (HyperText Markup Language) is the standard markup language for creating web pages. It consists of elements represented by tags.

: The root element of an HTML page. : Contains meta-information about the HTML document. : Contains the content of the HTML document. Headers and Line Breaks

,

, ...,

: Header tags represent headings of decreasing importance.

: Represents a paragraph.
: Represents a line break within text. HTML Tags Explanation: : This declaration defines the document type and version of HTML (HTML5, in this case). : The root element of an HTML page, wrapping all the content on the page. : Contains meta-information about the HTML document, such as character set, viewport settings, linked stylesheets, and the title of the page. : Specifies the character encoding for the document (UTF-8, which supports a wide range of characters). : Sets the viewport properties for responsive design, ensuring the page adapts to various device widths. : Links an external stylesheet (style.css) to apply styles to the HTML document. <title>: Sets the title of the HTML document, which appears in the browser's title bar or tab. : Contains the main content of the HTML document, such as headers, sections, and the footer.

: Represents a header section typically containing site branding and navigation. : Defines a navigation bar, often containing a list of links to different sections of the webpage.

: A

element with a class of "container" is often used for styling purposes. It sets a maximum width and centers the content.

to

: Heading tags from

to

represent different levels of headings. They are used for titles and subtitles.

and
• :
  represents an unordered list, and
  • represents list items. Used to create a list, such as the navigation links. : Represents anchor tags, used to create hyperlinks. In this case, used for navigation links.
    : Represents a generic section in an HTML document. Used to structure the content into meaningful parts. : Represents an image. Used to display project images in the portfolio section.

    : Represents a paragraph. Used for text content in various sections.
    : Represents a line break within text. Used for creating new lines in the "Contact Me" section.

    : Represents a footer section. Often contains information such as copyright statements or additional details. Open the index.html file in your preferred text editor. Familiarize yourself with the basic HTML structure. Explore the purpose of meta tags, the importance of the title tag, and linking the CSS file. About Me Section Create an engaging introduction about yourself in the "About Me" section. Understand the structure of HTML sections and text content. Portfolio Section Add your projects to the "Portfolio" section. Use images, headings, and paragraphs to describe each project. Contact Me Section Update the contact information in the "Contact Me" section. Learn how to create a mailto link for your email address. Footer Customize the footer with your own name and the current year. Styling with CSS Open the style.css file and explore basic CSS styles. Experiment with styles to personalize the appearance of your portfolio.

    TO DO Customization:

    Replace "Your Name" with your own name throughout the HTML document. Update the "About Me" section with your introduction. Project Showcase:

    Add your projects to the "Portfolio" section by replicating the project structure. Contact Information:

    Replace "your@email.com" with your own email address in the contact section. Styling Practice:

    Experiment with additional styles in the CSS file to personalize the appearance of your portfolio.