FINAL EXAM - WEB
ADOBE CC RESPONSIVE SITE DESIGN
Royalty Free Images - LINK
DIRECTIONS:
- Create Your Site in Dreamweaver
- Go to your folder on the server and create a new folder and name it finalExam
- Open Dreamweaver and click site menu and choose new site.
- Site Name = Your Initials - Final Exam
- Attach to finalExam folder you created in previous step.
- After Site Definition - Click file and then new in Dreamweaver menu.
- Choose Starter Templates in left column
- Choose Bootstrap Templates in Sample Folder (2nd Column)
- Choose Bootstrap Portfolio in Sample Page (3rd Column)
- Click Create in bottom right of window.
- Choose File Menu and Save - In the file name box enter index.html
- Click Save
- Change the Title in Header Section to Your Name Digital Portfolio
Main Page - index.html
- 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.
- Change the Links in your Navbar to 9th Grade, 10th Grade, 11th Grade, 12th Grade
- 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.
- Delete all sections between the nav and footer of the site
- Insert a Jumbotron in the insert panel.
- 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.
- Change the top and bottom padding to the jumbotron to top/bottom = 150 px and left/right = 20px. HINT = in same style as image.
- Change the margin for the jumbotron to 0px. HINT = in same style as image
- 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.
- 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
- Delete any text and horizontal rules after the first paragraph and up to the footer section. Footer section should remain.
- 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>
- Create a New Section by using Copy/Paste and the above code again to create a completely new section.
- Changes to Make to this section
- Change the background color of the section to one that fits your over all color scheme. Cannot be white.
- Defining Moments Heading
- List three Defining Moments
- Provide Description of each of these items.
- Changes to Make to this section
- Create a New Section by using Copy/Paste and the same code again to create a completely new section.
- Changes to Make to this section
- Change the background back to white.
- Pivotal People in My Life
- List each Persons Name
- Provide explanation on why they important people in your life.
- Changes to Make to this section
- Create a New Section by using Copy/Past and the same code again to create a complete new section
- Changes to Make to this section
- Change the background color of the section to one that fits your over all color scheme. Cannot be white
- Change the columns to 4 instead of 3. You will need to figure out the code for this.
- Heading = Life Goals
- List a Title Each of the Five Goals
- Explain what each of your five goals are.
- Changes to Make to this section
- Change the padding of the footer to
- Top = 20px
- Right = 0px
- Bottom = 10px
- Left = 0px
- Change text of MyCompany to your name