OpenTechSchool

Get started with HTML & CSS

Welcome

Welcome to Open Tech School’s HTML & CSS workshop! This course is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS.

HTML or HyperText Markup Language is the main markup language for creating web pages and other information that can be displayed in a web browser. You can write your web application in any programming languages, but in the end it will always be transformed into HTML because that’s the language of the browser. It is a hierarchical language.

And HTML5? What’s that? This is just the last version of HTML. There is lot of interest about it, because it improves a lot the HTML, making it easier to write and to use.

What about CSS? CSS or Cascading Style Sheets is a language used for describing the look and formatting of a document written in a markup language. It is closely connected with HTML, since it gives a style to HTML elements. In contrast to HTML, CSS has no hierarchy and can be written with the order that we choose. CSS3 as a HTML5 is the last released version of CSS, and it also improves CSS a lot improvement, for example, the possibility to animate an element.

To check all our code, we will use the console in our browser. Open any browser and check under ‘Tool’. You should find a ‘Developer tool’ option. Click it, and the console will be opened. Here is the place where we will monitor our code and whether it works or not. Don’t worry! We will explain this better later; for now it is important that you know where to find your console and how to open it.

What we’ll do today

Today we will learn how to write a web page with HTML and style it with CSS. Our goal is to create a personal portfolio page with a presentation and contact page.

Once you are done with your personal portfolio, you can explore some interesting links that you can find below the ‘Extra’ section. If you’re extra curious once you are done with the portfolio, these resources will help you to keep coding with HTML and CSS or just keep you updated about what’s next.

A bit of history

The course

Reference material

  • HTML cheat sheet - Here you can find all the HTML elements you need to start your project.

  • CSS cheat sheet - Here you can find all the CSS selectors and properties to let your creativity go wild.

  • codeacademy - A good hands-on tutorial to keep you learning.