All Posts

My Journey to Become a Front End Web Developer

📅 July 5th, 2019

⏱️ 21 min read

Updated: June 17th, 2020

Laptop, smartphone and notebook

This article has been mentioned in a Udacity Front-End web developer Nanodegree review by onlinecourseing.

Feel free to skip to the section where I share the best resources and tools you will need through your journey The Shortest Path.

Intro

First, let me introduce myself. I'm Ahmed Mokhtar, a self-taught front end web developer. This is my first blog post and I hope it won't be the last. I would like to share with you my learning experience with all the struggles and the stumbling blocks I faced during this journey so that anyone else who would take the same path may find it inspirational and may benefit from the resources I will share.

I graduated with a BA in petroleum geology from the faculty of science. As a graduate and after finishing my military service, it was time to find a real job and start my career. This was when I realized that the labor market was and is still saturated and that all of my colleagues and friends started working in other unrelated fields. I didn't see myself doing the same jobs like my friends for the rest of my life, they weren't just for me so I started searching for something new to learn, something I like, something at which I can excel, something with a brighter future. After a lot of researching i found out that programming is a promising field and that front end web development specifically is a bit easier to begin with as it has a great amount of free online resources, a lot of available jobs with a good average salary and many of them didn't need the candidate to have a computer science degree just like me.

What I should learn

After deciding that I wanted to become a front-end web developer, the first question that came to my mind was "what should I learn ?". After doing some research, I came up with the following learning path:

  • HTML5 & CSS3
  • Responsive Design
  • JavaScript (ES5, ES6)
  • Developer tools
  • Automation
  • Git & Github
  • Front End JavaScript library (React.js)
  • CSS Preprocessor (Sass)
  • Progressive Web Apps (PWA)
  • NodeJS basics (Express.js)
  • Mobile development (React Native)

It was the middle of July 2017 when I started this learning path and here is how it went.

The basics

I Began the journey learning the basics of HTML5, CSS3, and JavaScript using Codeacademy which is a website that allows you to learn about coding by coding in the browser. After getting the very basics I realized that I needed a better resource and on Aug 15, 2017, I found Udacity. I immediately fell in love and I was totally hooked to the platform. Udacity is an online learning platform that has programs called Nanodegrees which are full courses made by experts for different fields and they allow you to create real-world projects while having mentors and code reviewers for your projects. They had a front end and a full stack web developer Nanodegree and fortunately, many of the lessons included in those nanodegree were available for free as standalone courses which I started taking one by one.

Google Developer Challenge Scholarship

Google developer challenge scholarship badge On Sep 5, 2017, I received an email from Udacity that through their partnership with Google, they are offering 60000 new Challenge Scholarships to students across Europe, and in Russia, Egypt, Israel and Turkey and 6,000 of the top performers will subsequently be awarded full Nanodegree program scholarships. The scholarship had many tracks including front end web developer, mobile web specialist, and android development. I was so excited and I applied for the Challenge Scholarship. On Mon, Oct 30, 2017, I received an email that I was accepted to the Google Developer Challenge Scholarship to the Front-End Web Developer track and that the class would begin on November 6, 2017 I was so excited and so thirsty for knowledge that I sent an email to Udacity support asking if I can take both Front End Web developer track and the Mobile Web Specialist track but of course they couldn't allow that. The material of the challenge was about the basics of HTML, CSS, JavaScript, jQuery, The DOM, Dom manipulation and event listeners with JavaScript and jQuery with many projects to make sure the student understands the course content. If you think while reading oh this is a perfect story and nothing went wrong, actually it was not all roses. I was broke and I needed any source of money while continuing my learning journey so I started searching for a job and I found a job in a Chinese international company called CDI which is a subsidiary company of Sinoma. CDI has a lot of projects taking place in Egypt one of them was A Cement plant that consists of 2 lines each with the capacity of 5775 t/d (clinker) as a part of the Egyptian Arish Cement Company and they needed a coordinator with good English and a scientific background I was interviewed and I was accepted and I had a good salary in the Egyptian standard. This is when things began to be a little difficult and I had to stop my learning for a month as I needed to adapt to my new job, know my responsibilities and duties and learn at least the minimum about the cement industry and as the plant was in the middle of Sinai desert, there was almost no internet connection that opening a single website needed a miracle and sometimes no mobile signal at all. After that month I continued with the challenge. When I was on vacation I had to download all course videos and open all necessary chrome tabs I would need and copy any text I would need to their separate files so that I could study in my free time at work when there is no or bad internet connection. Luckily most of the course content was familiar to me as I had studied it before so I could finish the course much before the deadline and began to contribute more to the challenge community and forums by answering other students' questions and write some useful posts. On Thu, Dec 21, 2017, I received an email that raises the spirit from Udacity. It had statistics about my 2017 year with Udacity and I was one of the top 10% of Udacity students. My 2017 Udacity statistics On Tue, Feb 6, 2018, the Challenge was over and it was a great experience that I learned a lot from. On Wed, Feb 14, 2018, I received the happy news that I was selected to receive a full 6-month Google Developer Nanodegree Scholarship.

