Step 1: Create a Web Page

Creating the Webpage

0. Open the index.html file

   • 🦉: Optionally, open the file in your browser either by path or using VSCode Live Server extension.

1. Where it says <!-- INCLUDE STYLES FILE HERE -->, add a <link> with a reference to the styles sheet located in resources/styles/styles.css.

2. Where it says <!-- INCLUDE SCRIPTS FILE HERE -->, add a <script> with a reference to the scripts file located in resources/scripts/index.js.

3. update the HTML <title> tag to be your name.

4. Inside the body of the page and locate the container (<div>).

   • ⚠️ Note: This container will enclose all of the page's content.

5. Update the <h1> to Display displays your name.

6. Add an image <img> of yourself.

   • Ensure the images is stored in resources/images and that you use relative path, not the complete file path. Remember, I can't access files on your computer (DUHH!).

     • Do

         <img src="resources/images/myphoto.jpg" />
     • Don't do

         <img src="C:/Users/yahya/Desktop/OnlinePortfolio/resources/images/myphoto.jpg"/>

7. 🚩 Make a git commit here

   • The commit message needs to be meaningful. Example: "Initialize the page"
   • If you're using the command line, the command would be: git commit -m "initialized the page".

8. Create the following 4 sections. For each section:

   • Wrap each section within a <div> with a class name of section and an ID as specified below.
   • Title each section using <h2> tags
   • 🚩 make a git commit at the end of creating each section. i.e. git commit -m "added Personal background section", git commit -m "added Work and Development Experience section" and so on ...
   • sections are:
     1. Personal background
        • The enclosing <div> should have a class of section and an ID of personal-background.
        • Include a paragraph <p> or an unordered list <ul> with some background information. (don't share too much information, or anything sensitve)
        • 🚩 make a git commit git commit -m "added Personal background section".
     2. Work and Development Experience
        • The enclosing <div> should have a class of section and an ID of experience.
        • Use an ordered list <ol> to list some roles and places you've worked at.
        • 🚩 make a git commit.
     3. Programming Languages
        • The enclosing <div> should have a class of section and an ID of programming-languages.
        • Use an ordered list <ol> to list the programming languages you know.
        • 🚩 make a git commit.
     4. Achievements ** The enclosing <div> should have a class of section and an ID of achievements.
        • Use an unordered list <ul> to list some of the achievements you'd like to share.
        • 🚩 make a git commit.

9. Style the webpage with some custom styles in resources/styles/styles.css using classes, and IDs.

   • The Bootstrap library is already included at the top of the HTML file. Feel free to use its classes to style your page.
   • 🚩 make a git commit once done with the styling or incrementally as you're making your changes.

10. Once you are finished, make sure you push all the changes to the repository.

    • any thing looking like this or better is accepted. (With content of course)
    

• Continue to the next page