Skip to content

Instantly share code, notes, and snippets.

@ross-u

ross-u/README.md

Last active October 19, 2021 02:57
Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save ross-u/9c8a557e7d311da11a0621c7d321d358 to your computer and use it in GitHub Desktop.
Save ross-u/9c8a557e7d311da11a0621c7d321d358 to your computer and use it in GitHub Desktop.
Download ZIP
webinar-portfolio-html-css-resources
Raw
README.md

Materials


Presentation

Feel free to use this presentation as a reference.


CodeSandbox - Starter Code

Open this CodeSandbox and start editing. It will automatically create a fork (that is, a duplicate) for you to work on.


What we'll be building

We'll be building the following Portfolio Web Page:


Final Result

You can see the intended finished result here, as well as the corresponding source code.



Avatar Images

This is the avatar image we'll use for our portfolio page.

Copy this url and place it in the src attribute for the img tag.

https://i.imgur.com/X7nm0R5.png

This is the an alternative avatar image you may want to use.

Copy this url and place it in the src attribute for the img tag.

https://i.imgur.com/T4EpAg6.png


Project Example Images


This is one of the project images we'll use for our portfolio page.

Copy this url and place it in the src attribute for the img tag.

https://i.imgur.com/4Qz4mxJ.png

This is the second project image we'll use for our portfolio page.

Copy this url and place it in the src attribute for the img tag.

https://i.imgur.com/t0oWKrW.png


Lorem Ipsum text

Copy paste the below text and insert it between the <p></p> tags.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Hendrerit dolor magna eget est lorem ipsum. In aliquam 
sem fringilla ut morbi tincidunt augue interdum velit. Tempus quam pellentesque nec nam 
aliquam sem et tortor. Diam vulputate ut pharetra sit amet aliquam id. Sed blandit libero
volutpat sed. Purus viverra accumsan in nisl nisi scelerisque. Posuere morbi leo urna
molestie at elementum. Laoreet id donec ultrices tincidunt arcu non sodales neque.
Quis auctor elit sed vulputate mi. Et ultrices neque ornare aenean euismod elementum nisi quis.

Generated using https://loremipsum.io/



Colors

Use the following colors to style your page.

cornflowerblue


deepskyblue


aliceblue


gray


white


Background pattern and color - body

To add aditional style to the body element and the entire page we will use autogenerated styles from the website heropatterns.com.


Copy and paste the below css rules to your style.css, inside of the body {} selector block:

background-color: #ecf0f4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d1dbe3' fill-opacity='0.4'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

Link to the Resume/CV file

Use the below provided link for accessing the page with the .pdf file of the resume.

Link:


https://app.box.com/s/esb7tleia8vml0njf53mdzeo7og0v0f5

Example:

 <a href="https://app.box.com/s/esb7tleia8vml0njf53mdzeo7og0v0f5" target="_blank" >
   <button class="btn">SEE MY RESUME</button>
 </a>

Deployment (publishing the website)

  1. In the top right corner on the Code Sandbox page, click Sign in.

  2. A pop-up will appear. In the pop-up window click on Sing in with Github.

  3. New pop-up opens to Sign in to Github to continue to CodeSandbox,

    Here click on the Create an account

  4. Choose the unique username, enter your email and choose the password.

  1. Click on the Verify and adjust the image to finish the verification step.

  2. Finally click on the blue button at the bottom, saying Create account.

Verify the email

  1. Github will send you a one time email to verify your newly created account. This email will have the button saying Verify. Go ahead and click on that button.

  2. After that you can go back to the Code Sandbox page of our project and again click to Sign in (button in the top right corner).

  3. This will open a pop up and ask you to Authorize codesandbox.

    Click on the button Authorize codesandbox.

  4. As the repo is copy of the webinar code, first we will have to Fork the repo (button in the top right corner) and make our own copy on Code Sandbox.

  5. After that on the left side of the code sandbox go to the Github Icon, here if needed click on Sign in again,

    or if already done click on **Export to GitHub ** , set the name (without spaces. e.g my-resume ) for new repository and click on Create Repository.

  1. Once the repository is created open your GitHub account by visiting www.github.com.

Deploy with the GitHub and GitHub Pages

  1. Once on GitHub, open the list of Your repositories by clicking on the menu in the top right.

  2. Select the newly created repository holding our code from the Code Sandbox, by clicking on the name.

  3. This will open the repositroy page. This is the page which is hosting your code on GitHub servers. From here we will create a website using GitHub pages and make our page available online (deployed) for anyone who wants to visit it.

  4. Click on the Setting tab in the top right.

  5. Once on the Settings page, scroll down to the part saying GitHub Pages (1).

  6. Click on the dropdown menu under the Sources headline (2).

  7. Select source to be master, by clicking on the master branch (3).

  8. This will publish our page and give us a link that we can now visit and see the live version of our portfolio page (4).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment