HTML and CSS. Bringing Structure and Style to the Web Page

SANi8pe

In our first post in the web development journey, we covered the browser. Now we’re taking you ‘under the hood’ with HTML and CSS—the framework languages for the browser. HTML is the content and structure code interpreted in the browser as the web page, CSS is the language that manages the presentation of the HTML elements. Let’s dive deeper.

Fullstack-infographic-week-2-html-css_160321

HTML

HTML, HyperText Markup Language, is the language that makes up the content, framework, and structure of a web page. HTML was invented in 1990 by Tim Berners-Lee based off the complex, technical markup language known as SGML, Standard Generalized Markup Language.

CSS

CSS, Cascading Style Sheet, is used along-side an HTML file to customize the style of a website. CSS brings the web page to life, displaying colors, backgrounds, font sizes, and more. Before CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup. This made documents larger and more complex, error-prone, and difficult to maintain. Håkon Wium Lie, who worked alongside Berners-Lee, proposed CSS in 1994 and officially launched it in 1996. Implementing CSS allowed the separation of presentation from structure, resulting in considerably simpler HTML.

Fitting in the Full Stack

“Once students understand fundamental concepts, they can begin to grasp more advanced concepts like dynamically rendered pages and building more complicated, modular stylesheets,” said Graham McBain, evangelist at Galvanize.

In the Galvanize Web Development immersive course, HTML and CSS are fundamental skills, taught early. Learning these languages gives students a solid foundation in the structure and function of a web page. Once they know the relationship, they can start designing and developing websites, apps, and more.

The best way to learn HTML and CSS is simply by doing it. Codecademy.com will give you a solid overview of both technologies, but for ongoing support, CSStricks.com is a good resource for practical implementation.

Curious how these languages look ‘under the hood?’  Right click anywhere on the page and click ‘View Page Source’ in the menu. Pretty neat! If you’re adventurous, take a deeper dive with How to Use Chrome DevTools for the Absolute Beginner.

“Front end web development is a skill unto itself,” McBain said. “Knowing the basics of HTML and CSS is essential, no matter what path a developer takes.”

Stay tuned, next post we get interactive! We’ll introduce Javascript and how it brings life to the page.

Contributions by Graham McBain, Galvanize Evangelist.

Want to learn how to use HTML & CSS and start building web applications of your own? Check out one of our 8-week Web Development workshops.