FreeCodeCamp: Walkthroughs & Solutions (31 videos) 💪>7hours of content 🤓
Tags: freecodecamp, codepen, tutorial, frontend
Published: 2020-02-19 07:10:38

It took me a long time but I've personally created my own video-solutions for *freeCodeCamp* and I would like to share it with you. You can also find extra articles with the written solutions.

I hope you like it!

1.How to: Applied Accessibility 
[Video](https://youtu.be/k4Uuu3kURZc) | Duration: 46' | [Article](https://medium.com/@EleftheriaBatsou/freecodecamp-applied-accessibility-ed1f19be23ce)

{% youtube k4Uuu3kURZc %}
   
2.How to: Responsive Web Design Principles
[Video](https://youtu.be/O1ZlmEOL4A8) | Duration: 10' | [Article](https://medium.com/@EleftheriaBatsou/freecodecamp-responsive-web-design-43c968945a4d)

{% youtube O1ZlmEOL4A8 %}

3.How to: Applied Visual Design 
[Video](https://youtu.be/MYkpgOjWEwo) | Duration: 90' |  [Article](https://medium.com/@EleftheriaBatsou/freecodecamp-applied-visual-design-c060ca37272)

{% youtube MYkpgOjWEwo %}

4.How to: Basic CSS 
[Video](https://youtu.be/WBeAuvFI4DA) | Duration: 61' |  [Article] (https://medium.com/@EleftheriaBatsou/freecodecamp-basic-css-8e38eac3170f)

{% youtube WBeAuvFI4DA %}

5.How to: Basic HTML and HTML5 
[Video](https://youtu.be/RykIr0lLJxs) | Duration: 32' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-basic-html-and-html5-a3021515386)

{% youtube RykIr0lLJxs %}

6.D3.JS: Select, selectAll, text and dataset, Part (1/8)
[Video](https://youtu.be/agwX9qYy8Vg) | Duration: 11' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-data-visualization-3d0bccae171f)

{% youtube agwX9qYy8Vg %}

7.D3.JS: Changing style, adding classes, Part (2/8) 
[Video](https://youtu.be/Lm3ll3M5ANo) | Duration: 9' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-data-visualization-3d0bccae171f)

8.D3.JS: Learning about SVG and the rect element, Part (3/8)
[Video](https://youtu.be/cKpXafcv0XU) | Duration: 6' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-data-visualization-3d0bccae171f)

9.D3.JS: Bar chart, dynamic coordinates, height, invert it, Part (4/8)
[Video](https://youtu.be/d3zF-Tzbt4Y) | Duration: 6' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-data-visualization-3d0bccae171f)

10.D3.JS: Labels, hover effect and tooltips, Part (5/8)
[Video](https://youtu.be/mrEJuXHWfNY) | Duration: 6' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-data-visualization-3d0bccae171f)

11.D3.JS: Create and style a Scatterplot, Part (6/8)
[Video](https://youtu.be/gvDPnTCbnl0) | Duration: 7' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-data-visualization-3d0bccae171f)

12.D3.JS: Create and set a Linear Scale, Part (7/8)
[Video](https://youtu.be/fdrZXPbI6Vc) | Duration: 11' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-data-visualization-3d0bccae171f)

13.D3.JS: Create a pre-defined Scale, add axes, Part (8/8)
[Video](https://youtu.be/j_wWXsHVcfA) | Duration: 12' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-data-visualization-3d0bccae171f)

14.Debug: Console.log and typeof, Part (1/3) 
[Video](https://youtu.be/UhdNKrHrk5k) | Duration: 9' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-debugging-8e10a7032d44)

{% youtube UhdNKrHrk5k %}

15.Debug: Misspelling, quotes and parenthesis, Part (2/3)  
[Video](https://youtu.be/9rzFFB1JmZo) | Duration: 6' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-debugging-8e10a7032d44)

16.Debug: Setting arrays and fixing loops, Part (3/3) 
[Video](https://youtu.be/D3wrd9f4kWo) | Duration: 10' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-debugging-8e10a7032d44)

17.Regex: Case sensitive and pattern flags, Part (1/6) 
[Video](https://youtu.be/q8WB4G5Ejvs) | Duration: 10' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-regular-expressions-challenges-df7e98390bfa)

{% youtube q8WB4G5Ejvs %}

18.Regex: Matching letters and numbers, Part (2/6) 
[Video](https://youtu.be/bCdV5L7evlY) | Duration: 12' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-regular-expressions-challenges-df7e98390bfa)

19.Regex: Find characters, match start/end strings, Part (3/6) 
[Video](https://youtu.be/U8LiF1-Tgn0) | Duration: 7' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-regular-expressions-challenges-df7e98390bfa)

20.Regex: Match all letters and every num, Part (4/6)
[Video](https://youtu.be/LAJ0GO_7RTc)  | Duration: 7' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-regular-expressions-challenges-df7e98390bfa)

21.Regex: Whitespace and num of matches, Part (5/6) 
[Video](https://youtu.be/MUEL2tWmGnA) | Duration: 7' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-regular-expressions-challenges-df7e98390bfa)

22.Regex: Lookahead,reuse patterns, capture groups, Part (6/6) 
[Video](https://youtu.be/Pf0g6wnDH-A) | Duration: 17' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-regular-expressions-challenges-df7e98390bfa)

23.CSS Grid: grid template and grid gap, Part (1/5) 
[Video](https://youtu.be/tmG23EwEa7I) | Duration: 8' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-grid-challenges-1908caaa33aa)

{% youtube tmG23EwEa7I %}

24.CSS Grid: grid column/row and aligning items, Part (2/5)
[Video](https://youtu.be/2rVDCyY6bUg) | Duration: 8' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-grid-challenges-1908caaa33aa)

25.CSS Grid: placing items in the grid, Part (3/5)
[Video](https://youtu.be/0p8dT9WsLKI) | Duration: 6' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-grid-challenges-1908caaa33aa)

26.CSS Grid: functions and flexibles layouts, Part (4/5)
[Video](https://youtu.be/S7JJEhOjTzw) | Duration: 10' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-grid-challenges-1908caaa33aa)

27.CSS Grid: media queries, creating grids, Part (5/5)
[Video](https://youtu.be/MFEs-IMXbtQ) | Duration: 4' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-grid-challenges-1908caaa33aa)

28.Flexbox: display, flex-direction, Part (1/4)
[Video](https://youtu.be/TP6_UeiArzw) | Duration: 7' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-flexbox-challenges-71b8b351320e)

{% youtube TP6_UeiArzw %}

29.Flexbox: justify-content and align item, Part (2/4)
[Video](https://youtu.be/iLZlqoxRS-M) | Duration: 7' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-flexbox-challenges-71b8b351320e)

30.Flexbox: flex wrap/shrink/grow/basis, Part (3/4)
[Video](https://youtu.be/dshvD8-PZiw) | Duration: 6' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-flexbox-challenges-71b8b351320e)

31.Flexbox: flex, order, align-self, Part (4/4)
[Video](https://youtu.be/4QLHa3_vZhw) | Duration: 5' | [Article](https://medium.com/@EleftheriaBatsou/free-code-camp-css-flexbox-challenges-71b8b351320e)



I will continue working with FreeCodeCamp! 
Let me know if you need anything extra :)


P.S. I' m Eleftheria, an app developer, master student, content creator, and chocolate lover. 
P.s.2. If you liked it || find it useful, please share it with your friends🤗.



**Thank you for taking the time to read the article and/or watch my videos.**

*Would you like to get me a coffee?!☕️
You can do that here → [paypal.me/eleftheriabatsou](paypal.me/eleftheriabatsou)
But If you can’t, that’s ok too 😍.*

It would be nice to subscribe to my [Youtube](https://www.youtube.com/c/EleftheriaBatsou) channel. It’s free and it helps to create more content.
[Youtube](https://www.youtube.com/c/EleftheriaBatsou) | [Codepen](https://codepen.io/EleftheriaBatsou) | [GitHub](https://github.com/EleftheriaBatsou) | [Twitter](https://twitter.com/BatsouElef) | [Site](http://eleftheriabatsou.com/) | [Instagram](https://www.instagram.com/eleftheriabatsou/)