CSS Projects in 30 Days: Free Course

About this course

Study CSS Projects in 30 Days through this free English video course from freeCodeCamp. The classroom brings together all 31 public recordings from the selected source curriculum, totaling approximately 8h 36m. You can watch the teaching sequence, search the lesson list and keep track of the recordings you have completed. The course focuses on the subject named in its title. Its value comes from following the explanations and making your own small practice attempts, with enough time to inspect the result and explain the decisions involved.

Course at a glance

What you’ll learn

• Apply CSS to a range of small interface projects
• Compare selectors, typography and visual effects
• Build layout patterns with the demonstrated techniques
• Study transitions and keyframe animation
• Use feature queries and reusable values
• Check styles across content and layout variations

Skills you’ll gain

• CSS
• Layout
• Animation
• UI components

Course Overview

Complete Day 1–30 teaching series. Day 25 occurs twice in the source; both source entries are retained.

The source lesson list includes “Style Fancy Buttons: CSS Tutorial (Day 1 of CSS3 in 30 Days)”, “Modal Window: CSS Tutorial (Day 16 of CSS3 in 30 Days)”, “CSS Coffee Cup: CSS Tutorial (Day 30 of CSS3 in 30 Days)”. The classroom retains their original titles and positions. Introductions, supplementary explanations and complete-course recordings remain present whenever they are part of the source. A repeated recording is retained at each original position, allowing the course to be checked against the published teaching sequence.

Visual foundations

Begin with buttons, typography, clipping and form styling. Connect a rule with the element it affects, and compare a visual result before and after changing a property.

Layout patterns

Follow the pricing-table, footer, header and sidebar projects. Identify how the layout relates to content size, and distinguish positioning decisions from visual decoration.

Motion and components

Study the animation, progress, spinner, Flexbox and accordion examples. Explain the relationship between structure and style, and keep a component’s behaviour clear while adding an effect.

Finishing the sequence

Work through feature queries, sliding panels, dropdowns, optimization and the final effects. The original Day 25 lesson appears twice and remains in both source positions.

Who is this for?

This course suits learners who want the specific subject described above and who can work at the stated level. It is also useful as a recorded reference when revisiting a concept or comparing a practice attempt with a demonstrated example. Beginners should give the foundational explanations time before moving to more elaborate applications. Experienced learners can use the lesson names to locate a topic, then inspect the surrounding context before applying a technique.

Before you start

Basic HTML and CSS are recommended. The recordings contain historical browser-specific examples alongside reusable techniques. Practice in a small page and inspect what your chosen browser supports.

Put the lessons into practice

Build a fictional project gallery using original text and placeholder shapes. Apply a reusable card layout, one dropdown or accordion and one restrained animation. Check long and short content and compare two screen widths. Explain which rules create the layout and which add decoration. Revisit one recorded component and make a deliberate variation, then document the property changes that produced it.

Treat this suggested exercise as independent practice provided by WikiFree. Keep a short working note containing your inputs, assumptions, result and one point you still need to check. Revisit the relevant recording when a step is unclear, then attempt a small variation without following the demonstration line by line. A result you can explain and reproduce is a more useful study outcome than simply recognizing a familiar term. The exercise is not submitted to an instructor for grading.

Certificate / Assessment

Watching these public recordings and using WikiFree completion tracking does not award a certificate, academic credit, an examination voucher or instructor assessment. The video curriculum is the material included here. Separate platform assignments, credentials and paid services are not part of video viewing. Use the practice output to review which concepts you can explain, which steps you can repeat independently and which questions need another look at the teaching.

Frequently asked questions

Provider: freeCodeCamp. Videos play from the freeCodeCamp channel on YouTube.