# html+css+java 3rd site resources for coursera project page

# Working Off-Platform

## **Getting Started:**

To work on this project, you will need an IDE or text editor and a web browser. You also have the option of downloading the starter files for a quick start. Alternatively, you can use your own existing files or start from scratch.

Details of how to get started can be found below. We've also included additional resources to help you setup your development environment to conduct coding needed for this case study.

**IDE/Text Editor**

To use the recommended Visual Studio Code. Download it for your operating system or update your existing installation to the latest version. Other alternatives are listed here in case you don't already have one installed.

[Download Visual Studio Code<svg aria-labelledby="cds-react-aria-193-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk-" role="img" viewbox="0 0 16 16" width="16"></svg>](https://code.visualstudio.com/download "Follow this link to download Visual Studio Code")

**(recommended)** [Download Eclipse IDE <svg aria-labelledby="cds-react-aria-194-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--1" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.eclipse.org/downloads/ "Follow this link to download the Eclipse IDE")(alternative) [Download IntelliJ IDE <svg aria-labelledby="cds-react-aria-195-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--2" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.jetbrains.com/idea/download/ "Follow this link to download the IntelliJ IDE")

(alternative)

If you use Visual Studio Code, it is also recommended that you install the Live Server extension:

<div id="bkmrk--3"><figure contenteditable="false" role="figure">![](https://d3c33hcgiwev3.cloudfront.net/imageAssetProxy.v1/GoePFQSXT7ikW5gC1ND96Q_38193bf7a0804fd18b7622a35c2b7bf1_Screenshot-2023-03-02-at-11.00.38-PM.png?expiry=1698451200000&hmac=uF58TLUO4eK_YpS6SiG5_eIgb-n8rifh0fFg9Wbhox0)</figure></div> **Web browser:**

To use the recommended Chrome web browser. Download it for your operating system or update your existing installation to the latest version.

[Download Chrome web browser<svg aria-labelledby="cds-react-aria-196-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--4" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.google.com/chrome/dr/download/ "Follow this link to download Chrome web browser")

**(recommended)** [Download Edge web browser <svg aria-labelledby="cds-react-aria-197-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--5" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.microsoft.com/en-us/edge "Follow this link to download the Edge web browser")(alternative) [Download Firefox web browser<svg aria-labelledby="cds-react-aria-198-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--6" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.mozilla.org/en-US/firefox/new/ "Follow this link to download the Firefox web browser") (alternative) [Download Opera web browser<svg aria-labelledby="cds-react-aria-199-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--7" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.opera.com/ "Follow this link to download the Opera web browser")

(alternative)

 **Optional: Download The Optional Starter Files**

1\. Download the [Starter.zip<svg aria-labelledby="cds-react-aria-200-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--8" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.coursera.org/learn/showcase-build-a-portfolio-website-html-css-javascript/resources/ykiWt "Follow this link to download the file")

file with the necessary starter code and file structure.

2\. Double-click on it to "unzip" the folder. It should contain several items:

1. A recommended file directory structure
2. index.html
3. master.css
4. main.js

3\. Open the directory in the IDE or editor of your choice.

### Additional Resources

- [Visual Studio Code for the Web<svg aria-labelledby="cds-react-aria-201-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--9" role="img" viewbox="0 0 16 16" width="16"></svg>](https://code.visualstudio.com/docs/editor/vscode-web "Visual Studio Code for the Web")
- 
- [W3C HTML References<svg aria-labelledby="cds-react-aria-202-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--10" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.w3schools.com/tags/default.asp "W3C HTML References ")
- 
- [W3C CSS References<svg aria-labelledby="cds-react-aria-203-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--11" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.w3schools.com/cssref/index.php "W3C CSS References")
- 
- [W3C JavaScript References<svg aria-labelledby="cds-react-aria-204-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--12" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.w3schools.com/jsref/jsref_reference.asp "W3C JavaScript References ")
- 
- [Debugging with the Chrome Browser<svg aria-labelledby="cds-react-aria-205-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--13" role="img" viewbox="0 0 16 16" width="16"></svg>](https://developer.chrome.com/docs/devtools/javascript/ "Debugging with the Chrome Browser")
- 
- [Build Fast, Responsive sites with Bootstrap<svg aria-labelledby="cds-react-aria-206-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--14" role="img" viewbox="0 0 16 16" width="16"></svg>](https://getbootstrap.com/ "Bootstrap")
- 
- [Using the JQuery Framework<svg aria-labelledby="cds-react-aria-207-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--15" role="img" viewbox="0 0 16 16" width="16"></svg>](https://jquery.com/ "JQuery")
- 
- [Royalty-free graphics on Pixabay<svg aria-labelledby="cds-react-aria-208-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--16" role="img" viewbox="0 0 16 16" width="16"></svg>](https://pixabay.com/ "Royalty-free graphics on Pixabay")
- 
- [Free icons (need attribution)<svg aria-labelledby="cds-react-aria-209-title" class="css-1lzqdox" fill="none" focusable="false" height="16" id="bkmrk--17" role="img" viewbox="0 0 16 16" width="16"></svg>](https://www.flaticon.com/authors/flat-icons)