Discover the Power of Alpine JS | Build the @freeCodeCamp Markdown Previewer

Published: 08 December 2021
on channel: The Code Creative

1,860

Let’s build a Markdown Previewer with Alpine JS, a lightweight but powerful JavaScript framework. In this Alpine.js tutorial, we build a markdown previewer inspired by the “Build a Markdown Previewer” challenge in freeCodeCamp’s “Front End Development Libraries Projects” section. Created by Gregg Fine.

#javascript #alpinejs #freecodecamp

Download my FREE "Google Search Secrets for Developers" Cheat Sheet:
https://store.thecodecreative.com/goo...

Join The Code Creative Community on Facebook:
  / thecodecreative

🔴Subscribe for more free Code Creative videos: :    / @thecodecreative

🌐 The Code Creative Official Website
https://www.thecodecreative.com/

🎓 The Code Creative Courses
https://www.thecodecreative.com/courses

🎨The CSS used in this video:
.title {
text-align: center;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.box{
flex-basis: 45%;
.preview {
border: 1px solid black;
}
textarea{
width: 100%;
min-height: 90vh;
}
}

blockquote{
background: #eee;
border-left: 10px solid #ccc;
padding: 10px;
}

code {
background: #888;
color: white;
padding: 3px;
}

img{
width: 50%;
}

@media screen and (min-width: 900px){
.container{
flex-direction: row;
}
}

▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬

0:00 Introduction
0:49 Project Overview
2:27 Setting up Codepen
4:18 Creating HTML Elements
6:09 Adding state with Alpine.js
7:58 Displaying text with x-text
8:40 Displaying HTML with x-html
10:21 Using x-model
12:24 The CSS

▬ The Markdown Previewer Project on Free Code Camp ▬▬▬▬▬▬▬▬▬▬
https://www.freecodecamp.org/learn/fr...

▬About The Code Creative ▬▬▬▬▬▬▬▬▬▬▬▬

The Code Creative helps web developers learn the fundamentals of programming, algorithms, as well as the latest frameworks and libraries. You can expect web development content that is fun, clear and concise, and keeps you engaged with visuals and a touch of humor.

▬Social Media ▬▬▬▬▬▬▬▬▬▬

▸ Twitter - @GreggFine
▸ Instagram - /greggfinedev
▸ Facebook -   / thecodecreative

✅ Recommended related videos:

Debouncing Explained
   • Debouncing Explained | JavaScript

Memoization Explained
   • JavaScript Memoization Made Simple!

Sorting in JavaScript Explained
   • JavaScript Comparator Function | Sort...

✅ For business inquiries contact me at [email protected]

Watch video Discover the Power of Alpine JS | Build the @freeCodeCamp Markdown Previewer online without registration, duration hours minute second in high quality. This video was added by user The Code Creative 08 December 2021, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,860 once and liked it 57 people.

7,349

184