Published on | Prototyping: From UX to Front End — Medium Eleftheria Batsou

Ideas and inspiration for front-end development projects, UX/UI courses and tutorials.

Today I thought I could share my learning journey from the last 401 days via projects, photos, links and videos, hoping I could inspire you and give you some ideas of the things you can build.

I am going to break this post into two big categories:

Coding projects for the challenge #100DaysOfCode
Coding projects and UX/UI design courses/tutorials for the challenge #301DaysOfCode

After each category, I will have some links with more details, whereas now I am going to give you my best ideas, the projects I liked the most or find more interested.

1. Coding projects for the challenge #100DaysOfCode

Inspired by javascript30, developphp, codepen, medium articles or other tutorials.

Day 2: Drum Kit

<a href="https://medium.com/media/d7354540e9ab62ae675ca9e8dd98d4d9/href">https://medium.com/media/d7354540e9ab62ae675ca9e8dd98d4d9/href</a>

Day 6: Collision Detection Hit Game Enemies

<a href="https://medium.com/media/e8f37bd463359cce8e94e4ac6a5e7f60/href">https://medium.com/media/e8f37bd463359cce8e94e4ac6a5e7f60/href</a>

Day 9: Draw Like Never Before

<a href="https://medium.com/media/b27098ab010fa8bb79341db87e605594/href">https://medium.com/media/b27098ab010fa8bb79341db87e605594/href</a>

Day 16: Secret Password — Key Detection

<a href="https://medium.com/media/a157d2f1f4e919bb31d8f326b5c00905/href">https://medium.com/media/a157d2f1f4e919bb31d8f326b5c00905/href</a>

Day 19: Mouse Move Shadow

<a href="https://medium.com/media/2a1cbc422ef872849bf19cd196b66f10/href">https://medium.com/media/2a1cbc422ef872849bf19cd196b66f10/href</a>

Day 23: Twitter Api

<a href="https://medium.com/media/2eaa2a7367b8da0585ca8ebbd33f6b19/href">https://medium.com/media/2eaa2a7367b8da0585ca8ebbd33f6b19/href</a>

Day 25: Restaurant menu with Local Storage and Event Delegation

<a href="https://medium.com/media/140e094e2863b707f7f99fd583516949/href">https://medium.com/media/140e094e2863b707f7f99fd583516949/href</a>

Day 29: Follow Along Links

<a href="https://medium.com/media/62757f7d14024397aacdcae003206558/href">https://medium.com/media/62757f7d14024397aacdcae003206558/href</a>

Day 30: Speech Synthesis

<a href="https://medium.com/media/991d65239aa19dd3b8ffe2fc0f862a00/href">https://medium.com/media/991d65239aa19dd3b8ffe2fc0f862a00/href</a>

Day 36: Countdown Timer

<a href="https://medium.com/media/391518eec8c726642f5a91c76cf7695c/href">https://medium.com/media/391518eec8c726642f5a91c76cf7695c/href</a>

Day 39: Animated Button Marker System

<a href="https://medium.com/media/391518eec8c726642f5a91c76cf7695c/href">https://medium.com/media/391518eec8c726642f5a91c76cf7695c/href</a>

Day 40: Transform Rotate Image Spin Smooth Animation

<a href="https://medium.com/media/23fcf08b5670ba0e7355e20f12b2e863/href">https://medium.com/media/23fcf08b5670ba0e7355e20f12b2e863/href</a>

Day 42: Material Design Colors

<a href="https://medium.com/media/1987d553eea23aa03dd4a04b0ac8cca7/href">https://medium.com/media/1987d553eea23aa03dd4a04b0ac8cca7/href</a>

Day 47: Monthly Payment Loan Calculator

<a href="https://medium.com/media/3c1a7d066c45d8812f3077cd0c9ec44d/href">https://medium.com/media/3c1a7d066c45d8812f3077cd0c9ec44d/href</a>

Day 48: Tip Calculator Application

<a href="https://medium.com/media/150bd46f532cdc36b3703859bd1ef700/href">https://medium.com/media/150bd46f532cdc36b3703859bd1ef700/href</a>

Day 53: Peekaboo — Scroll Down CSS Transition Animation

<a href="https://medium.com/media/dba5aa44b374299920caebb355010274/href">https://medium.com/media/dba5aa44b374299920caebb355010274/href</a>

Day 56: Smooth Auto Scroll

<a href="https://medium.com/media/a51940d9ed552322a235eebb8dceb2ef/href">https://medium.com/media/a51940d9ed552322a235eebb8dceb2ef/href</a>

Day 57: Typing Text Animation

