
## Hello, World!

17th of December 2020 is a very important date for me. That day I officially froze my existing creative projects, in which I have been involved for years, and started learning programming.

It was a hard decision, because it was not easy to give up on projects I was developing and putting a lot of effort for years (blog, social media accounts, workshops & next ebook) in favor of a new, vast, completely unknown field in which I did not know if I could manage at all…

But I was extremely determined and I knew that if I want to master, I need to focus on programming learning only. No side projects, no distractions. So what caused my determination you may ask? Oh, there were a lot of very different reasons and that is what this article is about, so keep reading!

## Influence of the Walter Isaacson’s Book “The Innovators”

I just love Isaacson’s books. I read his Steve Jobs & Leonardo da Vinci biographies (these two individuals inspire me a lot), so I was sure, that “The Innovators” will be great. But I didn’t expect, that the book will change my life, give me and make me addicted to a new hobby.

Honestly, I thought that programming is boring and there is no place for creativity. I’ve never been so wrong in my life… This book and stories about all of those creative individuals mentioned by Isaacson opened my eyes. I felt immediately, that I want and need to be one of those people, to belong to software & web developers community.

## Creative Process Management Reasearch

Even though I had not been interested in programming, digital technologies or… transistors before I started reading “The Innovators”, I wanted to know, how engineers and programmers created their inventions in terms of creative process management, which was my actual interest and hobby at the time (and still is).

I was expecting, that my theory of Creative Process Management (published in my ebook and on my blog) will apply also in web development, but I couldn’t imagine, how it is similar to rules I was using in my other creative activities.

I’ve understood, that there is no difference between painting, composing music, writing a book and programming in terms of Creative Process Management rules. In addition, I realized that by knowing how to program, I would be able to create applications that will help creators (including myself) to organize their creative process & notes!

## Curiosity

I like intellectual challenges, so one of the reasons I’ve decided to test myself in programming learning were questions, I was curious to answer:

- Is programming really boring? (No!)
- Is there a place for creativity? (Oh, yes!)
- Are my intellectual abilities sufficient to master it? (Yes ;-)
- Can I manage this without previous programming experience? (With no doubt)
- Would my previous creative experience be useful? (A lot!)
- How far can I dive into it and how long it would take? (See my portfolio ;-)

## A Few Apps Ideas

I wanted to learn programming to develop a few apps I had in mind before I wrote my first “Hello, World”:
- mind mapping app with the possibility to put keywords in any place on the canvas (done!)
- tagged notes app to organize and easy filter my notes (done!)
- my own blogging platform (done!)
… and many other ideas – some of them are in progress, some of them are done.

Also I wanted to create my own personal web site from scratch with blogging features and a possibility to publish and run my apps. I had a website that was created by my friend Piotr, about whom I’ll talk more below, but… I wanted to run my apps on it and there were no possibilities to do that & I also wanted to be independent.

I’ve created a lot of things, music, articles, mind maps, sketchnotes, content and even wrote 2 ebooks, but… this time I wanted to create something that others could interact with, something that is usefull & available globally. That was a new stage of my creative self-development.

### I Could Count on the Help & Guidance of a Friend

I have a friend, Piotr Wnuczek, and he is a programmer & web developer. He built a website for me, when I decided to run a blog in 2018, and without his help I couldn’t reach so many people with my articles.

So when I was thinking about the possibility of learning web development & programming, I had a living example that it is possible, because I was a witness of Piotr’s programming development and successes. So I considered, that if he could, I also can try.

Besides I knew, that there is a person, who can guide me and give me a hand if I need to. And I was right! We often see each other and every time I’m visiting him, he gives me precious advises.

### Summary

Now you know almost everything about my reasons to freeze my previous long-term projects to make a space for undistracted programming learning. I'd never decide to dive into programming world, if there was only one of mentioned reasons - it all worked together. And I'm happy - that was a best decision in my life.

## Happy coding!


In this article I want to explain, why I made (such a hard in my case) decision and dived into completely unknown area and put this on top of all of my previous long-term projects and creative activities. This post is one of the ways to celebrate my 1-year anniversary of learning programming. Also I hope, that my reasons to start learning web development may inspire you to follow my example ;-)

