mkasberg / container-immersion

🐳 Learn Docker by doing it.

Hi, I'm Mike 👋

I work for Strava as a senior software engineer.

Here are some of my most interesting open source projects on GitHub:

• 🛠️ My dotfiles are public and I've put a lot of effort into making them work well for me. Maybe there are some tricks in there that would work well for you too!
• 🪄 jekyll_ai_related_posts is a Jekyll plugin that improves the related_posts feature using AI.
• 🌱 Script Seed is a small project I maintain that provides boilerplate in many different scripting languages.
• 🐳 Container Immersion is a Docker tutorial I maintain.
• I've made minor contributions to some popular open source projects including jekyll/classifier-reborn, jekyll, rails and phpunit.
• 🏗️ I've recently gotten into 3D printing, and I share some of my OpenSCAD creations here on GitHub. Check out my 3D Logo and 3D Photo Frame.

🐦 Find me on Twitter @mike_kasberg.

📝 I write a blog at https://www.mikekasberg.com.

container-immersion's Issues

Responsive Improvements

Would love to help out on this project, few minor improvements I can see for in terms of responsive design.
For example, the 'Fork Me On Github' banner is great, but kinda covers the menu on mobile devices.

Just wondering if you intend this site to be viewable on mobile and tablet devices, and you would like me to help with a few small CSS tweaks in regards to this 😄

Homepage Font size and Footer

Make the font size slightly smaller on the homepage.

Also, position the site footer a little bit better.

Since these are styling changes, modification should be made in assets/css/immersion.scss.

Missing `docker stop` around labs 5 & 6

Let's make the labs explicit about when containers should be stopped and started.

Perhaps more info near the first lab about how to overcome errors for already running containers.

Add a Github Ribbon

Add one of these to the site on github.io: https://github.com/blog/273-github-ribbons

I think this should probably be done with a new _includes file that goes near the top of the body for everything in _layouts.

Update Dependencies

Run bundle update to update our dependencies.

Note that Jekyll will stay at version 3.9 - I don't want to upgrade past 3.9 because I want to continue using the original version of GitHub Pages that supports Jekyll 3.

Style Code Elements Differently

Right now, short code elements are red:

Let's get rid of the red. Make them similar to Github style (seen here) (black text with background-color rgba(27,31,35,0.05)).

The best way to do this is probably to add some CSS for code elements in assets/_sass/_immersion.scss.

While we're at it, use Source Code Pro for the font there instead of whatever the default is now. You can get this font in the sass variable $pre-font.

Create a Favicon for Container Immersion

Create a Favicon for the site.

The favicon should be called favicon.ico and live in the project root. If you're not familiar with favicons, you can read way more than you ever wanted to know about them here: https://github.com/audreyr/favicon-cheat-sheet. I don't care too much about larger icons for mobile - just a 16x16/32x32 favicon.ico would be sufficient for now. But feel free to add additional formats if you want.

I think some kind of whale would be appropriate, but you could get creative if you want. Also, since this will be an image, make sure you don't use anything that would violate someone's copyright. Using something from an existing icon set would be fine as long as it's licensed to be used in open source projects.

Lab 03: Use Container Names

If we use a container name in lab03, we can eliminate the note about the different container ID for the user, making all the commands we run copy/paste-able. This will be a better experience for the learner, and we can still include a note about referring to containers by name or ID.

Improve Look'n'Feel of Previous/Next Lab Links

Improve the look and feel of the previous/next links at the bottom of the labs:

---

---

The links to the previous and next labs should be buttons. We're using Bootstrap (3.3.7), so let's use their buttons in the implementation: https://getbootstrap.com/docs/3.3/css/#buttons

Perhaps add a little margin/padding if necessary to make things look nice, and style the buttons a little to match the theme of the site.

Getting Started
The HTML for all labs is at _layouts/lab.html. The CSS comes from assets/css/immersion.scss.

Add License Info to the Homepage

Container Immersion is licensed under the MIT license. We should mention this on the homepage.

Add text near the bottom of the homepage (below the link to Git Immersion) to say "Container Immersion is free to use and modify under the MIT License". "MIT License" should link to https://github.com/mkasberg/container-immersion/blob/master/LICENSE.

The file you need to edit to do this is _layouts/index.html.

Add Window Header to Terminal Text

Jeykll's Terminals look really cool because they use a CSS ::before to apply a header. Let's do something like that to the terminal style used on Container Immersion. It's OK to more-or-less copy and paste theirs - it's open source, MIT licensed.

Increase TOC font size

The font size in the table of contents appears to small. We should make that a little bigger so it's easier to read. Perhaps also space out the items a little.

The TOC: https://mkasberg.github.io/container-immersion/toc.html

Tips

• Since these are style changes, you should make them in assets/css/immersion.scss.
• You may need to add a class to one of the divs in layouts/toc.html to apply your style specifically to the TOC without modifying other parts of the site.
• Modifying other parts of the site (for example, make text slightly larger everywhere) is also acceptable as long as it looks good.

Contribute to Container Immersion for Hacktoberfest 2017

You can help improve Container Immersion for Hacktoberfest 2017!

Ideas for contributing:

• Minor improvements to existing labs. (Updated commands, additional tips, etc.)
  • Ex. 20baee2
• Create a new lab (HTML page for Docker tutorial).
  • Consider any content that seems missing, but would be useful for beginners and fit at the same relative level of difficulty as the current labs.
• Improve the Look & Feel of the site.
  • Keep it simple & don't take it in a completely new direction.
• Fix minor bugs & typos.

Feel free to comment below if you want additional guidance or suggestions!

Main Page Logo Placement

An image has been uploaded to /assets/img/docker_front_page.png

Attempt to find a place on the index page.

Add a "terminal" CSS Class

Add a "terminal" css class to render fixed-width samples like a terminal.

The terminal style should have a black background with a bright green font.

Apply the terminal class in _labs/*.md where we are simulating a terminal (wrapped with ```). We should be able to do something like this to selectively apply the class: http://digitaldrummerj.me/styling-jekyll-markdown/

If possible, leave the class off items that are not supposed to be a terminal (like HTML samples).