html Tag Archives - General Assembly Blog

What Is Front-End Web Development?

By

Advanced-Front-End-Web-Development

Name: Nick Schaden (@nschaden)
Occupation: Web Designer/Developer

1. In 140 characters or less, what is front-end web development, from your experience?

A mix of programming and layout that powers the visuals and interactions of the web.

2. If a website were a house, front-end web development would be ______?

Front end development would be the pretty exterior that gives the house character, or the host that invites guests in and makes them feel at home.

Continue reading

Getting Started With Front-End Web Development

By

learn to code

So, you want to learn to code? Awesome! Knowing how to code can help you level up in your current role, open new career opportunities, and empower you to make your app or website ideas come to life. But where should you start?

Although hotly contested among developers, most novice coders begin their education by learning the basics of front-end web development, or the client-facing side of web development. The front end involves what the end user sees, like the design/appearance of the web page.

In order to become a front-end developer, there are three “languages” you need to master: HTML, CSS, and JavaScript, or as I like to call them, “The Holy Trinity.”

Below, I explain the difference between these three languages, and how they work in concert to get a simple website up and running.

Continue reading

A Website is like a House. Here’s Why

By

Website House Metaphor

Metaphors are great ways to bridge the knowledge gap between technical and non-technical team members. But instead of bombarding non-technical folks with acronyms and jargon, it helps to first establish a baseline understanding of how different technologies work together. One way I like to do this is by comparing a website to a house.

1. The Frame: HTML (HyperText Markup Language)

A house has rooms, and each room contains furniture and electric appliances. Similarly, a webpage has sections (e.g. header, body, footer), and each section contains images and text. HTML organizes and presents elements of a webpage in a structured hierarchy. Here’s an example of pseudo-HTML describing the elements in our house:

[code language=”html”]
<house>
<second_floor>
<bedroom>
<bed />
</bedroom>
</second_floor>
<first_floor>
<living_room>
<television />
</living_room>
<kitchen>
<fridge />
</kitchen>
<entrance>
<front_door>
<door_bell>
</front_door>
</entrance>
</first_floor>
</house>
[/code]

2. The Look: CSS (Cascading Style Sheets)

Not all rooms, tables, and chairs look the same, nor do words or images on a page. That’s where CSS comes in – CSS defines how elements look, describing their color, size, position, shape, and more. Here’s an example of how we’d use pseudo-CSS to style a bedroom in our house:

[code language=”css”]
bedroom {
width: 12ft;
height: 8ft;
walls: 1mm wallpaper matte;
floor: carpet
}
[/code]

Continue reading