<a href="https://medium.com/media/d0a2998b6846e37a53e90d25a17d3e54/href">https://medium.com/media/d0a2998b6846e37a53e90d25a17d3e54/href</a>

Day 59: Memory Game — Flipping Cards

<a href="https://medium.com/media/32f80aa63ccca2873f65f2ecdacd829f/href">https://medium.com/media/32f80aa63ccca2873f65f2ecdacd829f/href</a>

Day 60: Exam App — Online Quiz

<a href="https://medium.com/media/785ba722fcdcef4cda106a35bc494d74/href">https://medium.com/media/785ba722fcdcef4cda106a35bc494d74/href</a>

Day 76: Canvas | Detect Mouse Coordinates

<a href="https://medium.com/media/8dd985e8a2396f15c6b335532afbaa43/href">https://medium.com/media/8dd985e8a2396f15c6b335532afbaa43/href</a>

Day 82: Button Sound Effects — Audible Menu Systems

<a href="https://medium.com/media/65b31ea06623a36ba6e03157cff3e384/href">https://medium.com/media/65b31ea06623a36ba6e03157cff3e384/href</a>

Day 84: Audio Seek and Volume Range Slider

<a href="https://medium.com/media/8ddc34bbdec5c2798d8d45c8a18d75d8/href">https://medium.com/media/8ddc34bbdec5c2798d8d45c8a18d75d8/href</a>

Day 88: Play Uninterrupted Background Music On Your Website

<a href="https://medium.com/media/ea76ca6b0e3b70bc6e3e8ed7901c9509/href">https://medium.com/media/ea76ca6b0e3b70bc6e3e8ed7901c9509/href</a>

Day 95: Countdown Timer

<a href="https://medium.com/media/406cb9b626c781f935056322f8eb306e/href">https://medium.com/media/406cb9b626c781f935056322f8eb306e/href</a>

Day 96: Olympic games 2020 | time countdown

<a href="https://medium.com/media/6b9fc9fe0e9ad451d89563020f111a17/href">https://medium.com/media/6b9fc9fe0e9ad451d89563020f111a17/href</a>

Day 100: #100DaysOfCode

<a href="https://medium.com/media/3a0c41073f9ffd6f79f6a50816e72db1/href">https://medium.com/media/3a0c41073f9ffd6f79f6a50816e72db1/href</a>

Links:

My log file for #100DaysOfCode on GitHub and on Codepen.
My story on what I gained after 100 days of coding.

2.Coding projects and UX/UI design courses/tutorials for the challenge #301DaysOfCode

I watched tutorials, I practiced more with front-end technologies like angularjs, I learned about the library d3.js and I started getting more and more interested in UX/UI design and research.

Days 101–104: Tutorial from Udemy → Angular Tutorial For Beginners
Days 105–107: Tutorial from Udemy → Learn AngularJS Step By Step
Days 108–110: Tutorial from Udemy → Learn Basics of AngularJS in 59 minutes by building a Game
Day 111: I coded the Hangman game [take a look on it!]
Days 112–121: Course from Udemy → User Experience (UX): The Ultimate Guide to Usability and UX
Days 122–124: Course from Udemy → Angular 1: From Zero to Hero
Days 125–126: Course from Udemy → Sass Workflow
Days 127–133: Course from edx → MichiganX: UX503x, Principles of Designing for Humans
Days 134–138: Course from edx → MichiganX: UX504x, Evaluating Designs with Users
Days 139–142: Course from edx → MichiganX: UX505x, UX Design: From Concept to Wireframe
Day 143: I did a simple logo with photoshop and I created some variations

Day 144: I did a robot logo with photoshop and I created some variations

Days 145–152: Course from Udacity → Web Accessibility
Days 153–157: Tutorial from Pluralsight → JavaScript Build Automation With Gulp.js
Days 158–162: Tutorial from Coursera → Introduction to User Experience Design
Days 163–175: Course from Udacity → Product Design by Google
Days 176–179: Course from Udacity → UX Design for Mobile Developers by Google
Days 180–185: Course from edx → TsinghuaX: User Experience (UX) Design: Human Factors and Culture in Design
Days 186–187: Book → Getting Started with gulp — Packt
Days 188–192: Youtube → Node JS Tutorial for Beginners — theNetNinja
Days 193–195: Tutorial from Pluralsight → Building Stronger Front-end Practices
Days 196–226: I coded in 30 days 30 simple sites for the challenge #30days30sites.
Days 227–231: Course from edx → MichiganX: UX506x, UX Design: From Wireframe to Prototype
Days 232–233: Learning while playing in cssgridgarden
Day 234: And creating a video with my solutions

<a href="https://medium.com/media/ac7009efad29c298632006d438748865/href">https://medium.com/media/ac7009efad29c298632006d438748865/href</a>

