2019 STC WebLaunch: CSS workshop

by: pupubird

Before we start:

We will be using sublime text as our text editor, if you do not have one, please click the link to download.

Sublime Text download

Ask question here!

Workshop slides

HTML Recap

In this session, we will be doing a little recap on our last html workshop.

Source code

Inline Style Practice

In this session, we will be doing a practice on styling each html tag in inline style and giving different style property.

Source code

External Style Practice

In this session, we will be doing a little practice on styling in external style by using tag

Source code

Class and id practice

In this session, we will be doing a practice on using class and id to name the target in order for us to style the target.(Sorry for flat image :C)

Source code

Display property practice

In this session, we will be learning the differences among each display properties.

Source code

Margin and padding practice

In this session, we will be doing a practice on showing what are margin and padding and how do we use them.

Source code

Box shadow practice

In this session, we will be doing a practice on putting shadow effects on our

tag

Source code

Hands on: Contact Form

We will start to apply what we had learned into this first hands on exercise

Source code

Click me to download html file

Hands on: Homepage

This will be our final exercise in this CSS workshop, which will summarize up all the content that we had covered

Source code

Click me to download image

Click me to download html file

Feedback

Lastly, please fill up this feedback form for us to improve in the next workshop!

Please click me :C

© 2019 Pupubird • Sunway Tech Club All rights reserved.