How to Learn Frontend Web Development: JavaScript, HTML, CSS

TL;DR

Front-end web development rests on three core technologies that work together like building a house: HTML is the structural framework, JavaScript is the wiring and plumbing that makes it functional, and CSS is the finish and paint that makes it look good. This 20-plus-hour beginner course starts with JavaScript first, then covers HTML and CSS.

Transcript

in this massive course you will go from having no coding experience to having the essential skills of a front-end developer you will learn various front-end Technologies and build a few projects along the way Zack golwitzer teaches this course Zach is an experienced software engineer and full stack developer hey everyone my name is Zach and today i... Read More

Key Insights

• Front-end web development is built on three core technologies: HTML, CSS, and JavaScript. HTML provides the structure, JavaScript adds functionality and interactivity, and CSS handles the visual styling, and all three work together rather than in isolation.
• The house-building analogy explains the three technologies clearly: HTML is the concrete foundation, 2x4 framework, and roof; JavaScript is the wiring and plumbing that makes the house functional; and CSS is the paint and finish tiles that make it look good.
• This course reverses the typical teaching order by starting with JavaScript instead of HTML and CSS. The instructor argues concepts learned from a general programming language like JavaScript help beginners grasp HTML and CSS more easily, and front-end developers must know all three anyway.
• The course is designed for complete beginners with no coding experience, taking students from never having written a single line of code to a solid grasp of coding fundamentals, JavaScript, and building basic web pages.
• Later chapters covering CSS flexbox reach a more intermediate level and can be useful to anyone, so learners can skip around to chapters that interest them using the timestamps and chapters listed below the video.
• Browser developer tools are essential for front-end developers and are opened by right-clicking a page and selecting inspect element, revealing panes for inspecting HTML elements and their CSS stylings.
• Changes made in the browser's developer tools are temporary and visible only to you. Editing an image source or width on google.com updates the page live, but clicking refresh reverts everything to the original, making the tools ideal for testing changes in real time.
• The course was filmed over the course of a year and pieced together lesson by lesson from separate videos on the instructor's YouTube channel, then compiled into one logical sequence from start to end for the complete beginner.

Questions & Answers

Q: What are the three core technologies of front-end web development?

Front-end web development is built on three main tenants: HTML, CSS, and JavaScript. HTML provides the structure or framework of a web page, JavaScript makes it functional and interactive, and CSS handles the visual styling to make it look good. The instructor emphasizes these are not born in isolation; they all work together to build a web page, and a front-end developer must have a firm grasp of each in isolation as well as understand the relationships between them.

Q: How does the house-building analogy explain HTML, CSS, and JavaScript?

The instructor compares building a web page to building a house. HTML is the framework and structure, meaning the concrete foundation, the 2x4s that go up, and the roof. JavaScript is like the wiring and plumbing that gets put in to make the house actually functional. CSS is the finish, meaning the roof tiles and the paint on the outside and inside that make it look good. This analogy helps beginners understand the distinct role each technology plays.

Q: Why does this course start with JavaScript instead of HTML and CSS?

Many tutorials start with HTML and CSS before moving into the more complicated and challenging JavaScript, but this course reverses that order. The instructor makes JavaScript the biggest section and teaches it first for two reasons: a front-end developer has to know all three anyway, and learning a general programming language like JavaScript teaches concepts that help students catch on to HTML and CSS afterward, bringing the full picture together more effectively.

Q: Who is this front-end web development course for?

The course is mainly geared toward the complete beginner, someone who has never written a single line of code in their life. The goal is to take that person to at least a solid grasp of what coding languages are, particularly JavaScript, and what web development is, particularly front-end web development. By the end, students should be able to build basic web pages and understand basic coding fundamentals. Some later chapters, like CSS flexbox, reach a more intermediate level useful to anyone.

Q: What web browser does the course recommend and why?

The course recommends downloading the Firefox web browser by searching Firefox download and installing it. While developer tools exist in any browser, whether Edge, Chrome, or Firefox, the instructor wants everyone looking at the same tool. Firefox is described as a great browser for developers because it has some really advanced developer tools, and in the instructor's opinion, probably some of the best developer tools of any browser. Students are asked to use Firefox so their view matches the instructor's.

Q: How do you open browser developer tools?

You open browser developer tools by right-clicking anywhere on a web page and clicking inspect element. This opens a pane on the right side of the browser containing different applications for seeing what is going on with the web page. As a front-end developer, you will use these developer tools a ton and get very used to them. The two most common parts introduced are the inspector, which lets you inspect the page, and the console, described as the second most popular tool.

Q: Are changes made in developer tools permanent?

No, changes made in the browser's developer tools are not permanent and are visible only to you. The instructor demonstrates by editing an image's source and width on google.com, which updates the page live so the dog photo appears on Google's homepage. However, these are temporary changes for testing in real time; the moment you click refresh, the page goes back to its original state. Nobody else sees these changes, making the tools ideal for experimenting with different adjustments.

Q: What does the inspector tool in developer tools do?

The inspector is the portion of developer tools that you will become most familiar with. It allows you to inspect the web page you are looking at. As you scroll over different lines of HTML code, the corresponding parts of the web page are highlighted, and you can drop down to get more specific about what you are selecting. At the bottom, it shows the CSS stylings that go along with the HTML. It also lets you view the Box model and the document object model, or DOM.

Summary & Key Takeaways

• Zach Gollwitzer teaches this 20-plus-hour freeCodeCamp course covering the three core tenants of front-end web development: HTML, CSS, and JavaScript. It is designed to take complete beginners from no coding experience to a solid grasp of coding fundamentals and the ability to build basic web pages.

• The course uses a house-building analogy where HTML is the structural framework and foundation, JavaScript is the wiring and plumbing that adds functionality, and CSS is the finish and paint. Unusually, it starts with JavaScript, the biggest section, because programming concepts help beginners later grasp HTML and CSS.

• The first lesson introduces browser developer tools in Firefox, opened by right-clicking and selecting inspect element. Students learn the inspector and console, editing an image on google.com to see live but temporary changes that revert on refresh, demonstrating the power of code early on.