Becoming a WordPress & Front-end Developer for Free
As Wikipedia describes it “Front-end web development is the practice of converting data to a graphical interface for a user to view and interact with data through digital interaction using HTML, CSS, and Javascript.”
This means that you are coding the visual representation that you see on the screen and making it functional.
There are several approaches people take in trying to learn front-end web development. I remember being confused as to what to do, who to listen to, and how to get started.
After listening to The Dave Ramsey Show and following his financial baby steps on how to get out of debt, save money, and build wealth; I realized front-end developers need a similar step-by-step plan.
In this article, I will lay out for you a simple step-by-step plan so you can start to quickly succeed and easily learn this information.
(And just like baby steps, you cannot skip a step. You have to learn to crawl before you walk and walk before you run.)
Before we get started, take the time to get familiar with WordPress: how to navigate WordPress, publish pages, change the menu, etc.
Baby Step #1: Learn the Basics of HTML and CSS
HTML allows you to create the structure of a web page while CSS gives you the design of a web page. This combination is critical in web development. You simply cannot build or develop a website without it.
I have constantly taken & reviewed several HTML and CSS classes in order to master these languages. The best courses I took were for free on SoloLearn. Here you will learn the fundamentals of HTML and CSS.
Baby Step #2: Deep Dive into CSS and Learn a CSS Framework
Using Media queries and a deeper level of CSS is what allows websites to have a responsive design and thus display elegantly on all devices.
Afterward, learn how to implement and work with Bootstrap, which is the most popular CSS framework.
The best place to fulfill your deep dive in CSS would be through W3Schools. You can test out the different code snippets that you are being taught. This also makes W3Schools a great place for a coding review in your coding future.
As for Bootstrap, I recommend reading the Bootstrap Documentation IN FULL. When I did this, that was when I had a really clear understanding of CSS – how to properly name classes and ids, and how to implement responsive designs (e.g. the code they used to make images respond/adjust to different screen sizes).
NOTE: Technically, Bootstrap is not a framework but rather a CSS library… but that is a topic for another day.
Baby Step #3: Learning the Basics of JavaScript and jQuery
JavaScript is never-ending in terms of possibilities and knowledge. It is good to learn the key fundamentals of JavaScript.
From there, move on down to jQuery, which is a JavaScript library. jQuery makes coding easier but you will need to understand the basics of JavaScript first so you can appreciate what jQuery does (and understand what it’s doing).
SoloLearn provides a great free tutorial on both JavaScript and jQuery
NOTE: Once you have a strong grasp on developing WordPress, you will want to take a deep dive into JavaScript and to learn a JavaScript framework (e.g. Angular, React). You can make some serious money should you really hone in on these two skills.
Baby Step #4: Learning PHP and WordPress PHP
WordPress is built on PHP. Over the years, WordPress has been building up on top of PHP and thus have their own modified version of PHP that many refer to as WordPress PHP. This is where you learn about APIs, hooks, filters, page templates, and more.
For learning the basics of PHP, I would recommend the SoloLearn’s PHP Tutorial.
As for learning WordPress PHP, I recommend the Customize WordPress by LevelUp Tutorials. This covers the core of what you need to know about theme development, page template development, and understanding the WordPress hierarchy.
Review of the Baby Steps
WordPress and front-end development is a great field to get into. You can start to make progress with just the basics learned and then consistently practice those skills.
If you can navigate WordPress and complete Baby Step #1, you could get a job as an entry-level WordPress developer. How cool is that!?
From there, moving up the Baby Steps will allow you to move up the ranks of a WordPress developer and eventually as a front-end developer.
Taking Breaks: What Subjects to Learn When You Need a Break from Coding
Along the way, feel free to take breaks by learning more about photoshop and design. Coding can be challenging so learning something that uses a different part of your brain.
Break Choice #1: Basics in SEO, Photoshop, and Design
WordPress and Front End Developers tend to have to take on many roles. They should know the basics of SEO, photo editing, and design so they can be more independent and less reliant on others.
My recommendations for these courses are all through Treehouse ($9/mo for students, $25/mo for adults). However, please feel free to explore the Internet for other courses. Considering these are basic courses, there are sure to be many great free courses on YouTube.
Break Choice #2: Time Management
This is the first time I’ve seen this mention in a web development article and that is to learn time management.
Working in web development is very dynamic. There is always a shift in priorities and tasks which can be challenging.
“Should I use a plugin or a theme? Should I build my own? And which task should I begin with?”
When I first started out in WordPress, I had many tasks to accomplish while my web development skills were still developing. Time management books were very helpful in guiding me through it all.
- Getting Things Done: The Art of Stress-Free Productivity
- Eat That Frog!: 21 Great Ways to Stop Procrastinating and Get More Done in Less Time
Feel free to learn about time management throughout the course. Perhaps as an audiobook on your commute to and from work
In 2016, The Washington Post reported that the average commute time is 26 minutes. That is more than 4 hours per week! (NOTE: The audiobook version of Eat That Frog is only 2 hours long.)
Questions? Comments?
I hope this step-by-step guide serves you well. Please contact me to let me know of any comments or questions you may.
