<p>Hopefully the content of this article can be an inspiration for beginner visual designers. </p>
<h2 id="star-wars-imperial-armys-product-slider-by-javascriptjunkiehttpscodepeniojavascriptjunkie">Star Wars Imperial Army's Product Slider! by <a target="_blank" href="https://codepen.io/JavaScriptJunkie">JavaScriptJunkie</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/JavaScriptJunkie/pen/vzWPbV">https://codepen.io/JavaScriptJunkie/pen/vzWPbV</a></div>
<hr />
<h2 id="movie-card-by-drehimselfhttpscodepeniodrehimself">Movie Card by <a target="_blank" href="https://codepen.io/drehimself">drehimself</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/drehimself/pen/azBmdK">https://codepen.io/drehimself/pen/azBmdK</a></div>
<hr />
<h2 id="mini-music-player-vuejs-by-javascriptjunkiehttpscodepeniojavascriptjunkie">Mini Music Player - VueJS by <a target="_blank" href="https://codepen.io/JavaScriptJunkie">JavaScriptJunkie</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/JavaScriptJunkie/pen/qBWrRyg">https://codepen.io/JavaScriptJunkie/pen/qBWrRyg</a></div>
<hr />
<h2 id="mcu-timeline-carousel-by-hexagoncirclehttpscodepeniohexagoncircle">MCU Timeline Carousel by <a target="_blank" href="https://codepen.io/hexagoncircle">hexagoncircle</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/hexagoncircle/pen/JjYLLNR">https://codepen.io/hexagoncircle/pen/JjYLLNR</a></div>
<hr />
<h2 id="nike-shoe-widget-by-drehimselfhttpscodepeniodrehimself">Nike Shoe Widget by <a target="_blank" href="https://codepen.io/drehimself">drehimself</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/drehimself/pen/WwZrPR">https://codepen.io/drehimself/pen/WwZrPR</a></div>
<hr />
<h2 id="credit-card-form-vuejs-by-javascriptjunkiehttpscodepeniojavascriptjunkie">Credit Card Form - VueJs by <a target="_blank" href="https://codepen.io/JavaScriptJunkie">JavaScriptJunkie</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/JavaScriptJunkie/pen/YzzNGeR">https://codepen.io/JavaScriptJunkie/pen/YzzNGeR</a></div>
<hr />
<h2 id="chat-widget-by-drehimselfhttpscodepeniodrehimself">Chat Widget by <a target="_blank" href="https://codepen.io/drehimself">drehimself</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/drehimself/pen/KdXwxR">https://codepen.io/drehimself/pen/KdXwxR</a></div>
<hr />
<h2 id="profile-card-by-javascriptjunkiehttpscodepeniojavascriptjunkie">Profile Card by <a target="_blank" href="https://codepen.io/JavaScriptJunkie">JavaScriptJunkie</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/JavaScriptJunkie/pen/jvRGZy">https://codepen.io/JavaScriptJunkie/pen/jvRGZy</a></div>
<hr />
<h2 id="clash-of-clans-cards-by-drehimselfhttpscodepeniodrehimself">Clash of Clans Cards by <a target="_blank" href="https://codepen.io/drehimself">drehimself</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/drehimself/pen/QNXpyp">https://codepen.io/drehimself/pen/QNXpyp</a></div>
<hr />
<h2 id="responsive-news-card-slider-by-javascriptjunkiehttpscodepeniojavascriptjunkie">Responsive News Card Slider by <a target="_blank" href="https://codepen.io/JavaScriptJunkie">JavaScriptJunkie</a></h2>
<div class="embed-wrapper"><div class="embed-loading"><div class="loadingRow"></div><div class="loadingRow"></div></div><a class="embed-card" href="https://codepen.io/JavaScriptJunkie/pen/ZMMRRQ">https://codepen.io/JavaScriptJunkie/pen/ZMMRRQ</a></div>
<hr />
<p>Which one do you like the most? </p>


Hopefully the content of this article can be an inspiration for beginner visual designers. 

## Star Wars Imperial Army's Product Slider! by [JavaScriptJunkie](https://codepen.io/JavaScriptJunkie)

%[https://codepen.io/JavaScriptJunkie/pen/vzWPbV]

---

## Movie Card by [drehimself](https://codepen.io/drehimself)

%[https://codepen.io/drehimself/pen/azBmdK]

---

## Mini Music Player - VueJS by [JavaScriptJunkie](https://codepen.io/JavaScriptJunkie)

%[https://codepen.io/JavaScriptJunkie/pen/qBWrRyg]

---

## MCU Timeline Carousel by [hexagoncircle](https://codepen.io/hexagoncircle)

%[https://codepen.io/hexagoncircle/pen/JjYLLNR]

---

## Nike Shoe Widget by [drehimself](https://codepen.io/drehimself)

%[https://codepen.io/drehimself/pen/WwZrPR]

---

## Credit Card Form - VueJs by [JavaScriptJunkie](https://codepen.io/JavaScriptJunkie)

%[https://codepen.io/JavaScriptJunkie/pen/YzzNGeR]

---

## Chat Widget by [drehimself](https://codepen.io/drehimself)

%[https://codepen.io/drehimself/pen/KdXwxR]

---

## Profile Card by [JavaScriptJunkie](https://codepen.io/JavaScriptJunkie)

%[https://codepen.io/JavaScriptJunkie/pen/jvRGZy]

---

## Clash of Clans Cards by [drehimself](https://codepen.io/drehimself)

%[https://codepen.io/drehimself/pen/QNXpyp]

---

## Responsive News Card Slider by [JavaScriptJunkie](https://codepen.io/JavaScriptJunkie)

%[https://codepen.io/JavaScriptJunkie/pen/ZMMRRQ]

---

Which one do you like the most? 

Yet Another Cool UI Design List (#1)

A graphic designer turned web developer with experience in both Visual Design and DevOps skills living in Indonesia.

{Erol Blog}

{Erol Blog}

Yet Another Cool UI Design List (#1)

Star Wars Imperial Army's Product Slider! by JavaScriptJunkie

Movie Card by drehimself

Mini Music Player - VueJS by JavaScriptJunkie

MCU Timeline Carousel by hexagoncircle

Nike Shoe Widget by drehimself

Credit Card Form - VueJs by JavaScriptJunkie

Chat Widget by drehimself

Profile Card by JavaScriptJunkie

Clash of Clans Cards by drehimself

Responsive News Card Slider by JavaScriptJunkie