5 Reasons Why I Started Learning Programming


## My very first mistake and failure at the beginning. Do not choose a programming language, choose a path!

I started learning programming one year ago (you can read about my motivation and reasons to start learning in [previous article](/5-reasons-why-i-started-learning-programming)). But, actually, I made one extra try earlier, 1,5 year ago, when I spent few weeks trying to learn Python. Why did I choose Python? Because I read that it's a best programming language and especially the best for newbies...

And maybe that is the true, but I was bored building small console apps... It means that the result of the app ran was some text or calculations printed in console - no visual elements, no interface. Now I know, that you can do all of these things with Python, but not at the beginner level.

So I gave up with Python and console apps and went back to my other creative activities (blog, social media accounts, music composing). After a few months I tried to figure out, how to plan my programming development and how to choose a langauge.

Then I read, that I need to choose a path, not a language. A programming language is only a tool. So among the available paths I chose a front-end development, because it allows you to create simple web pages and user interfaces practically immediately after learning a few things!

Besides I understood, that I want to create web pages and web applications, so this path was the best option to manage this goal. So then, when I knew exactly what I want to do and achieve, I could find out, what languages and technologies I need to master.

## HTML & CSS

All front-end developers start from HTML & CSS. These markup languages are the foundation, the sceleton and skin of web pages. HTML & CSS are not stricly speaking programming languages, so it's a nice thing to start coding in them. No variables, no functions, no loops.

After a few hours of learning you can create simple web page in your browser which contains headers, lists, sections with content, images etc. thank to HTML tags. You would be able to add background & font colors, different fonts, text and items allign, text decoration etc. with a few CSS lines.

Sounds great!

