DEV Community

Craig Coleman
Craig Coleman

Posted on

Dev Log[1] - Front End Parts Put Simply

About

Being a front-end developer can feel really complicated at times for a newbie. It mostly comes down to HTML, CSS, and JavaScript. All of these individual pieces are important to learn and it really just takes time to feel comfortable with each one.

Individually they're all programming languages, and a good bit of learning an actual language is understanding that their structure comes from an opinionated individual / group. A lot of things are a certain way just because they decided it would be that way. Being a front-end developer really drills down to those three basic parts. There are other tools attached, but a developer spends most of their time dealing with these basics.


HTML

The elements of a web page - an element is really just a piece of the web page in this case. A web page is like the finished puzzle, and the html elements are the individual pieces that make it up. Every one of these elements serve a specific purpose on the website. Obvious ones are video, image (<img>), and button elements. Then the not-so-obvious examples that are popular could be <div>, <a>, and <p> tags. It's important to get comfortable with these pieces and it just takes time.

A lot of them have their own special attributes, which makes them even more interesting. An attribute pretty much gives these elements even more unique features. Some of them might even be CSS (Explained latere) styles. A good list can be found here at W3Schools


CSS

The styles of a web page - every page has those HTML elements, but this is where the true distinction happens by adding colors, changing the font, etc. HTMl elements are super boring without these extra styles.

CSS can be real simple at times, but also really complicated. Getting started with HTML / CSS is easy. But mastering the two definitely takes time and experience. There is a ton that can be done with CSS, such as creating simple styles, animations, page layouts, and adjusting for design between mobile devices / a typical desktop PC.


JavaScript

The logic of a web page - the truest programming language out of the three and the most powerful one that provides the most dynamic feel to a page. A lot can be done with JavaScript and it's impossible to list it all, but it's key to understand that JavaScript can do everything that CSS and HTML can do, plus more.

Imagine a button being pressed on a web page, what happens next? Typically it's up to the added JavaScript to decide that. Examples are creating more HTML elements or changing CSS styles on the fly. Or even perhaps taking the web page viewer to another page following an animation.

Possibilities are almost limitless once the language is understood. Because of the amount of possibilities, it's pretty much impossible to perfect the language (especially when things are constantly changing), but one can get familiar enough to use it in any context through critical thinking and research.

Top comments (0)