/Profile-Page

This is a profile page that uses the Bootstrap and jQuery.

Primary LanguageHTML

Profile Page

By the end of this project you should have a custom website hosted on the internet.

Getting Started

To get started create a folder on your desktop and open the command line or terminal in that foler and run these commands:

    git clone https://github.com/imcgonigle/Profile-Page.git
    cd Profile-Page
    ./index.html

That downloaded the template you are going to be using for your Profile Page and opened it in a web browser.

Now open VS Code. In the application menu go to File > Open Folder and navigate to the template folder.

After doing that, the project should be opened in VS Code. Doouble click the file index.html in the root directory. That will open index.html in the editor section.

Open your text editor and web browser side by side. Scroll down to line 15 and take a look around the code. Can you see which parts of the code correlate to the elements you are seeing on the web page? Talk to one of your fellow classmates about what you see.

Customizing the Page

Now that you have the code on your machine you can start customizing it.

Go through the code and make these changes:

  1. Replace the name at the top with your own.
  2. Come up with your own metaphore for programming.
  3. Find a picture on Google and replace the current image with one you find.
  4. Replace the giberish below in each section with your response to each statement below the picture.

Uploading to the Web

Uploading to the web is going to be the easiest part of this as long as you have everythin installed properly.

To upload your site to the web you first need to install Surge. Do that by running the command npm install -g surge.

That installed Surge on globaly on your machine. Now make sure you are in the correct directory by runnin ls on Mac or dir if you're on Windows. If you see the files index.html, css, fonts, javascript README.md then you're in the right place. If you are in the right directory, run surge. Answer each of the prompts. NOTE: for security reasons, it will look like your keyboard isn't working when you type your password. But don't wory it's working you're just not seeing anything. Just type a password and hit enter.