Before we get started, I want you to keep something in mind; I have taken college courses, followed YouTube tutorials, taken LinkedIn in courses, and have tried a variety of other ways to learn these skills. I have found PERSONALLY that I’ve learned the MOST in the LEAST amount of time possible on this platform.

Now, the learning journey is never complete because there’s always more to learn, but today’s method helped me create my first website and has taught me valuable skills that I still use. Make sure you read the article in its entirety today because I’m going to share why this platform is so helpful.

The Platform

The platform that has personally helped me learn the MOST in the LEAST amount of time is freecodecamp.org. Now let’s go through the reasons why this platform is the best.

#5 – It’s FREE

It’s completely free to sign-up and take courses on freeCodeCamp. The best part is that it’s not partially free like a lot of other programs; the ENTIRE thing is completely free. There are not gimmicks, and they don’t try to sell you anything. Now, you can learn how to code without the burden of a huge financial commitment!

#4 – The Content is Developed By REAL Instructors & Professionals in the Field

freeCodeCamp was founded in 2014 by Quincy Larson to help people transition into jobs in the tech industry that pay more. In the first two courses – “Responsive Web Design” and “JavaScript Algorithms and Data Structures” – the course content is accompanied with videos made by Beau Carnes, helpful forums, and hints all provided for free. Beau Carnes is a professional software developer that does a great job of breaking down difficult to understand subjects and guides you in the right direction when you get lost.

No longer do you need to go to a university or sign up for an overpriced coding bootcamp to be in a program with top notch material and learning. You can do it all for free and from home on freeCodeCamp.

#3 – You Learn and Immediately Apply

Unlike other courses and programs, when you take a course on freeCodeCamp, you learn something and have to immediately apply it. What I LOVE about the platform is that everything is setup INSIDE of freeCodeCamp for you already. You don’t have to go back and forth between a video, a university course, and a code editor.

The course information, code editor, and videos are all right there ready to go in freeCodeCamp. I’ll show a visual of what I’m talking about below.

Look at left side of the image above. Here, it provides you the information you need to know, AND it gives you an example that is broken down to help you visualize what you need to do. Then, on the right side, the code editor that you will use is already setup and built into freeCodeCamp. This is incredibly helpful because you can go back and forth between the example and your work; it’s all right there and setup for you!

Next, if you look at the left side of the image above, there is a “Get Help” button. This button expands into three options “Get a Hint,” “Watch a Video,” and “Ask for Help.” These are all extremely useful options: especially when you get stuck on a challenge. It also offers extra in depth feedback under “tests” to breakdown what you are doing right and wrong when you submit a challenge.

It’s great not having to setup some external files from GitHub, a coding editor, or search Google for extra documentation. Everything you need to learn is right at your fingertips as soon as you start a course in freeCodeCamp!

#2 – Learn the Right Way

Stack Overflow and W3Schools are both really helpful tools that I personally use when developing sites. However, getting something to work doesn’t mean it’s a best practice and can lead to additional issues later on. Even if you’re highly experienced, you may not be optimizing your code, or you may be taking the long way to do work that could be done in a simplified way.

Even if you CAN do something, many times you may not know WHY it works. This is yet another reason why freeCodeCamp is SO useful. It walks you through baby steps on how to do everything CORRECTLY, and it helps break down complicated subjects into more manageable information. This helps you understand the how and the WHY. Understanding why something is working is extremely powerful in software and web development.

#1 – These Guys ACTUALLY Care About Your Success

These guys could EASILY have made this a paid course that requires a large one time payment or a subscription type payment, but they didn’t. They could’ve given us a free “lite” version of the program where they encourage us to buy the full courses, but they didn’t. 99% of the computer science, software development, and web development community are just trying to take your money for courses and tutorials that aren’t that helpful to anyone, but these guys offer a great program for FREE.

These guys wanted to help people escape their crappy and low paying jobs for something in a more exciting and high paying field: the tech field. In college, I felt like a number that they need for tuition and to build a bigger football stadium; I never felt like faculty and staff genuinely cared about me. On YouTube, it’s always about getting me to buy some mundane course that is not even accredited or recognized by any employers: really useful. Coding bootcamps COST A FORTUNE, and the education is managed by the same college professors that actively discouraged me if the course became difficult.

freeCodeCamp is the ONLY program that I’ve been a part of where I felt like the instructors and developers of the courses really care about me and others. They are highly successful professionals that CHOSE to make a program that noobies and people that don’t have any money can take to pursue their dreams and better their lives. If you want to become a legitimate computer scientist, web developer, and/ or software developer, give freeCodeCamp a shot!

Final Summary

1. These Guys ACTUALLY Care About Your Success.
2. Learn the Right Way, even if you’re already a professional!
3. You Learn and Immediately Apply.
4. The Content is Developed By REAL Instructors & Professionals in the Field (not some random guy or girl online).
5. It’s FREE.