Days 235–236: Learning while playing in flexboxfroggy
Day 237: And again creating a video with my solutions

<a href="https://medium.com/media/949a68507ed9257b6aa6549153d323a6/href">https://medium.com/media/949a68507ed9257b6aa6549153d323a6/href</a>

Days 238–241: Learning D3.js from dashingd3js
Days 242–247: Creating projects in D3.js based on the tutorials and the courses I watched or read

<a href="https://medium.com/media/d90b09ec72561c44dd01acb2a471a4d5/href">https://medium.com/media/d90b09ec72561c44dd01acb2a471a4d5/href</a>

Here is the collection my D3.js projects on codepen

Days 248–255: Continue learning D3.js from the youtube channel d3Vienno
Days 256–264: Course from edx → MichiganX: UX502x, Understanding User Needs
Days 265–272: Reading about angjular.js from airpair and trying to implement my new-knowledge about angular.js in combination with d3.js
Days 273–285: Reading a book about the history of art from E.H.Gombrich called “The Story Of Art”
Days 286–291: Reading a book about visual arts from R. Arnheim called “Art and Visual Perception”
Days 292–299: Reading a book about creating art from N. Goodman called “Ways of Worldmaking”
Days 300–311: Course from FutureLearn → Agile and Design Thinking
Days 312–320: Course from edx → MichiganX: UX507x, UX Research Surveys
Day 321: Changing codepen’s profile design

<a href="https://medium.com/media/4e408f68ad248e854cb8bc234547bc90/href">https://medium.com/media/4e408f68ad248e854cb8bc234547bc90/href</a>

Day 322: Creating a video about changing codepen’s profile design

<a href="https://medium.com/media/41a50c01f3d12149764fcd291da7463e/href">https://medium.com/media/41a50c01f3d12149764fcd291da7463e/href</a>

Day 323: Creating a video about: “8 tools for typography in the web”

<a href="https://medium.com/media/13877d192ddcb6e7c4430e03f32181a4/href">https://medium.com/media/13877d192ddcb6e7c4430e03f32181a4/href</a>

Day 324: Creating a video about: “6 websites for color-combination in web design/development”

<a href="https://medium.com/media/5f423df1ea8297ea577e779e855b2bb8/href">https://medium.com/media/5f423df1ea8297ea577e779e855b2bb8/href</a>

Day 325: Creating a video about: “7 sites with free icons to use in your website”

<a href="https://medium.com/media/521f7dbd47e6919f61284e1e9072e30d/href">https://medium.com/media/521f7dbd47e6919f61284e1e9072e30d/href</a>

Day 326: Creating a video about: “8 free, high-resolution stock images sites”

<a href="https://medium.com/media/0363dcbfed5171f736a69e2c46293f1b/href">https://medium.com/media/0363dcbfed5171f736a69e2c46293f1b/href</a>

Day 327: Creating a video about: “5 Free, offline text editors | Win, Mac, Linux”

<a href="https://medium.com/media/424600d25048e686fb888dd33282ebc3/href">https://medium.com/media/424600d25048e686fb888dd33282ebc3/href</a>

Day 328: Writing an article about “Tools to use in your next UI, UX job”

Tools to use in your next UI, UX job

Day 329: Writing an article about “Free offline text editors for web development on Win, Mac and Linux”

Free offline text editors for web development on Win, Mac and Linux

Days 330–335: Redisigning my personal portfolio website
Day 336: Creating a video about: “How I concluded to my portfolio”

<a href="https://medium.com/media/690f7569c95c019aefb3dcfedc5b4f24/href">https://medium.com/media/690f7569c95c019aefb3dcfedc5b4f24/href</a>

Day 337: Writing an article about “How I concluded to my portfolio”

How I concluded to my portfolio website

Days 338–341: Course from Udacity → Product Design
Days 342–348: Course from Watch and Code→ Practical JavaScript
Day 349: I created a Cristmas pen

<a href="https://medium.com/media/7f863ddd92d0fe4f8ba30ad879cdaa4d/href">https://medium.com/media/7f863ddd92d0fe4f8ba30ad879cdaa4d/href</a>

Days 350–359: Course from edx → MichiganX: UX508x, UX Research at Scale: Analytics and Online Experiments
Days 360–367: Course from edx → MichiganX: UX509x, UX Capstone
Day 368: Creating a video about: “6 websites with free HD videos”

<a href="https://medium.com/media/8ee79e8075c589e5762dc061bbcf252d/href">https://medium.com/media/8ee79e8075c589e5762dc061bbcf252d/href</a>

Day 369: Creating a video about: “4 free sites to get some Color inspiration based on Images”