Google Developer Nanodegree Scholarship

The scholarship for Front-End Web Developer Nanodegree program started on Thu, Feb 15, 2018, and would last for 6 months, until August 15, 2018. The Nanodegree was just perfect. Udacity instructors were just great and they are a great part of why I love Udacity. The community was great as well you could ask any question on forums, share useful topics or share your progress. The Nanodegree allowed me to create many real-world projects regarding all aspects of front end web development while having code reviewers who would review your project and give you comments about the good and bad parts in your code and check if your project meets the specification. I also had a mentor which I could ask him any question at any time. Here is the core curriculum. Udacity Front End Web Developer Nanodegree core curriculum There was also extra curricular which was as useful as the core curriculum. Udacity Front End Web Developer Nanodegree Extra Curricular Before and during the challenge and the Nanodegree I took many other courses, read lots of articles and read parts of many books like:

I finished my last Nanodegree project on Sun, Jun 24, 2018, and it was reviewed and it met specifications.

On Aug 1, 2018, I graduated and took my certificate which was a great milestone for me and it gave me a lot of joy and confidence that I'm on the right path. Udacity Front End Web Developer Nanodegree Certificate

What is next

After finishing the Nanodegree I was thinking if this was enough and I should begin to search for a job or I need to improve my skills more and create larger projects to showcase my skills. I decided that those projects were not enough and that I need to create larger projects from scratch.

As I decided, I created 3 projects. The last of them is my portfolio. Each project was unique as I used different technologies in each project you can check them here:

Stumbling blocks

Through my learning journey I have been through many difficulties which I could overcome like:

  • The financial need. I overcame this when I had a job that gave me financial stability and enough free time to study what I like.
  • Available time. Time was one of the problems I faced because of my work, other life responsibilities and of course sometimes wasting time doing useless things as we all do but I overcame this by specifying my priorities and studying web development was on top of it so I ignored things that I would normally do like video gaming or hanging out to do what really matters. That doesn't mean you should never have fun or take care of yourself and keep coding 24/7 Actually i noticed that my productivity decreases when I try to code the whole day and increases when I code less on separate times through the day so I try to divide my day between coding, work or family when I'm back home and do some sports mostly football(soccer), workout or sometimes ping pong.
  • Bad or no internet connection at my work location. I overcame this by preparing myself and my laptop on my vacation to work offline when I go back to work where I would spend most of the month (average of 20 days every month). I would download courses, videos, articles, books, npm packages using yarn which has great caching so I could download them again if I need using the --offline flag and setup everything to work on my local machine like when I used Redis in a project so I setup it locally and put the data I need on it with no expiry and I usually opened all chrome tabs I would need like my Udacity's classroom, technologies official documentation, useful articles and web apps I may need.
  • Doubting my ability. Sometimes when I couldn't understand things quickly I felt like this is not for me I'm not good enough. Don't do this, you will never understand everything immediately, this is a normal part of the learning process and what is hard for you now will be second nature for you later. Your mind just needs time to change its way of thinking and to absorb new information. When I look back and realize that I didn't even know what HTML is and I look at myself now I just feel proud and excited so I advise you to exclude these negative thoughts and to believe in yourself and your capability.
  • The fear of failure. Some people would make you doubt yourself by criticizing what you are doing and sometimes you do that to yourself. Just don't fear the failure and bear in mind that your hard work will pay off. Success needs hard work, dedication, patience, and strong will.

Precious advice

These are some advice that I think will benefit anyone while learning web development:

  • Mastering the basics. Make sure you master the basics of HTML, CSS, and JavaScript and that you could apply them before using any frameworks or libraries because they are all built using those basics.
  • Make a plan and stick to it. Do not get distracted by the number of things you can learn out there because the Javascript world is just moving so fast and if you try to learn everything out there you will end up having what is called JavaScript Fatigue and you will probably stop learning anything.
  • Write clean code. It's not just useful for others who would read your code but also for the future you. Try to give variables meaningful expressive names. Understandable code is better than an elegant code. Comments will help anyone who reads your code to understand what's going on and will make cooperation much easier.
  • Ask questions only when you can't find the answer yourself. Asking others to explain concepts or problems you don't understand is a must but don't do it until you have tried your best to understand or to solve the problem on your own and this will give you an in-depth understanding of it and will improve your ability to solve problems and your logical thinking.

