front end Tag Archives - General Assembly Blog

Preparing for an Immersive Coding Program? Don’t Stop at the Pre-Work.

By

Over the years, we’ve spent a lot of time thinking about the onboarding experience for students entering our Software Engineering Immersive (SEI) program. SEI is a 12-week, full-time program that gives people the foundation and skills needed to become full-stack web developer.

From 9 am to 9 pm on weekdays, and all day Saturdays and Sundays, students are immersed in code. Because the program is so intense and the learning curve so steep, we, along with other coding immersives (also known as “bootcamps”), advise students to start preparing before they arrive on day one.

Pretty standard is the concept of “pre-work”: 50-100 hours of readings, tutorials, and exercises designed to give everyone a foundation in basic web development concepts, as well as level set the class. At GA, students cover Git, HTML, CSS, and Ruby before starting SEI.

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