DEV Community: Simple Dev

All Simple Dev tutorials are now FREE!

Javier Alvarado — Wed, 17 Aug 2022 19:04:15 +0000

All Simple Dev tutorials are now free! We recently decided to make all of our tutorials publicly available. Previously, only the HTML course was free, and a few other courses could be unlocked with a free membership. A paid membership was required for full access.

Memberships

Now you can read any tutorial on the site for free. You can still sign up for a paid membership, which allows you to track your progress and mark tutorials complete. This is a great option if you'd like to support the site on a monthly basis. We hope to add more features to the paid membership in the future. Also, if you sign up for a paid membership, the Donate button in the corner and the Donation/Member banner at the top of each tutorial is hidden.

Donations

Speaking of donations, you can now donate to Simple Dev using the Donate button in the corner! The Donate button is powered by Ko-fi, which is a service that allows websites and creators to accept donations without taking a fee. You can also donate directly on our Ko-fi page. This is a great option if you'd like to make a one-time donation to support the site.

Conclusion

If you're new to Simple Dev, it's a website designed to teach coding through short, easy-to-read, and up-to-date tutorials. There are over 300 tutorials on the site, covering HTML, CSS, JavaScript, VS Code, and more, and now you can read them all for free. Visit Simple Dev today to get started.

Simple Dev Improvements

Javier Alvarado — Wed, 30 Jun 2021 22:02:59 +0000

We've been making several changes to Simple Dev recently. Our overarching goal with these changes is to make the site better for beginners (although intermediate developers may still benefit from these changes as well).

All of these changes are still ongoing, so you can expect to see more in the future. Read on to learn more.

Downloadable exercises

The biggest change is that we've created downloadable exercises to go with our tutorials. This will make it easier to practice your coding skills with our tutorials. We've created exercises for most sections so far and will finish creating exercises for the other sections soon.

More Pens

We've added Pens from CodePen to tutorials that were missing them before, including our JavaScript and Markdown tutorials.

More screenshots

We've added more screenshots to different tutorials on the site. We especially focused on adding relevant screenshots to our VS Code tutorials.

More info

We've been adding more info to our tutorials to make them more beginner-friendly, especially our JavaScript tutorials. Now you can learn how to write the code and have a better understanding of what it means.

VS Code Tips

We've started including VS Code Tips directly inside our HTML, CSS, and other tutorials where possible. This makes it easier to learn how to quickly generate tags, properties, values and more and become a more productive developer. (We still have a separate VS Code Tips section as well for tutorials on productivity and customization.)

Minor changes

Rearranged Path

The Path has been rearranged. We've divided the first set of tutorials into Text Editors 1, Web 1, Text Editors 2, and Web 2. Since we're focused on teaching VS Code now, the Atom sections have been moved to the bottom as bonus sections. Bootstrap also comes before JavaScript now.

Projects

We created some simple projects to cap off our HTML, CSS, and Bootstrap sections. We hope to add more projects in the future.

Feedback

We hope you enjoy these changes we've made to Simple Dev, especially those of you just starting out on your coding journey. If you have any feedback, leave a comment below!

New: Exercises on Simple Dev!

Javier Alvarado — Tue, 22 Jun 2021 22:24:40 +0000

We recently created downloadable exercises to go along with the tutorials on Simple Dev. We created exercises for the HTML, Markdown, CSS, Bootstrap 4, and JavaScript sections. The goal here is to let users practice coding skills inside their text editor.

You can find the exercises by visiting the Topic pages above. You can find a link to download the exercises in the Summary section.

The exercises are hosted on GitHub. You can download them by clicking the green Code button and selecting Download ZIP. You can then extract the files into a new folder and then open that folder in your favorite text editor.

Each tutorial has its own exercise folder, and the exercise folders are grouped into sections. Each exercise folder has its own README file that contains the instructions for what to do.

This is still a new feature on Simple Dev, so we'd appreciate any feedback you have. You can fill out our feedback form if you have comments, questions, or suggestions on this feature.

New: VS Code and Atom sections!

Javier Alvarado — Tue, 02 Mar 2021 20:57:27 +0000

Recently we added 4 new sections to Simple Dev: VS Code Basics, VS Code Tips, Atom Basics, and Atom Tips.

