Illustration by Icons 8 from Ouch!
The Beginner’s Guide to HTML, CSS and JavaScript
This blog covers some resources that I used when I was first learning to code. Hands on engineering is the best way to improve your software development skills. You can spend time on theory but starting coding is the best way to learn.
The following resources are for beginners learning HTML, CSS and JavaScript.
Python is also a versatile language to learn, but is not the focus of this blog.
There are lots of other development languages out there.
Table of Contents
- The Web Developer Bootcamp on Udemy
- Recommended Technology
- Resources for Coding Beginners
- Styling, Layout, and Images
- Overcoming the Biggest Obstacle
- Conclusion
The Web Developer Bootcamp on Udemy
I began learning to code with The Web Developer Bootcamp on Udemy. The course was really cheap and was designed for beginners. You can go back and forward in the course at your own pace.
The course covers basic HTML, CSS, JavaScript and deployment and is run by a Software Engineer turned Trainer, Colt Steele. He is really good at explaining basic concepts and has over 250,000 subscribers on Youtube.
Recommended Technology
You will need a laptop you can store files on and something you can download a Text Editor, like Visual Studio Code, on. I personally use a MacBook Air.
Recommended machines:
- Windows
- Mac
- Linux
I made a mistake early on thinking I could use a Chromebook to code. Since they don’t allow you to save local project files (which are essential for web development), it didn’t work out. Make sure your machine runs a proper operating system.
HTML and Resources for Coding Beginners
MDN Web Docs (Mozilla Developer Network) is a great resource for HTML, CSS and JavaScript information and has been maintained since 2005. They have fantastic breakdowns, tutorials, and reference material for HTML, CSS, and JavaScript. For beginners, MDN offers structured learning pathways to help you get used to the syntax.
This really complemented The Web Developer Bootcamp because the course initially focused on small HTML projects. HTML is very similar to spoken English and creates the basic structure of a webpage. Once you’ve got to grips with that, you move on to CSS, which allows you to add style and layout. Without CSS, all websites would look like basic text documents.
CSS, Styling, Layout, and Images
Once you’ve mastered the basics, you can start building things that look like real websites. Flexbox is a current way to style and lay out elements on a page. For me, Flexbox was where things became more complex. Whilst HTML is easy to grasp, Flexbox is not natural language. I found the resource CSS Tricks so useful for both mastering Flexbox and general CSS concepts.
Images are an important part of any website and are styled with CSS—whether they are backgrounds, photo grids, or product shots. A great free image resource is Unsplash, where photographers upload amazing free stock photos you can use on your websites.
JavaScript and Overcoming the Biggest Obstacle
The Web Developer Bootcamp was great but JavaScript was something I wanted a little more support in. I decided to invest in a MacBook Air and a coding course to get the support I needed. There is more information on the coding course I went with in my bootcamps blog: My Journey into Code - A Review of 23 Code Street.
The most challenging part of learning to code was learning JavaScript. It adds functionality to websites, enabling your HTML to move on a page or updating shopping baskets. In my bootcamp, we started using the HTML Canvas and created functions to produce random patterns, then moved up to building a basic version of Flappy Bird.
My biggest takeaway here is: don’t be afraid to invest in proper tools and support when you get stuck. I eventually found the support I needed to succeed.
Conclusion
Getting started is the hardest part, but resources like The Web Developer Bootcamp and community support from a course can be the perfect combination. Be sure to check out Trello as well—it’s an excellent free tool for planning out your daily projects and keeping track of all your great resources. Happy coding!
