FINAL EXAM - WEB

ADOBE CC RESPONSIVE SITE DESIGN

Royalty Free Images - LINK

DIRECTIONS:

  1. Create Your Site in Dreamweaver
    1. Go to your folder on the server and create a new folder and name it finalExam
    2. Open Dreamweaver and click site menu and choose new site.
    3. Site Name = Your Initials - Final Exam
    4. Attach to finalExam folder you created in previous step.
    5. After Site Definition - Click file and then new in Dreamweaver menu.
      1. Choose Starter Templates in left column
      2. Choose Bootstrap Templates in Sample Folder (2nd Column)
      3. Choose Bootstrap Portfolio in Sample Page (3rd Column)
      4. Click Create in bottom right of window.
      5. Choose File Menu and Save - In the file name box enter index.html
      6. Click Save
      7. Change the Title in Header Section to Your Name Digital Portfolio

Main Page - index.html

  1. Change the text Navbar to Your Name or a logo you create that includes your name.  If you use text, add a right padding of 30px to your name.
  2. Change the Links in your Navbar to 9th Grade, 10th Grade, 11th Grade, 12th Grade
    1. Add drop down links to each of the above links to your classes you had each year.  If you are only a Sophomore you would not have drop downs for Junior or Senior Years.
  3. Delete all sections between the nav and footer of the site
  4. Insert a Jumbotron in the insert panel.
    1. add a background image to the row that fits your interests right now.  Could be an image of you or something you are interested in.  You add the image in the html <div class="jumbotron">. HINT = add STYLE to a div in html.
    2. Change the top and bottom padding to the jumbotron to top/bottom = 150 px and left/right = 20px.  HINT = in same style as image.
    3. Change the margin for the jumbotron to 0px.  HINT = in same style as image
    4. Change the Hello World text to ABOUT ME and center align the text and change the color of the text to something that works with image.
    5. Change the first paragraph text to a 4 to 5 sentence paragraph that tells the person viewing about your life and change text color to a color that works with the image
    6. Delete any text and horizontal rules after the first paragraph and up to the footer section.  Footer section should remain.
  5. Copy/Paste the following code directly below the JUMBOTRON

<section style="background-color: White; margin-top: 0px; padding: 50px 0px;">
<div class="container">
<div class="row">
<div class="col-12" style="text-align: center; color: black;"><h2>MY FAVORITE QUOTES</h2></div>
</div>
<div class="row">
<div class="col-xl-4" style="text-align: center; color: black;">
<h3>Author's Name #1</h3>
<p>Quote</p>
</div>
<div class="col-xl-4" style="text-align: center; color: black;">
<h3>Author's Name #2</h3>
<p>Quote</p>
</div>
<div class="col-xl-4" style="text-align: center; color: black;">
<h3>Author's Name #3</h3>
<p>Quote</p>
</div>
</div>
</div>
</section>

  1. Create a New Section by using Copy/Paste and the above code again to create a completely new section.
    1. Changes to Make to this section
      1. Change the background color of the section to one that fits your over all color scheme.  Cannot be white.
      2. Defining Moments Heading
      3. List three Defining Moments
      4. Provide Description of each of these items.
  2. Create a New Section by using Copy/Paste and the same code again to create a completely new section.
    1. Changes to Make to this section
      1. Change the background back to white.
      2. Pivotal People in My Life
      3. List each Persons Name
      4. Provide explanation on why they important people in your life.
  3. Create a New Section by using Copy/Past and the same code again to create a complete new section
    1. Changes to Make to this section
      1. Change the background color of the section to one that fits your over all color scheme.  Cannot be white
      2. Change the columns to 4 instead of 3.  You will need to figure out the code for this.
      3. Heading = Life Goals
      4. List a Title Each of the Five Goals
      5. Explain what each of your five goals are.
  4. Change the padding of the footer to
    1. Top = 20px
    2. Right = 0px
    3. Bottom = 10px
    4. Left = 0px
    5. Change text of MyCompany to your name