I’m a professional web developer, instructional, UX/ UI, and multimedia designer. I’m the founder and CEO of “Kalman Web Design” where I practice professional web development and more. If you need my services, please reach out here: https://thomaskalman.com/contact.html.

#1 – Identify Your Target Audience

What is it that you want to accomplish with your new website? Do you want to sell dog toys? Do you want to provide a haircutting service? Whatever it is you want to do, you need to identify it and do some research on your target audience.

For example, what age group spends the most money on dog toys? Millennials spend the most amount of money on dog toys, and they are the most likely age demographic to buy items for their pets. With this simple research, I am know able to design my website that targets a specific demographic that is most likely to purchase my product.

Obviously, there is more research to be done if I open a dog toy business, but this give you a good idea on how and why you need to research and learn about your customers. This will help your business increase sales and understand things from the customer’s point of view.

#2 – Keywords

Next, you need to identify key words that people are searching. For example, if you are selling dog beds, what are the most searched terms in regards to dog beds? You can use free tools such as https://answerthepublic.com/ to determine what people are searching for.

Once you find out what people are searching for, you want to integrate these terms and phrases into your website. If the most searched phrase for dog beds is “washable and durable dog beds,” you need to take this and integrate it into your headings and paragraphs. Instead or writing “Dog Beds for Sale,” say, “Washable and Durable Dog Beds for Sale.”

Instead of naming the picture of your dog bed, “bed.png,” name it, “washable_durable_dog_bed_for_sale.png.” Instead of writing, “picture of dog bed,” for your alt text, write, “washable and durable dog bed that lasts.” This simple method will increase your search engine optimization (SEO) and boost your site in online search results.

#3 – Font & Color Scheme

Colors causes people to have feelings. For example, red invokes feelings of power, passion, love, and more. Purple invokes feelings of royalty, romance, wisdom, and more. This means that you need to use this information to decide what colors work best for your business.

If you are making a website for your boxing gym, I wouldn’t use purple. I would red to invoke feelings of power and strength. You might have to change the colors you already use, but TRUST ME; it will benefit you in the long term.

Next, you need to think about your font. Usually, I tell people to do some research on what font invokes the right emotion. However, if this is your first site, keep it simple, and use Arial. Arial is a great font that is used by many major businesses, and it will keep it simple and professional.

#4 – Keep It Simple & Don’t Overcomplicate It

Now, we are at the actually designing phase. Use a tool like Adobe XD, Figma, or Penpot to create a mockup of what you want your site to look like. These tools can seem intimidating, but they’re actually easy to use. *Note* If you are a student, you can get a free subscription to Figma!

THIS IS YOUR FIRST SITE, so don’t be so hard on yourself. Take your perfectionism, and throw it away. Make something that you’re proud of, but don’t get yourself stuck on every tiny detail. Focus on how you are going to use color, images, graphics, buttons, and how your navigation will look.

Finally, don’t make a design that you can’t actually develop. While designing, you need to constantly think, “Can I create this in a website builder or using Html and CSS?” Create something that is great: not something overwhelming! Below, I’ll share examples of my website designs.

Something I want you to notice is the simplicity. I PURPOSELY make my designs simple for a few reasons.

1. Complex sites are confusing for the users. Simplicity makes is MUCH easier for people to navigate and use your site.
2. More elements are distracting. When there are less elements on your page, it makes it easier to draw attention to the ones that matter.
3. Everything on your site should play a specific role. People don’t need an orb following their cursor around; it doesn’t add any value to the user or help you accomplish anything. If you use animations and interactivity, use it to draw people’s attention where you want it!

Remember, a fancy and complex website does not mean it’s better. Many times, it’s just confusing for the users.

#5 – Development

After you complete your design, it’s time to begin development. In this stage, you need to decide HOW you will create your site, and you have a number of options.

1. Use a site builder like WordPress, Wix, etc.
2. Use Html, CSS, and JavaScript to create an original site.

Personally, I like to create my own sites with Html, CSS, and JavaScript because I have more control over the process. However, WordPress is a good option if you’re a beginner because you can choose from templates or create a custom site with drag and drop elements.

Whatever you choose, commit to it, and see the development process through. There will be frustration and confusion. However, there is ALWAYS a solution; you just need to be patient and look for it. If you have an issue with anything, don’t be afraid to reach out to me! I WILL HELP YOU! Stay tuned for for later articles about how to develop your site.

Conclusion

1. Identify Your Target Audience
2. Keywords
3. Font & Color Scheme
4. Keep It Simple & Don’t Overcomplicate It
5. Development

I’m a professional web developer, instructional, UX/ UI, and multimedia designer. I’m the founder and CEO of “Kalman Web Design” where I practice professional web development and more. If you need my services, please reach out here: https://thomaskalman.com/contact.html.