Personally, I did these first steps with Khan Academy free online course [Intro to HTML/CSS: Making webpages](https://www.khanacademy.org/computing/computer-programming/html-css). In addition, I did also [this free polish online course](http://how2html.pl/).

I'm very grateful to Khan Academy for my programming initiation. I finished all their [computer programming courses](https://www.khanacademy.org/computing/computer-programming) and I'm sure that I wouldn't be in the place I am now without them. 

## Javascript (ES5 + processing.js)

JavaScript is a main programming langauge of the web. JS brings interactivity to web pages and applications and plays a role of "muscles" and "brain" in the web page/ app body. Thanks to that you can render different views, collect data from the user, allow him to push buttons, work with database or browser's local storage, run logic & algorithms and do a lot of magical things, like animations, games etc.

I learned basics of JS along with another Khan Academy course - [Intro to JS: Drawing & Animation with processing.js](https://www.khanacademy.org/computing/computer-programming/programming) & more advanced & complex topics with [Advanced JS: Games & Visualizations with processing.js](https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations).

That was really fun, because in mentioned courses I learned JavaScript by drawing different things with the code and help of processing.js library. It was very visual, so I loved it (I am a big fan of visula notes and mind maps)! After compliting those courses I built a few simple games (like [Old School 2D Racing Game](https://vadimgierko.github.io/old-school-2d-racing-game/)) & animations (like [Let It Snow](https://vadimgierko.github.io/let-it-snow/)).

## HTML + CSS + JS (+ jQuery)

Finally, when I knew basics of these languages, I could combine them & started creating web pages and simple web applications along these courses:
- [HTML/JS: Making webpages interactive](https://www.khanacademy.org/computing/computer-programming/html-css-js)
- [HTML/JS: Making webpages interactive with jQuery](https://www.khanacademy.org/computing/computer-programming/html-js-jquery)

Apps were ugly, but... worked!

## Upgrading from JavaScript ES5 to ES6 & from processing.js to p5.js

When I completed all of Khan Academy courses, I found out, that JavaScript (ES5) version they were using is outdated... so I switched to ES6 standard with [The Modern JavaScript Tutorial](https://javascript.info/).

The same thing happend with processing.js library, because I found out, that this library will not be updating, so I needed to switch to it's modern version - p5.js with help of [official p5.js references](https://p5js.org/reference/):

*p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners. Using the metaphor of a sketch, p5.js has a full set of drawing functionality.*

*However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound.*

Then I started using [p5 online code editor](https://editor.p5js.org/) and it would be impossible without knowledge of modern JS standard (ES6) & p5.js library. i made a lot creative projects and apps in that editor with p5.js: racing game, quiz app, falling snow animation, snake game, simulation of my office's queuing system, math app for children and more.

## React

When I felt comfortable in working with Web Holy Trynity (HTML, CSS, JS) and my applications started become more and more complex, I learned the JavaScript framework (library stricly speaking) React.js.

I felt in love in its possibilities. It wasn't easy at the beginning to figure it out and I had a few tries, but I've managed basics of React along these courses:

- [React Official Tutorial](https://reactjs.org/tutorial/tutorial.html)
- [React Official Tutorial 2 - step by step guide](https://reactjs.org/docs/hello-world.html)
- [React Type of Web Tutorial](https://typeofweb.com/kurs/react-js/)
- [Getting started with React](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
- [Learning React. Modern Patterns for Developing React Apps (Eve Porcello & Alex Banks book)](https://www.oreilly.com/library/view/learning-react-2nd/9781492051718/)

When I switched to React instead of developing in pure JavaScript/ HTML/ CSS, my apps became larger, more complex, better structured and shiped faster. Now I'm developing my apps thanks to create-react-app in React, so that's how I became a React Developer.

## Bootstrap

I became familiar with [Bootstrap](https://getbootstrap.com/docs/5.0/getting-started/introduction/), the world’s most popular framework for building responsive, mobile-first sites, to speed up and simplify my apps styling and responsive web design.

With Bootstrap my pages and apps became standardized, beautiful and looked really fine both on computers and smartphones. I had no need to play or struggle with CSS anymore (of course I used CSS, but rather inline in my components JSX).

When I got Bootstrap 4.6 version, I needed to switch to the newest upcoming version - 5.0...

## React Router

I needed a routing for my apps and web pages, but if you are working with front-end and have no back-end background, you need to figure out it somehow. And the tool I needed was React Router!

You can find all necessary information about it here:
[React Training / React Router](https://reactrouter.com/web/guides/quick-start)

From that moment my apps had dynamically generated links and it was not only convenient (and a standard) for users, but also routes helped me to better organize my apps, its rendering & passing data between components.

## Firebase

My apps were really complex at the moment, but I was struggling because of lack of database, so potential users of my apps (including me) could put their data (text content, images etc.) only to browser's local storage.

Thanks to this my previous blog application allowed user to create a new article, save it and it was visible only in that particular users browser. It was nice for excercise purpose, but it wasn't enough for real-world apllications.

So, finally, after experimenting with local storage and fetching I was prepared for real database experience! And Firebase was the savior. I learned how to work with Firebase from [official Firebase docs](https://firebase.google.com/docs/reference/js).

And of course, when I figure out, how Firebase 8 works and felt comfortable with that edition, Firebase 9 came out...

## Continuous learning

This is common thing in programming world, especially in web development. You need to be prepeared and aware of that new frameworks, updates or new languages can show up any day. It means, that you need to upgrade your apps and your skills constantly or you'll be outdated very soon.

## Summary - What You Can Achieve In A Year Thanks To Dedication to the One Thing Only

This year of total dedication to the one thing - learning programming - has resulted in the fact that:
- starting from a total scratch a year ago, I am able to create and publish full-stack responsive interactive web application or web page with users authentication and database integration & done a lot of open source projects, such as among others:
   - [Blogging Platform App](https://vadimgierko.github.io/blogging-platform), where you can run your blog/s for free & edit articles with Markdown Editor,
   - [Linky Notes](https://vadimgierko.github.io/linky-notes/), the app that allows you to create tagged notes & easilly filter them by tags,
   - [Mind Maps App](https://vadimgierko.github.io/MIND-MAP-APP/), the app that allows you to create mind maps online,
- I proved myself intellectually, creatively and managed to implement myself in a completely new field through self-learning along available free online sources,
- I gained an additional profession - JavaScript / React developer -  and broadened my horizons tremendously,
- I am proud of myself and the man that I have became during this year.

I hope that my story will inspire you and encourage you to start learn programming or... start learning anything else this year. Now you can see, how much can be done and learned in one year if you are devoted to the one thing / topic only, especially if it's a wide complex field.

I were coding at least for 1000 hours during this year in my speare time after a day full-time job and that was a key:
- focus on the one thing - learning & apply new knowledge to your projects step by step (in my case)
- reject all unnecessary unsustainable things and activities, such as:
   - pointless surfing on the Internet or social media,
   - watching news, movies or series,
   - hanging out with people with whom there is nothing to talk about,
   - but also engaging in projects that do not get anywhere or do not produce the results we expect...

If you'll decide to dive into web development in 2022, you can follow my roadmap!

*Happy Coding* (or whatever else you will be doing) in 2022!


Read this article, if you plan to become a front-end web developer in 2022. You can use my advice based on 1-year of non-commercial experience and follow my roadmap, which contains links to free sources.

Summary of my first year of learning web development. Roadmap, projects and tips for newbies


Jestem web developerem z ponad 2,5-letnim doświadczeniem programistycznym, który potrafi stworzyć **statyczne (SSG) i dynamiczne (SSR) strony internetowe**, **aplikacje webowe** typu SPA i PWA oraz **podstawowe sklepy internetowe** za pomocą takich technologii, jak: *React, React Router, Next.js, Svelte & SvelteKit, JavaScript, TypeScript, Bootstrap, Firebase i Stripe*.

**Jestem otwarty na oferty pracy na stanowiska Junior Front-end/ React/ JavaScript/ TypeScript/ Next.js/ Svelte Developer stacjonarnie w Lublinie lub zdalnie w Polsce**.
    

Programowanie stron i aplikacji internetowych | Portfolio

Vadim Gierko | Web Developer

My personal static website designed & developed by myself from scratch using React, Next.js, React-Bootstrap, Bootstrap & Markdown.

vadimgierko.com


This is a fullstack hybrid (SSG + Client-side data fetching) e-commerce website for local shop producing handcrafted ceramic products.

- written from scratch with Next.js/ React (the website is almost fully static (SSG), except products available amount, which is Client-side data fetching to get the most current data),
- integrated with headless CMS/ database (Sanity)
	- where the owner/editor can store & edit products & website content,
	- where products are reserved during checkout & unreserved after checkout cancel or session expiration
- integrated with Stripe payments
	- built-in Stripe checkout,
	- blik, przelewy24 & card payments available,
	- integrated with Stripe webhook to notify if checkout session is expired & trigger unreserving products in database (Sanity)
- Bootswatch theme "lux" used
- deployed on Vercel (the website is serverless, so no need to have hosting set up & it's free)

## Notable Features

- blik, przelewy24 & card payments available
- custom inventory management with products reservation & dealing with abandoned carts
- CMS (separate app) for the owner/editor to edit page info & manage products data

## Tech Stack

- Next.js 13
- React 18
- Stripe 11
- Sanity
- React Bootstrap 2.6
- React Icons
- Bootstrap 5.2
- Bootswatch 5.2

## WARNING

The **e-commerce website is currently in test mode**, what means, that it's fully functional
(there are real products, you can add them to the cart & even order them),
but you can order products only in test mode:

- [here is an information, how to make a test payment using **card**](https://stripe.com/docs/testing#testing-interactively)
- [here is an information, how to make a test payment using **przelewy24**](https://stripe.com/docs/payments/p24/accept-a-payment?platform=web&ui=checkout#test-integration)
- [here is an information, how to make a test payment using **blik**](https://stripe.com/docs/payments/blik/accept-a-payment?platform=web&ui=checkout#test-integration)
		

Fullstack hybrid (SSG + Client-side data fetching) e-commerce website for local shop producing handcrafted ceramic products with Stripe payments & Sanity headless CMS integrated.

Sklep Ceramika MAKI

Organize & filter your notes with one or more tags, format your notes using Markdown syntax & create your own unstructured knowledge base!

Linky Notes

Run your blog for free & edit your articles via Markdown Text Editor!

Blogging Platform with Markdown Text Editor

Manage your tasks & todo lists using this Installable Todo App built with React, Redux, React Router, MUI, Firebase & deployed with GitHub Pages.

Programowanie stron i aplikacji internetowych

Umiejętności

Projekty

Artykuły