Technically speaking, these are not brand new sections. Previously, we had 2 sections that already covered VS Code and Atom: Text Editor Basics and Text Editor Tips. Each tutorial in those sections covered how to perform a certain action in both VS Code and Atom. However, we felt that now was a good time to split those tutorials up so that VS Code users could focus on their content and Atom users could focus on their own content.

The hope is that now we can add more tutorials on VS Code with this new structure. Acccording to the Stack Overflow 2019 Developer Survey, VS Code is the most popular developer tool, and it's much more popular than Atom. Because of those facts, we feel that we should focus more on VS Code for now (although we may add some new Atom tutorials here and there).

One of our goals with Simple Dev is to teach developers how to code locally on their own devices, so these are very important sections to us. Not every course spends time explaining how to use a text editor. We pride ourselves in teaching coders how to code from the very beginning, starting with how to use a text editor.

If you have any questions or suggestions, leave a comment below!

New: Improved site navigation

Javier Alvarado — Mon, 16 Nov 2020 19:08:22 +0000

We recently added a new navigation feature to Simple Dev called module navigation. With our new module navigation, links to related tutorials will appear on the right side of the tutorial you're currently viewing (or on the bottom if you're viewing the site on a smartphone).

For example, if you're currently looking at a tutorial on a CSS selector, you will see all of the other tutorials on CSS selectors on the side of the screen, like in the picture below:

This makes it easier to jump around related tutorials.

What's a module?

Currently, we group related tutorials into what we call Topic pages. We have Topic pages for HTML, CSS, Git, and many other topics. The modules for the topic are the subsections listed on the Topic page. For example, the CSS Topic page has the following modules: Introduction, Syntax, Values, Properties, and Selectors, as well as a few others.

Some modules only contain one tutorial at the moment, but most contain several tutorials.

Moving between modules

If you want to move between different modules, you have a couple of options. The easiest thing to do is to click on the Topic link that is listed on the top of each tutorial to go back to the main Topic page. There you can see all of the modules and all of the tutorials in that topic.

Alternatively, if you're at the first or last tutorial in a module, you can use the Next and Previous navigation links at the bottom of the tutorial to get to the next or previous module (if there is one).

Conclusion

As always, if you want to find information even faster, you can always use our powerful search feature to instantly find any tutorial on the site.

Let us know what you think of this new feature in the comments below!

New: Jekyll tutorials!

Javier Alvarado — Fri, 13 Nov 2020 23:33:27 +0000

We recently released the first batch of our Jekyll tutorials! You can see them on our Jekyll Basics topic page.

What is Jekyll?

Jekyll is a static site generator, which means it's a tool that makes it easier to build static sites. When building a multi-page static site using just HTML, you end up with a lot of code you have to repeat on each page (if each page is using the same general layout). Jekyll, on the other hand, lets you reuse code by creating common layouts and template parts that can be used with each page, without having to copy and paste large chunks of code.

Before You Start

To get the most out of these tutorials, you should be familiar with HTML, CSS, Sass, and the terminal (though you don't have to be an expert at all of them). Luckily for you, we have tutorials for all of these topics! Check out our home page for links to all of our tutorials.

Conclusion

Let us know what you think of these tutorials in the comments below! We'll be adding more Jekyll tutorials soon.

New: "Cheat sheet" view for Topic pages

Javier Alvarado — Fri, 02 Oct 2020 00:23:32 +0000

We recently added code snippets directly to some of our Topic pages. Now users can easily skim through them to find what they're looking for.

The new Topic pages look like this:

We're calling this new layout the "cheat sheet" view because it allows you to get information at a glance.

For comparison, our old Topic pages consisted of lists of links, like this:

They were functional, but hard to skim through, especially on the pages with a lot of tutorials. To be clear, some of the Topic pages are still keeping the old format for now (like the Text Editor Basics page in the example above), but that may change in the future.

You can check out our list of Topic pages on the Simple Dev home page. Try viewing the HTML, CSS, Git, and npm pages to see examples of the new layout.

If you want to find information even faster, don't forget that you can always use our powerful search feature to instantly find any tutorial on the site.

Have fun coding!