yukio808 / html-css-basics

Practice HTML and CSS for Jr. Devleague's Digital Design class

html-css-basics

Let's learn the importance of HTML and CSS markup languages, how we use it and what to consider when we build good design thats readable for users.

Let's get started!

1. Drag and drop the index.html in a browser window.
2. Alternatively you can run python -m SimpleHTTPServer in the terminal via the respective directory.

HTML Skeletons

HTML is just markup language that is essentially the wireframe for a website. Having a good skeleton or structure is key in building the rigidy and flow of a platform. Think of it as the steel beams that you see when a building is first constructed.

CSS Prettifying

Now here we'll pour the concrete, insert the glass panels, and paint the building all pretty. We can use CSS markup language to shape how the HTML will look like visually to a user. No matter what kind of HTML we can, CSS can manipulate it visually and convey many different ways to tell a story of a site. HTML can stay completely untouched and a site can look complete different!

We'll see this in our example here. In the index.html file you'll see two different css files: badstyle.css and goodstyle.css.

Comment and uncomment each respectively and see how content moves around but the information is still completely the same!

Going further

Now let's manipulate the content of our HTML and the styles of our CSS file.

1. Change the content in index.html such as the title, h1, and the p tags.
2. Add your own CSS markup by creating a brand new file in the css folder called styles.css.
3. Try maintain good color schema and styles when reference to the HTML's respective elements, ids, and classes.

Let's Review! Some questions to ask...

1. What makes a good HTML skeleton?
2. How does CSS play a role in its relationship with HTML?
3. What's the importance of having good design?