This is the repository for the LinkedIn Learning course Creating GitHub Portfolios. The full course is available from LinkedIn Learning.
Are you a developer looking to promote your work? In this course, Leigh Lawhon shows you how to build and showcase your work by building a portfolio site with GitHub Pages. Join Leigh to learn some design basics and how to utilize Codespaces to set up projects in minutes. She shows you how to use the site generator Jekyll, provides helpful coding samples, and an overview of what employers are looking for. Plus, learn how to support your work with visual and writing skills that complement your coding skills. If you want to show off the work you’ve done in a professional and easy to navigate site, join Leigh in this course.
See the readme file in the main branch for updated instructions and information.
This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add /tree/BRANCH_NAME to the URL to go to the branch you want to access.
The branches are structured to correspond to the videos in the course. The naming convention is CHAPTER#_MOVIE#. As an example, the branch named 02_03 corresponds to the second chapter and the third video in that chapter.
Some branches will have a beginning and an end state. These are marked with the letters b for "beginning" and e for "end". The b branch contains the code as it is at the beginning of the movie. The e branch contains the code as it is at the end of the movie. The main branch holds the final state of the code when in the course.
When switching from one exercise files branch to the next after making changes to the files, you may get a message like this:
error: Your local changes to the following files would be overwritten by checkout: [files]
Please commit your changes or stash them before you switch branches.
Aborting
To resolve this issue:
Add changes to git using this command: git add .
Commit changes using this command: git commit -m "some message"
- To use these exercise files, you must have the following installed:
- All packages will be installed during the course.
- Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree.
- Learning Linux Command Line
- HTML Essential Training
- CSS Fundementals
- JavaScript Essential Training
- Learning Node.JS
jekyll new . --force
gem "minimal-mistakes-jekyll"
gem "jekyll-remote-theme"
group :jekyll_plugins do
gem "jekyll-paginate"
gem "jekyll-sitemap"
gem "jekyll-gist"
gem "jekyll-feed"
gem "jemoji"
gem "jekyll-include-cache"
gem "jekyll-algolia"
end# Build settings
remote_theme: "mmistakes/minimal-mistakes@4.24.0"
plugins:
- jekyll-remote-theme
- jekyll-paginate
- jekyll-sitemap
- jekyll-gist
- jekyll-feed
- jemoji
- jekyll-include-cacheNo notes.
No notes.
Examples of skills you can list:
- Frameworks, libraries, and Programming languages: JavaScript, TypeScript, HTML5, CSS, PHP, etc.
- Technologies: SQL Server, JAMStack, Gatsby, Netlify, GitHub, etc.
- Website builders: WordPress, Wix, Webflow, Jekyll, etc.
- Specialty Skills: Accessibility, Optimization, Dev ops
- Software and tools: Jira, Figma, Sketch, VSCode, GitHub, Terminal
- Communication,
- Mentorship/leadership skills
- Collaboration
- Time Management
- Problem-Solving / Critical Thinking
| Skill | Level |
| ---- | ---- |
| skill | level |technical:
- title: CSS and SCSS
level: Intermediate
- title: HTML5
level: Intermediate
- title: JavaScrpt
level: Advanced
- title: ReactJS
level: Advanced
soft:
- title: Writing
level: Intermediate
- title: Leadership
level: Intermediate<link rel="stylesheet" href="/assets/css/custom.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Rubik:wght@700&family=Waiting+for+the+Sunrise&family=Work+Sans:ital,wght@0,300;0,600;1,300&display=swap"
rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>---
#to make sure Jekyll reads this
---
@import "default";
@import "author";
@import "footer";
@import "grid_layout";
@import "home";
@import "nav";
@import "post";
@import "taxonomy";anime({
targets: [".grid__item", ".list__item"],
scale: [
{ value: 1, duration: 800 },
{ value: 1.1, duration: 200 },
{ value: 1, duration: 800 },
],
easing: "easeInOutSine",
delay: function (el, i, l) {
return i * 200;
},
loop: false,
});No notes.
<ul class="taxonomy__index">
{% assign sorted_tags = site.tags | sort %}
{% for tag in sorted_tags %}
{% assign cat_tags = tag[1] | where: "categories", "article" | sort %}
{% if cat_tags != empty %}
<li>
<a href="#{{ tag[0] | slugify }}">
<strong>{{ tag[0] }}</strong>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% assign entries_layout = page.entries_layout | default: 'grid' %}
{% for tag in sorted_tags %}
{% assign cat_tags = tag[1] | where: "categories", "article" | sort %}
{% if cat_tags != empty %}
<section id="{{ tag[0] | slugify | downcase }}" class="taxonomy__section">
<h2 class="archive__subtitle">{{ tag[0] }}</h2>
<div class="entries-{{ entries_layout }}">
{% for post in tag.last %}
{% include archive-single.html type=entries_layout %}
{% endfor %}
</div>
<a href="#page-title" class="back-to-top">{{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }}
↑</a>
</section>
{% endif %}
{% endfor %}{: .avatar}
# Hi! I'm Leigh Stewardson.
I am a self-taught programmer, instructor, product manager, game developer, painter and writer. Check out some of my favorite articles and projects below or go to [**My Work**](/mywork) or [**My Writing**](/mywriting) to see a categorized list.Leigh Stewardson:
name : "Leigh Stewardson"
bio : "Let's talk about code! Reach out via the links below."
avatar : "https://placehold.co/400"
links:
- label: "Email"
icon: "fas fa-fw fa-envelope-square"
url: "mailto:name@email.com"
- label: "Website"
icon: "fas fa-fw fa-link"
url: "https://www.mywebsite.com"header:
overlay_image: https://images.unsplash.com/photo-1502691876148-a84978e59af8
teaser: https://images.unsplash.com/photo-1502691876148-a84978e59af8
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"Read articles provided
Create repo from zipped project Shuffling_Cards in the zipped_file folder.
Create repo from zipped project Piece_of_Cake in the zipped_file folder.
const express = require('express'); //Import the express dependency
const app = express(); //Instantiate an express app, the main work horse of this server
const port = 3000; //Save the port number where your server will be listening
const path = require('path')
//Idiomatic expression in express to route and respond to a client request
app.use(express.static("public"))
app.get('/', (req, res) => { //get requests to the root ("/") will route here
res.sendFile('index.html', { root: __dirname });
//the .sendFile method needs the absolute path to the file, see: https://expressjs.com/en/4x/api.html#res.sendFile
});
app.listen(port, () => { //server starts listening for any attempts from a client to connect at port: {port}
console.log(`Now listening on port ${port}`);
});Here are a list of projects you might want to consider for your portfolio:
- Getting Started with DevOps
- Become a JavaScript Developer
- Getting Started with Software Testing
- Advance your Node.js Skills
- Become a Full-stack Web Developer
Leigh Lawhon
Front-end Developer
Check out my other courses on LinkedIn Learning.