Senior level CSS developers are so much more than syntax experts

You can spend all the time in the world focussing purely on your CSS knowledge, however, top level front-end development is about so much more than just writing code. It’s about communication, planning and pragmatic execution. I’m going to teach you these fundamental core skills — often described as “soft skills” — which will push you beyond the next level.

These core skills will help you to simplify design concepts and work iteratively with designers rather than the common, and highly flawed approach of static design handover, where you’re handed a Figma file and expected to build a “pixel perfect” website.

I’m going to teach you to excel in this approach as well as introduce you to a more circular system, rooted in efficient communication and planning strategies that will push yours and your colleague’s abilities and output to a level you never thought possible. You’ll learn all of this while also working with the browser, rather than against it.

You’ll learn all of these skills with a real world, guided front-end development project using semantic HTML and modern CSS. This will help you to apply your new skills to your real work and enable you to progress further in your career.

What’s in the box?

• Education from an industry expertYour instructor, Andy Bell has over 15 years of industry experience, and has provided high level CSS consultancy and development for some of the largest brands in the world. Some of these brands include Harley-Davidson, Google, the NHS and Oracle. He’s also worked with smaller, but hugely exciting startups with the agency he founded, Set Studio.More about your instructor
• Learn to build a truly responsive and resilient front-endYou will learn to be the browser’s mentor rather than its micromanager by utilising flexible, algorithmic layouts, fluid typography and space, and progressive enhancement, all whilst working with the most modern CSS capabilities.
• Completely transform your whole workflowFrom creating a sketch-up document where you pull a design apart into organised pieces to using prototypes to effectively communicate oversights, there’s a bucket-load of useful content to change your thinking and enhance the CSS you produce.
• Learn transferable skillsThe core skills I teach aren’t just applicable to writing CSS because they’re highly transferable. They’ll make you a better colleague and help push your career forwards in the right direction.
• Build a stunning website with a full, real world projectTutorials and demos only get you so far in your progression pathway. In this course, we’re going to work through a guided, simulated real-world project that delivers a stunning home page for a brand new, fictional barista academy in London.
• Accessible, mixed media contentThe course content has been written in a way that will make it as accessible and digestible as possible. There are interactive elements, demos and videos included within the written content to really help solidify your knowledge, and most importantly, for it to sink in. All content updates are free forever, including new upcoming bonus content.

We build a stunning website together

There are over 51 lessons, split into 8 modules. We will produce the below stunning website, pattern library and CSS system for a fictional client, Bloom Barista Academy.

About your instructor

Hi, I’m Andy Bell, a designer, front-end developer, design agency founder and the founder of Piccalilli, based in the UK. I have worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world like Google, The NHS, Harley-Davidson and Oracle. I’ve also worked with well-known brands such as BSkyB, Unilever, The Natural History Museum, British Cycling, Capita, Vitality and VICE Media.

Over the years I have worked on both extremely large projects for huge organisations and tiny projects for small startups. This has given me a lot of experience of a large variety of project types. It also means that I’ve worked with a lot of teams of various sizes, each who have their own constraints and goals. Projects I’ve worked on vary from huge design systems, creative campaigns, complex content systems, branding and of course, websites.

I mostly specialise in CSS — whether that is consultancy, writing a course for Google, co-authoring a book on CSS layout, or creating a methodology to help people write better CSS. A big chunk of the studio’s client work involves us applying this experience to help teams write better CSS — often by helping them create a design system.

You can check out my articles on Piccalilli, catch up with me on Bluesky, LinkedIn or my personal site.

Curriculum overview

Complete CSS features 51 lessons over 8 modules. Here’s an overview of the core 6 modules.

• PrinciplesI believe in the impact of soft skills so much I call them core skills. These core skills are the foundation of scalable and maintainable code. This is particularly the case with CSS where designers and developers should work closely together. When they do — implementing strong core skills — it results in simpler, and more useful user interfaces that work for everyone.
• Planning and feedbackJust like with core skills, planning and feedback is fundamental in achieving scalable and maintainable code. In this module, we learn to plan our build while also identifying any problems with the designs so that we can feed those back to our designer colleague, effectively. We then iterate to create better strategies and approaches for the upcoming production build.
• Design prototypingMore often than not, we will be presented with a real ‘head scratcher’ situation in a project. Prototypes are a great way to work through tricky problems in a low risk environment. We learn how to effectively prototype using disposable HTML and CSS, then apply our new knowledge to a difficult layout problem in our project.
• Core buildWith all of the fundamental work completed, we separate our build into Core and Flair passes. The Core build is where we lay the foundations of a solid front-end with global CSS and reusable patterns, using the CUBE CSS methodology. This solid foundation will not only set us up for the more creative Flair pass, but it will also set our project up for the future with a well populated pattern library.
• Flair pass buildNow that we have a solid foundation in place — thanks to our Core build — we can tackle the more creative patterns and nice touches, knowing that we're on very sturdy ground. This is the fun part of the course with lots of handy CSS techniques to learn.
• Page compositionsThe pattern library is now complete and we have a system of reusable patterns to compose page layouts with. All of our hard work comes to fruition within this module. In any pattern library or design system build, being able to very quickly compose resilient pages is a truly great feeling. You will get to experience this in this final, core module, while using our new core skills to work through any designer snags we could be presented with.