Show HN: Pyflo – a free, interactive guide to learning Python(pyflo.net)
pyflo.net
Show HN: Pyflo – a free, interactive guide to learning Python
https://pyflo.net
35 comments
Some initial impressions:
- I really like the flowchart arrangement. Great idea for a top-level organization scheme! I like the way things branch out but then come back together for regularly spaced "Check points".
- Everything seems to work really well on mobile. Nice!
- There doesn't seem to be a general way to progress on to the next lesson at the bottom of each topic page. Am I missing something? Or is it your intention to have students return to the flowchart between every lesson? If so, it would be nice to have a button that just goes there (and, I would imagine, scrolls down the flowchart page to their last accessed lesson). "Back" does go to the Flow page IF that's where you immediately navigated from, but in the first two pages you actually progress on to the next lesson by clicking a link—so "Back" goes back to that page, not up to the flowchart page.
- I'm not sure about the UI/UX decision of your "Incomplete"/"Complete" indicator at the bottom of each lesson. It's odd to have a greyed out button that says "Incomplete" that changes to filled in and the word "Complete" when clicked/tapped. Also, the "Back" button looks exactly the same, but is a navigation button, not an updating status indicator. So there's some conflation of different functions with the same form there—could be confusing. The "Bookmark" button is fairly clear, but the word "Incomplete" all by itself with no other explanations does not convey very clearly to me that I'm supposed to click on it in order to mark the lesson complete (I figured that out by trial and error). Maybe try "Complete" and "Completed" to match your "Bookmark" and "Bookmarked" in the other button?
- I really like the flowchart arrangement. Great idea for a top-level organization scheme! I like the way things branch out but then come back together for regularly spaced "Check points".
- Everything seems to work really well on mobile. Nice!
- There doesn't seem to be a general way to progress on to the next lesson at the bottom of each topic page. Am I missing something? Or is it your intention to have students return to the flowchart between every lesson? If so, it would be nice to have a button that just goes there (and, I would imagine, scrolls down the flowchart page to their last accessed lesson). "Back" does go to the Flow page IF that's where you immediately navigated from, but in the first two pages you actually progress on to the next lesson by clicking a link—so "Back" goes back to that page, not up to the flowchart page.
- I'm not sure about the UI/UX decision of your "Incomplete"/"Complete" indicator at the bottom of each lesson. It's odd to have a greyed out button that says "Incomplete" that changes to filled in and the word "Complete" when clicked/tapped. Also, the "Back" button looks exactly the same, but is a navigation button, not an updating status indicator. So there's some conflation of different functions with the same form there—could be confusing. The "Bookmark" button is fairly clear, but the word "Incomplete" all by itself with no other explanations does not convey very clearly to me that I'm supposed to click on it in order to mark the lesson complete (I figured that out by trial and error). Maybe try "Complete" and "Completed" to match your "Bookmark" and "Bookmarked" in the other button?
> There doesn't seem to be a general way to progress on to the next lesson at the bottom of each topic page. Am I missing something?
The idea is that there isn't always just one "next" option, thus the idea would be to go back to the flowchatt to choose your next lesson. However, there's probably many (like you!) who just want to be taken to the next lesson and not hassle with the navigation - great input.
> I'm not sure about the UI/UX decision of your "Incomplete"/"Complete" indicator at the bottom of each lesson.
Thank you! I'm sure this is something that could be improved.
The idea is that there isn't always just one "next" option, thus the idea would be to go back to the flowchatt to choose your next lesson. However, there's probably many (like you!) who just want to be taken to the next lesson and not hassle with the navigation - great input.
> I'm not sure about the UI/UX decision of your "Incomplete"/"Complete" indicator at the bottom of each lesson.
Thank you! I'm sure this is something that could be improved.
I made an edit or two to my original comment, so just to make sure you see it:
Your "Bookmark" button conveys very clearly what it is for and what it will do when I click on it. "Bookmark" is a verb and "Bookmarked" is a status.
So what about "Complete" for the greyed-out label and "Completed" for the green state? That would similarly make the deactivated button show an "Action" word—the exact action that will happen when I click it—and the activated state a "Status" word (that I can intuitively return to its original status by clicking again).
Your "Bookmark" button conveys very clearly what it is for and what it will do when I click on it. "Bookmark" is a verb and "Bookmarked" is a status.
So what about "Complete" for the greyed-out label and "Completed" for the green state? That would similarly make the deactivated button show an "Action" word—the exact action that will happen when I click it—and the activated state a "Status" word (that I can intuitively return to its original status by clicking again).
Great idea. Perhaps even "Mark Complete" would be even more clear than just "Complete" (as technically, that could be either a verb or a state).
> The idea is that there isn't always just one "next" option, thus the idea would be to go back to the flowchatt to choose your next lesson.
I thought the whole point of the flowchart was to have a clear progression:
- If there is only one next lesson show it.
- If there's more than one choice for the next lesson show both.
- If the end of a branch is reached, show the other next lesson(s) at the last branch minus the current branch.
I thought the whole point of the flowchart was to have a clear progression:
- If there is only one next lesson show it.
- If there's more than one choice for the next lesson show both.
- If the end of a branch is reached, show the other next lesson(s) at the last branch minus the current branch.
Spent the last week looking at Python resources for my high school ‘Introduction to Programming’ class. Ordered Python Crash Course last night. Then I wake up this morning to see this – excellent work (and timing).
Initial feedback: The writing, formatting, and overall presentation are very clear and the mini-quizzes are great for checking understanding.
I second the suggestions on the 'complete' button text. Also agree with cfiggers in that I was initially confused when I got to the end of an early lesson and then couldn't figure out how to go to the 'next lesson.' The 'back' button going back to the flowchart is what I wanted, but the combination of the color and text made it feel like that was the wrong direction.
Overall, this looks a lot like something I've been looking for, thanks!
Initial feedback: The writing, formatting, and overall presentation are very clear and the mini-quizzes are great for checking understanding.
I second the suggestions on the 'complete' button text. Also agree with cfiggers in that I was initially confused when I got to the end of an early lesson and then couldn't figure out how to go to the 'next lesson.' The 'back' button going back to the flowchart is what I wanted, but the combination of the color and text made it feel like that was the wrong direction.
Overall, this looks a lot like something I've been looking for, thanks!
Thank you! If this ends up being used as a resource for any of your courses, please let me know how it ends up working out.
Sounds like improving the "completion" feature and a "next" button need to be addressed soon. That will be taken care of this week.
Sounds like improving the "completion" feature and a "next" button need to be addressed soon. That will be taken care of this week.
Love the flow chart concept. I think you should skip the waffly intro though. I cannot imagine a target audience that a) wants to learn Python, and b) wants to read a long introduction including the origin of the word "program", the definition of a computer, some history of Alan Turing, etc.
IMO you should start with a very simple piece of Python code that does something actually useful. That's instant motivation.
It also gives you a concrete example to explain things with. It's 10x easier to understand things with concrete examples.
IMO you should start with a very simple piece of Python code that does something actually useful. That's instant motivation.
It also gives you a concrete example to explain things with. It's 10x easier to understand things with concrete examples.
Super incredible content. Personally I believe your outline is the most valuable part of the website .
I have ADD and have a hard time looking at large blocks of text unless I have something on the line. But the content is super solid.
I have ADD and have a hard time looking at large blocks of text unless I have something on the line. But the content is super solid.
Thanks. Yeah, I really likes the flowchart idea, but it isn't commonly used for something like this. Maybe that's a sigh that it's not the optimal organization, or perhaps the uniqueness will be a draw for some users.
This is awesome. I've been considering learning Python (mostly used Ruby and JS), I'll think I'll go for it.
I found a typo, should be 'than' rather than 'that' (maybe a link to a GitHub repo would make fixing such things easier).
In the section titled: What is Programming.
> However if we were to attempt to communicate to a computer how to make one, we would have to be much more specific that we were to Ryan.
Second sentence after the second list.
I found a typo, should be 'than' rather than 'that' (maybe a link to a GitHub repo would make fixing such things easier).
In the section titled: What is Programming.
> However if we were to attempt to communicate to a computer how to make one, we would have to be much more specific that we were to Ryan.
Second sentence after the second list.
I'll admit I may have missed it in my quick scroll through, but I don't see iterators (as a concept) or generators anywhere. I guess you could argue the latter are too advanced, but I'd argue both are central to proper python.
Edit: clearly I'm illiterate, a closer inspection shows iteration brought up several times.
Edit: clearly I'm illiterate, a closer inspection shows iteration brought up several times.
You're right in that I don't go into any depth on what an Iterable class is, but iteration (while, for) are definitely addressed throughout. In the intro class I teach, we don't do classes, and thus, don't delve too much into what an Iterator class is, so it's not included here.
Makes perfect sense! And yes, I edited my original comment because I skimmed far too quickly.
Typo: On https://pyflo.net/args-params-return/ the text under "Revisiting Golf, again" ends in the middle of a sentence.
Awesome design!! Regarding content, I feel it is a bit discrete. Great as a starting point, but won't solve everything if u are just starting.
Maybe add links to recommended reads?
Thank you for the flowchart. It's super intuitive. I have the Automate the Boring Stuff with Python gathering dust for a while, might start referring to that as well.
A great resource, thank you for the effort you've put into it.
It's already really good but you're getting some great feedback below too.
It's already really good but you're getting some great feedback below too.
graphics.py isn't part of my python install, and seems to be tough to get? https://stackoverflow.com/questions/36849473/cannot-import-g...
It's a custom wrapper for tkinter made specifically for the lesson. There's a download link in the "basic shapes" chapter.
This could definitely be improved by:
* explaining what is in graphics.py, and that it builds on the standard library
* moving the download link in the introduction chapter for graphics
* having a license
This could definitely be improved by:
* explaining what is in graphics.py, and that it builds on the standard library
* moving the download link in the introduction chapter for graphics
* having a license
All good points. Perhaps a passing reference with a link back to the intro chapter (or wherever it's covered) in the chapters where it's used, since it's easier to dip into one of the later graphics chapters without having seen the intro.
Yeah, graphics.py refers to my custom TKinter wrapper, which I would have my students use for a few of the course projects. I can improve things so that it is easier to find from lessons other than basic shapes.
Minor nitpick: the difference between blue and purple is hard to see for us colour-challenged peeps.
Thanks for the input. I'd imagine there are lots of sites and apps out there that have such an issue. In what ways to modern apps / sites typically address this? Are there browser extensions that help with this? Do some websites have a special mode to assist?
hello!! i sent an email to [email protected] but if there's a better address to reach you, i'd love to get in touch for gratitude and feedback :)
You can find my email via the "Contact the Author" button at the bottom of the home page.
Hello! I'd love to share this with people without English knowledge. Is it open source? I'd like to collaborate with a translation. Thanks!
This is incredible!
Great job mate.
This is a text tutorial...like a million others out there. There's nothing interactive about it.
Many of the lessons include questions to check the learners understanding. Just a few examples:
* "Binary Numbers" include a matching drag-and-drop question: pyflo.net/binary-numbers/ * List Indexing and iteration contains multiple choice questions, and a parsons-problem at the end: pyflo.net/list-index-iteration/
There are also several guided projects, which included embedded code editors powered by Pyodide (https://pyodide.org/). By the way, if there are any Pyodide devs lurking here, thank you!
* "Binary Numbers" include a matching drag-and-drop question: pyflo.net/binary-numbers/ * List Indexing and iteration contains multiple choice questions, and a parsons-problem at the end: pyflo.net/list-index-iteration/
There are also several guided projects, which included embedded code editors powered by Pyodide (https://pyodide.org/). By the way, if there are any Pyodide devs lurking here, thank you!
Hi Everyone, I am a CS educator who has taught a variety of university courses, including many on introductory Python programming. Over the past few years, I've written down a number of Python programming lessons and has culminated into Pyflo.net. This tool is a completely free, introductory guide to learning Python. It is more-or-less an intro programming textbook, but with a few twists, including:
* It is totally free. You don't even have to give me your email to use it
* The lessons are short and modularized
* It's interactive, containing embedded questions that provide instant feedback throughout.
My hope is that this can be a useful resource for those looking to learn Python. Feel free to use yourself, or share with those you think would be interested.
Feedback is very much welcome and appreciated.