Skills Assignment SA2: Webpage Basics

Required Demos-n-Deets demos:

• Webpages
• Root Routes
• Internal Links
• Images

Optional demos (for now): Everything else in the “Webpage Basics” section of the Demos-n-Deets.

Active Reading

Follow the general instructions for active reading for the above required demos.

What to submit:

• For the Webpages demo:
  • sa2-ar-01: A screenshot of the completed web page running in your web browser.
• For the Root Routes demo, two screenshots:
  • sa2-ar-02: one of the resulting routes.rb file
  • sa2-ar-03: one that shows your web browser after you enter http://localhost:3000 into the location bar.
• For the Images demo:
  • sa2-ar-04: A screenshot of the completed web page running in your web browser.
• For the Internal Links demo, two screenshots:
  • sa2-ar-05: one that shows the link code in the HTML.ERB view file
  • sa2-ar-06: one of the browser with the page that displays the link.

Important! All screenshots must include your computer’s desktop in the background so that it is recognizable as your desktop. Also, all screenshots of web pages must display the entire URL of the page in the browser’s location bar. (Watch out, as some browsers like to hide parts of the URL unless you click on it.)

Practice Test

Before proceeding, be sure to read the general description and instructions for the practice tests.

Start with the base project on the main branch of this repo: https://github.com/memphis-cs/practice-apps-2023-08fall

Task to perform:

Add two pages as follows:

• Welcome page. A page that displays a greeting of your choice to visitors. Be creative in designing your page, but follow these constraints:
  • Opens with this URL: http://localhost:3000/welcome
  • The root page (http://localhost:3000) redirects to this page.
  • Its controller action is PagesController#welcome.
  • It uses at least this HTML element: <h1>.
  • It includes a link to the “me” page (using the link_to view helper).
• “Me” page. A page that presents fun info about yourself and your interests. Be creative in designing your page, but follow these constraints:
  • Opens with this URL: http://localhost:3000/me
  • Its controller action is PagesController#me.
  • It uses these HTML elements: <h1>, <p>, <ul>, and <li>.
  • It includes a picture of yourself (using the image_tag view helper).
  • It includes a link to the welcome page (using the link_to view helper).

What to submit:

• sa2-pt-01: A screenshot of your Welcome page.
• sa2-pt-02: A screenshot of your Me page.
• sa2-pt-03: A screenshot of your routes.rb file.
• sa2-pt-04: A screenshot of your controller file.
• sa2-pt-05: A screenshot of your Welcome HTML.ERB view file.
• sa2-pt-06: A screenshot of your Me HTML.ERB view file.

Important! All screenshots must include your computer’s desktop in the background so that it is recognizable as your desktop. Also, all screenshots of web pages must display the entire URL of the page in the browser’s location bar. (Watch out, as some browsers like to hide parts of the URL unless you click on it.)

Explanation Video

Before proceeding, be sure to read the general instructions for the explanation videos.

Start with the base project on the main branch of this repo: https://github.com/memphis-cs/practice-apps-2023-08fall

The video can begin after you have cloned, initialized, and run the base app.

Task to perform:

Add two pages as follows:

• Movie description page. A page that displays data about a movie of your choice. Be creative in designing your page, but follow these constraints:
  • Opens with this URL: http://localhost:3000/movie
  • The root page (http://localhost:3000) redirects to this page.
  • Its controller action is PagesController#movie.
  • It uses at least these HTML elements: <h1>, <h2>, <p>, <ul>, and <li>.
  • It includes a picture related to the movie (using the image_tag view helper).
  • It includes a link to the review page (using the link_to view helper).
• Movie review page. A page that presents your review of the movie. Be creative in designing your page, but follow these constraints:
  • Opens with this URL: http://localhost:3000/review
  • Its controller action is PagesController#review.
  • It uses these HTML elements: <h1> and <p>.
  • It includes a link to the movie page (using the link_to view helper).

Note: You will probably want to plan out these pages before you begin recording, and be careful not to make them to long. You may copy/paste text for the movie data and the review from the web (e.g., Rotten Tomatoes or IMDB) to help speed things along.

Important! Be sure to run and test the things you build in your video (e.g., as per the “Check It!” demo steps).