<a href="https://medium.com/media/d2bbcb4646b2785bc3252ac000f8724a/href">https://medium.com/media/d2bbcb4646b2785bc3252ac000f8724a/href</a>

Day 370: Creating a video about: “5 free sites to create your own color schemes”

<a href="https://medium.com/media/7ba3b6b9cba3b1ae0185382b041abb14/href">https://medium.com/media/7ba3b6b9cba3b1ae0185382b041abb14/href</a>

Day 371: Creating a video about: “5 Free Online images and graphics editing tools”

<a href="https://medium.com/media/dfe64102aed6af1a92226c65be5445c4/href">https://medium.com/media/dfe64102aed6af1a92226c65be5445c4/href</a>

Day 372: Creating a video about: “5 Blogs you should read (for developers & designers)”

<a href="https://medium.com/media/0c9ced86c4c230f7637b6ced1dc8f5e7/href">https://medium.com/media/0c9ced86c4c230f7637b6ced1dc8f5e7/href</a>

Day 373: Writing an article about “Tools to use in your next UI, UX job — Part 2”

Tools to use in your next UI, UX job — part 2

Days 374–379: Reading about “Simiotics in Video Game”
Days 380–383: Reading about “Color Theory”
Day 384: Writing an article about “Color psychology in web design”

Color psychology in web design

Days 385–387: Working on FreeCodeCamp → Markdown Previewer with AngularJs

<a href="https://medium.com/media/063efe6dd463a5535c9f612aee0d6f3f/href">https://medium.com/media/063efe6dd463a5535c9f612aee0d6f3f/href</a>

Day 388: Creating a video about: “Markdown Previewer with AngularJs”

<a href="https://medium.com/media/86a3b7dd2972dcfdd2a06e9e22b2e8f0/href">https://medium.com/media/86a3b7dd2972dcfdd2a06e9e22b2e8f0/href</a>

Days 389–391: Working on FreeCodeCamp → Leaderboard with AngularJs

<a href="https://medium.com/media/15d4ec6847aa8012da9d311b5bc0f5bb/href">https://medium.com/media/15d4ec6847aa8012da9d311b5bc0f5bb/href</a>

Day 392: Creating a video about: “Leaderboard with AngularJs”

<a href="https://medium.com/media/ea6efc3533748fd0fbe44b7ec290c6e2/href">https://medium.com/media/ea6efc3533748fd0fbe44b7ec290c6e2/href</a>

Days 393–395: Working on FreeCodeCamp → Recipe Box with AngularJs

<a href="https://medium.com/media/fe50f8d0f6a7dcd892a161777578fec9/href">https://medium.com/media/fe50f8d0f6a7dcd892a161777578fec9/href</a>

Day 396: Creating a video about: “Recipe Box with AngularJs”

<a href="https://medium.com/media/d313a1fe150b317ecf087914e16a1d0c/href">https://medium.com/media/d313a1fe150b317ecf087914e16a1d0c/href</a>

Days 397–399: Working on FreeCodeCamp → Game Of Life with AngularJs

<a href="https://medium.com/media/aea7e179f1875681284f653a22dd69d8/href">https://medium.com/media/aea7e179f1875681284f653a22dd69d8/href</a>

Day 400: Creating a video about: “Game Of Life with AngularJs”

<a href="https://medium.com/media/5c4628dbafecc2d2d46f98b04814ea54/href">https://medium.com/media/5c4628dbafecc2d2d46f98b04814ea54/href</a>

Day 401: Creating my own course in SkillShare about: “Introduction to UX”

watch it here

Links:

My log file for #30Days30Sites on GitHub and the collection of sites on Codepen.
Short article about how I changed codepen’s profile, read it on Codepen or Medium.

Somewhere in between #100DaysOfCode and #301DaysOfCode I also finished the challenge #DailyCssImages.

My log file for #DailyCssImages on GitHub, the collection of images on Codepen and the video tutorials on my youtube channel.
Here is a detailed article of my pure css images journey.

Wow, If you reached the end you are a hero, congratulations 😅 I hope you got some ideas about the things you can build as a front end developer or UX/UI designer.

If you have any recommendation about projects or tutorials leave a comment and I ‘ll check it out. I am always searching for new ideas.

Would you like to get me a coffee, please?!☕️

You can do that here → paypal.me/eleftheriabatsou

But If you can’t, that’s ok too 😍.

It would be nice to subscribe to my youtube channel. It helps creating more content [and you know… it’s free].

Thanks for reading, have an awesome day!

Youtube | Codepen | GitHub | Twitter | Site

What I coded and studied the last 401 days was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

What I coded and studied the last 401 days

Top Stories