AD - SBA - HTML/CSS/JavaScript - UPDATE

Access my site by navigating to the following link: https://livinginbeta.github.io/sba.javascript_3-page-website/

LastFavors.com is the website for an application that helps people navigate the tumultous timeframe after a loved one dies, whether unexpectedly or not. it provides for the collection of wants and requests by a person for after they pass (who should be invited -- or not -- to their funeral, what kind of music and service it should be, information about life insurance, whether they want to be buried or cremated, etc.) it also serves as a guide for someone one who might not know whom to contact after experiencing the loss of a loved one, what steps need to happen, LastFavors.com will also suggest local officiants for any resulting religious services, grief counselors for peace of mind, estate lawyers, funeral homes, etc.

Bootrap was employed to take advantage of its grid system as a skeleton for the site's page structure. HTML, CSS, and Javascript were used to meet assignment requirements, such as multiple forms (done in HTML), media (video, an animated GIF, and images). Two of the images were created in Photoshop.

Regex validation was used on the first and last name fields of the Contact Us form. Additionally, when the submit button is sent a listener activates the pulling of both first and last name into a personalized message to the user.

===============================

Description

• In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly.

• You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor.

• Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements.

• Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system.

• Some resources for free content:

  • Photos: https://www.pexels.com/search/template/
  • Text: https://www.lipsum.com/
  • GIFs: https://www.motionelements.com/stock-image-10116013-business-and-startup-4k

• Useful API sites:

  • https://rapidapi.com/ (Links to an external site.)
  • https://any-api.com/ (Links to an external site.)
  • https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.)
  • https://apilist.fun/

Deliverable:

• A theme for your site that you feel comfortable with
  • Complete all technical requirements for HTML, CSS, and Javascript
  • Have markups of your pages
  • Research for a public API that can provide you with content (Optional)
  • Include a README file. The file should include technical specifications and description of your website.
  • Host on GitHub, include the link to your GitHub account in the README file(optional)
  • Submit the project in a ZIP file

Technical requirements

• HTML

  • Have at least 3 pages, keep the grid system consistent as much as possible
  • Use at least 10 different HTML tags
  • Use HTML tables
  • Implement at least two uses for forms
  • Dropped Down Menu
  • Use web fonts
  • Use different types of content in the form of text, images, videos, and GIFs
  • Use regex validation

• CSS

  • Inline, internal, and external styling
  • Use five different CSS selectors
  • Don’t use too many fonts
  • Use colors that complement each other
  • Use Flexbox (Optional)
  • Use SASS/SCSS (Optional)
  • Use animations (Optional)

• Javascript

  • External scripts
  • Use variables, if statements, loops, at least one form of collections, functions/call back, and events
  • Use AJAX (Optional)
  • Use JSON or XML (Optional)
  • Use JQuery (Optional)

How to Download

Part 1 - Forking the Project

• To fork the project, click the Fork button located at the top right of the project.

Part 2 - Navigating to forked Repository

• Navigate to your github profile to find the newly forked repository.
• Copy the URL of the project to the clipboard.

Part 3 - Cloning forked repository

• Clone the repository from your account into the ~/dev directory.
  • if you do not have a ~/dev directory, make one by executing the following command:
  • • mkdir ~/dev
  • navigate to the ~/dev directory by executing the following command:
  • • cd ~/dev
  • clone the project by executing the following command:
  • • git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}

How to Submit

Part 1 - Pushing local changes to remote repository

• from a terminal navigate to the root directory of the cloned project.
• from the root directory of the project, execute the following commands:
  • • add all changes
  • • git add .
  • • commit changes to be pushed
  • • git commit -m 'I have added changes'
  • • push changes to your repository
  • • git push -u origin master

Part 2 - Submitting assignment

• from the browser, navigate to the forked project from your github account.
• click the Pull Requests tab.
• select New Pull Request