| layout | title |
|---|---|
ots |
Get started with HTML & CSS |
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 latest version of HTML. There is a lot of interest about it, because it improves and adds many HTML elements, 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 style to HTML elements. In contrast to HTML, CSS has no hierarchy and can be written in the order that we choose.
CSS3 is the last released version of CSS, and it also improves CSS a lot. For example, it gives 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 'Tools'. You should find a 'Developer tools' or similar option. Click it, and the toolbox will be opened. Here is the place where we can monitor our code and see 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.
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.
- The template structure - Using HTML, transform a white page to a 'Hello World'.
- Your first styled Hello World! - Understanding CSS. What is class, ID and selector.
- Create your personal Portfolio - Part 1. - HTML5 elements, float, box model and font-style.
- Create your personal Portfolio - Part 2. - Positioning, anchor and form elements.
- HTML5, what is new?
- Looking extra smart with CSS3
- Cross-Browser compatibility and dealing with IE
- Responsive Design
- Frameworks and Boilerplates
- Getting Sassy more or Less
- Introducing Javscript
The Mozilla Developer Network (MDN), by the guys who make Firefox, host some great resources:
- HTML Portal - Guides, intros, tutorials, references, elements, attributes...
- HTML Reference - Every HTML element listed, find out about them all, and make use of them!
- CSS Portal - Tutorials for writing effective CSS, demos of CSS3, and much more.
- CSS Reference - More CSS properties and classes than you can shake a stick at.
Learning resources:
- CodeAcademy - A good hands-on tutorial to keep you learning.