The shortest path

As I promised, I will share with you the plan I think IMOH you should follow if you will start learning Front-End Web Development in the second half of 2019. Most of the resources are free, I hope you will find it helpful!.

For a perfect path, after you learn the basics of HTML5, CSS3, and JavaScript, you can take Udacity Front-End Web Developer Nanodegree which is perfect IMOH and then start learning a front end Js library like React or Vue.

I took or used all the courses and resources mentioned here unless I mention otherwise.

HTML5 & CSS3

Responsive design

JavaScript (ES5, ES6)

Developer tools

Automation

Git & Github

Front End JavaScript library (React.js)

I should mention that Vue.js is a good rival to React and it's gaining a lot of popularity recently. It has some advantages over React but it's not enough to remove React from the scene as React did to AngularJs before.

CSS Preprocessor (Sass)

Progressive Web Apps

NodeJS basics (Express.js)

Mobile development (React Native)

At this point, you will be able to understand the basics of any technology by reading its official documentation and you can check a tutorial or course for the more advanced concepts.

Contributing to Open Source

It is beneficial to contribute to open source projects. You can read this two-part article about why and how to get started Get Started with Open Source Projects. As for me I have very few contributions and not all of them were successful:

  • My first real contribution was on react-google-maps package which I was using in my last project in Udacity front end web developer nanodegree Map App. There was an edge case if I reloaded the app while offline and google maps API is not available in the browser cache for any reason, the app would totally crash so I made a Pull Request to fix it but I didn't have much luck because the package was not being maintained anymore.
  • While working on lolbaron.com I was adding offline support and I used next-offline package and I noticed that the service worker is being registered again for every route so I opened an Issue about it and then I fix it by this Pull Request which was accepted and merged very quickly by the maintainer.
  • I started using this package next-ga but I noticed it's very minimal and that I could add too much functionality to it. It Uses [react-ga package] under the hood which works with Universal Analytics which uses gtag.js library for websites. As I needed to add more features to the package I started digging in react-ga docs and gtag.js docs and then I added some features in this Pull Request and fixed the Readme on this Pull Request and again both the pull requests were not accepted I guess the maintainer just wanted to keep it as minimal as possible. I stopped using the library and instead I used Google Tag Manager.
  • I wanted to support offline google analytics as well and I workbox-google-analytics package for that but I noticed it didn't work properly with gtm.js as it didn't support runtime caching for it. I opened an Issue about it then I made this Pull Request to support that feature and even added unit tests for it which was then Cherry-picked and merged into this Commit.

Books

Starting to learn a new language like JavaScript using books is not a great idea, at least it wasn't for me because I was new to programming and practical visual courses like courses from Udacity was much easier for me to follow at the beginning. After a while, I could understand the books better and I usually used them as references to check a certain subject I was curious about or needed to understand in depth. Here are some books I used:

Bonus

In this section, I will share some optional tools and resources I found through my learning journey that made my life easier. Here they are:

  • Visual Studio Code. My text editor of choice (Free open source).
  • Emmet abbreviations cheat sheet: Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow. Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimized for web-developers whose workflow depends on HTML/XML and CSS but can be used with programming languages too. BTW Emmet support is built right into VS Code.
  • Gravit Designer. Gravit Designer is a full-featured free vector design app rivaling adobe illustrator and it's FREE.
  • SVGOMG. A tool for optimizing SVG vector graphics files. SVG files, especially exported from various editors, usually contain a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result.
  • Can i use. "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
  • CodePen, Plunker and jsfiddle : online communities for creating, collaborating on and sharing your web development ideas.

Conclusion

I really enjoyed writing this, and I'm very happy to be able to give something back to the incredibly supportive web development community everywhere.

As I mentioned at the beginning this is my first blog post and I hope it won't be the last. I will try to keep you all updated about my career shifting which I will carry out very soon and I will try as well to write about new technologies I would learn in the future in a clear understandable way.

If any of you have any questions, please leave a comment and I’ll do my best to answer you ASAP.

I hope you will find this useful and inspirational.

Peace.


Comments (3)

Ahmed avatar

Ahmed
Sun, Jul 21, 2019, 16:02

test staticman.

Ahmed Mokhtar avatar

Ahmed Mokhtar
Mon, Jul 22, 2019, 0:14
Reply to Ahmed

Test nested comments. staticman rocks.

Reply to Ahmed 💬

Muhammad Sani Haruna avatar

Muhammad Sani Haruna
Wed, Sep 16, 2020, 15:51

Wow, Great post with full of insights, looking forward to become a Front End Developer too.

Reply to Muhammad Sani Haruna 💬

Leave a Comment 💬