freeCodeCamp - Markdown Previewer solution

This is a solution to the Markdown Previewer challenge on freeCodeCamp.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Author

Overview

The challenge

Users should be able to:

This project is part of the freeCodeCamp Front End Development Libraries certification. It involves building a Markdown previewer using HTML, CSS, Sass, JavaScript, React, Redux Toolkit, and Bootstrap. The application consists of an Editor where you can write Markdown code and a Previewer that displays a live preview of the rendered Markdown. This functionality is achieved using the marked library. To enhance the styling, Bootstrap icons are incorporated. The app includes a button to toggle between dark and light mode, as well as another button to switch between various fonts. The states of these functionalities are managed using Redux Toolkit. Additionally, there are buttons to expand the Editor and the Previewer to full screen, and a button to download the content of the Editor as a Markdown file (.md).

Screenshot

Links

• Solution URL: GitHub
• Live Site URL: MarkDown Previewer

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• JavaScript
• Bootstrap
• Sass
• React - JS library
• Redux

Author

• Website - Fernando Carrasco Portfolio