Today’s goals:
- Review HTML/CSS championships
- Discuss grading policy
- Review classes and CSS3 transparency
Today’s featured website:
Review HTML/CSS Championship ( Level 1 ! )
- Let’s review the code to make sure we have a strong foundation to support us as we move on to more exciting things! We will be spending a long time on CSS and it’s going to get more awesome (and complicated), so it’s important that we understand the basics:
- The whole concept of a style sheet and how it is applied in our HTML
- Box model (margins, borders, padding)
- Colors (hex values, RGB, color names)
- Styling elements (what are elements again?)
- In pairs: go through all of the code for your challenge webpage in Notepad++ and write down 2 things- code you feel as though you know really well and code you aren’t so sure about. It can be anything; the colors, border styles, table, whatever. We’re all going to share with the class to make sure we understand everything.
Grading policy
- You will spend most of your time working on in-class projects. Your grade will be based upon the following:
- Effort put into your work, including creativity, time spent, and completion of tasks
- Class participation
- Progress toward the goals you set for yourself (you will evaluate yourself)
- See the grades explained infographic
CSS Classes and Transparency
- Classes are used to target a specific element with certain styles. For example, our paragraph element below our table in the HTML/CSS Championships webpage.
- Why are classes useful?
- Why was creating a class helpful in our particular webpage example?
- Let’s practice by starting a new page from scratch and coding together here
- You used a CSS3 feature, transparency, on your images.
- You combined it with a hover effect; where else have we used hover in our CSS to make things happen when a mouse is pointed to an element?
- Let’s practice by adding some code to the new page we just started