Presumed knowledge
-
HTML
CSS is merely a language used to beautify existing HTML content. Likewise, needless to say, knowledge of HTML is assumed.
Course overview
CSS or Cascading Style Sheets, is a styling markup language used to style and design web pages. It works by giving properties to HTML elements and different values to the properties to style the elements in different ways. CSS is the de-facto standard for styling web pages. If you want to design for the web, you have to learn CSS! But even if you don't have to design for the web, you can still learn CSS.
It is a whole lot of fun, teaching you a bit of designing itself and making you seriously love web development!
Learning outcomes
This course is aimed at making you perfect in designing websites using the concepts of CSS. It will make you better think on how to structure HTML to make up different web layouts and also how to write code with the best practices of programming. At the end of this course you'll be packed up with knowing a great detail of information on CSS and be able to design literally anything you want.
Getting a bit more specific we will be learning the following:
- CSS fundamentals including properties, values, rules, declarations, comments and stylesheets. In additional to this we'll also be looking over selectors, combinators and some rules of CSS style application to elements.
- How to work with text in HTML and apply colors to it using multiple properties and their respective values, in addition to working with CSS backgrounds.
- How to layout content in different ways on a web page to meet one's needs. Moreover, you'll also learn how to deal with common problems in CSS designs including overflows.
- How to resize elements to given dimensions and consequently get them to either fill up the viewport's height, width or any element's height or width and so on.
- How to work with the triad of tranformations, transitions and animations in making endless effects, and solve some design problems.
Although we have given roughly a lot of information on our course, you can check out more below in the course overview and explore the details of each unit seperately.
Table of contents
Foundation
1 hr 7 mins 9 chaptersDescription:In this unit we will begin with an introduction to CSS, a brief overview and background to the topic. Then we will move over to the basic of the language; where is it written, how to write it, the syntax and rules of writing CSS and so on. We will see what are properties and how can they be used to do different things with HTML elements. Lastly we'll consider selectors and combinators in CSS together with detailed concepts like style inheritance and precedence.
Color
14 mins 3 chaptersDescription:In this unit we will be looking over how to represent colors in computer, particularly in CSS. We will examine colornames, the hexadecimal notation, and other functions to denote color values. The concept of alpha filtering and opacity is also what you'll learn in this unit.
Text
23 mins 7 chaptersDescription:It would be truly wrong to say that websites are least comprised of text - if this was the case then what would be left in websites? In this chapter we will take a look at how to style text on web pages in different ways for instance making them small or large, thick or thin, italicised or underlined and so on.
Backgrounds
17 mins 4 chaptersDescription:Being able to play with the backgrounds of elements is a good thing to have. In this unit we'll discover numerous concepts involved in backgrounds including background colors; background images, their styling; gradients and so on.
Strokes
11 mins 2 chaptersDescription:You'll learn how to apply strokes to HTML elements using borders and outlines. We'll consider different sides of an element and how to play with borders on each of them. Also we'll consider how to give strokes to an element that don't somewhat count in its final dimensions using outlines.
Spacing
15 mins 2 chaptersDescription:A design is meaningless if it doesn't employ the idea of spacing. In this unit you'll be introduced to the two concepts of spacing in CSS, namely margins (outer-spacing of an element) and padding (inner-spacing of an element).
Layout
32 mins 3 chaptersDescription:A web page's layout is an essential part to designing any website. This is the case with CSS too - it has literally got a ton full of concepts revolving around placement and positioning of elements that make up a web page's structure and layout.
Overflows
11 mins 2 chaptersDescription:Times can come when things go out of the bounds of an element - we call this an overflow. In this unit we will see what can cause an overflow, how to rectify it and that what is the idea of text wrapping in CSS.
Dimensions
11 mins 3 chaptersDescription:How to increase the width or height of an element; how to set up bounds on these, such as a maximum height or a minimum width; how to make the CSS interpreter apply dimensions to a specific box; all these questions have their answers in this very unit.
Transformations
23 mins 5 chaptersDescription:In this unit you'll learn how what are CSS tranformations and how they can be used to do endless jaw-dropping things on the web. Particularly we'll look over translating, rotating, skewing and scaling HTML elements using functions provided by CSS.
3D Transformations
1 hr 8 mins 5 chaptersDescription:After learning about CSS 2D transforms, the next logical step is to get familiar with CSS 3D transforms. In this unit, we start by exploring the intricate concept of perspective before diving into unraveling the different functions used to perform 3D transformations, for e.g.
translateZ()
,rotateX()
,rotateY()
, and so on.Transitions
14 mins 3 chaptersDescription:Want to get an element smoothly go from one style to another? You need a CSS transition. In this unit we will discover the whats and how-tos for CSS transitions. We'll see how to time, delay and specificy properties for transitions, in addition to learning how timing-functions work to speed up or slow down transitions with respect to time.
Animations
24 mins 3 chaptersDescription:In this unit you'll be introduced to the idea of CSS animations; how they differ from transitions and how can they be used to do even more of endless things as compared to transitions. We'll see what are keyframes in animations and how they serve to run an animation.
Frequently asked questions
-
What if I get stuck somewhere in the course?
If you're having a hard time understanding a given concept in the course, feel free to reach out to us via our email
mail@codeguage.com
, describing the issue you're facing. We'll try our level best to help you out. -
Some important topics are missing from the course. Why is that so?
Our courses are released while they are still under construction so that our learners can get early previews. As we continuously work on adding more and more content to our courses, if a given topic isn't covered today, there's a high chance that it's already under way and will show up very soon. You can follow us on Twitter to be updated with our latest content releases.
-
How can I ask any general questions related to the course's content?
Write to us at
mail@codeguage.com
.
Share your experience
Empower others and help shape new learning journeys!
We are really glad to know that our immense effort on creating this and other suchlike courses got you here. We believe that your insights regarding this course can inspire and guide others on their learning path. We'd really love to hear about your viewpoint on the course and how it helped you improve your skills.
The best part is that you get to post the review from your own Instagram or Twitter account, while mentioning CodeGuage in your post. The process to follow is really simple:
- Write about your experience of a given course and how it helped you in levelling up your skills.
- Include the
@codeguage
handle in your post. (That's important!) - Include the
#SkilledUpWithCodeGuage
hashtag in your post.
And that's it! It's that simple.
We sincerely thank you for being an integral part of our community and helping us shape a brighter future for aspiring programmers and mathematicians.
Together, let's build a community of learners. Happy learning! 🙂
Why this course?
-
Free of cost
No need to buy any subscriptions, make any payments, or create any accounts. All the content is available for free.
-
Well-structured
Content throughout the course is organized in a chronological fashion, ensuring a clear and intuitive learning experience.
-
Simple to understand
Everything is explained in plain and concise words, right from the perspective of an absolute beginner.
-
Detailed explanations
Certain concepts require a pretty deep insight. Fortunately, we provide all that insight in easy words.
*The durations mentioned on this page are merely an estimate; the actual time completing the underlying topic/course would obviously be much greater.