What Makes Simple Dev Different

What is Simple Dev?

Simple Dev is a searchable tutorial site featuring short, easy-to-read articles on the fundamental skills needed in front-end web development.

All of our tutorials are in the form of written articles. We have articles on languages such as HTML, CSS, and JavaScript, frameworks like Bootstrap, and tools like the terminal, Git, and npm. As stated in our description above, each article is designed to be short and easy-to-read, so that beginners and intermediate developers can understand the concepts being taught.

We have a unique approach to writing tutorials at Simple Dev that is different than a lot of the content that’s already online. In this post, I want to talk more about the article format used on Simple Dev and how we organize our articles into Topic pages.

Article Sections

Most of the articles on our site follow the same format, but there is some variation depending on the Topic (HTML, CSS, Git, etc.) or concept being taught. If you’d like to see some examples of our article format, check out the articles on our HTML Topic page.

Summary

Most articles start with a Summary section at the top. The Summary highlights the main code snippet or terminal command for that article. This section is aimed at experienced developers who only need a reminder about the concept, but it can also be helpful for beginners who can see the core concept upfront. If the subject is more conceptual, it might just feature a written summary of the subject.

Details

Next, most articles have a Details section. The Details section will explain what was in the Summary section in greater detail. It might provide more examples, or go over potential problems you might run into while coding.

Demo

Our HTML and CSS articles feature a Demo section after the Details section. The Demo section will either be a link to a web page hosted on GitHub Pages or CodePen embedded directly into the article. It usually shows the code snippet in the Summary section alongside the actual output. Readers can click on the Edit On CodePen button to open the demo in a new tab and experiment with the code.

References

Lastly, most articles have a References section with at least one link to an official source. For Topics like HTML and CSS, this means linking to a page from MDN. For Topics like Bootstrap or Git, it means linking to the official documentation. Having a reference link lets readers know that the information in our articles is valid. It also allows them to dive deeper and read more about a topic.

Topics

Currently, our articles are grouped into pages called Topics, such as HTML, CSS, Terminal, Git, and more. The articles are organized inside each Topic page from basic to advanced topics, so a beginner can start from the first article in the Topic and read through until the last article in the Topic to get a thorough understanding of the concepts.

More experienced developers can skip around to the articles they need and don’t necessarily need to start from the first article. We also have a powerful search feature they can use to search for the exact article they’re looking for. With our search feature, you can see results as you’re typing. Since our articles are fairly modular (meaning they’re generally focused on one particular concept at a time), you can likely find a single article that matches up with your search query.

Conclusion

Thanks for reading this post. Again, if you’d like to see some examples of our article format, check out the articles on our HTML Topic page. You can also sign up for a free account to gain access to some of our other sections.

Although the general article format is finalized, we might add more sections in the near future. Leave a comment below if you have any questions or suggestions!