Learn CSS in 15 minutes as an Absolute Beginner

🔔 Subscribe to Coding with Jan on YT:

🧑‍💻 About our Remote Developer Bootcamp:

In Freemote we teach people how to code and help them land their first developer job or become freelance developers.

We can help if:
You are committed to making a change in your life.
You are currently making less than 6-figures/year and want to get there.
You would like to work remotely and independent of your location.
You are looking for a clear, structured, and proven learning path.
You would like to get personal guidance and direct feedback from mentors.
You would like to join a community of other like-minded people.
You want to be in control of your schedule, work, income, and lifestyle.

We’re looking forward to working with you! :-)

🔎 SEO Description
First, we will see some examples of what you could do with CSS. Shortly after we will learn about CSS Selectors and CSS Classes. During that, we will also see how CSS cascades and how specificity determines which rules are going to be applied. Later during the lesson, the CSS-Box Modell is introduced. This will help understand the difference between padding and margin. After that, we briefly talk about CSS Media Queries to write mobile responsive CSS. Finally, we see one practical example, where we adjust the font color of the Product title on a sample product page.

[CodingWithJan]

🎯 get personal advice for your developer career. (free for a short time)

[tomnorman]

OMG, Jan, my dude, thank you. I have been messing around with the code on my shopify store for a few weeks now, trying to make certain changes. I usually manage to do what I want but I have to google basically every step and then it's a LOT of guesswork and trial-and-error. Changing bits of the code and seeing what happens. After watching this video, it all makes so much more sense now. I think everything is going to start getting easier from this point on. Thank you man, this video was great.

[emmab]

Really enjoy your videos Jan. Clear explanations, good examples and everything delivered with such a friendly and positive attitude. Keep it up, you're doing great! 🙂

[CodingWithJan]

Hope you have fun watching. Here is the outline :-)

00:25 - What is CSS
01:20 - Intro to CSS Selectors
05:00 - CSS Classes
07:05 - Intro to CSS Specificity
08:15 - The CSS Box Model (Margin vs Padding)
08:42 - Prototype CSS with the Chrome Developer Tools
12:40 - Your first CSS Media-Query (Responsive CSS)
13:55 - Wrapping everything up with a practical example

[JinnyLiang]

Thank you for this video Jan! Your explanations are very clear and I love how you show the practical application of the CSS. It helped me connect the dots and understand how to apply the usage of CSS to editing certain elements with my Shopify store code! I look forward to watching all your other videos. :)

[nengemann]

Hey Jan, you have a really good way of explaining

[quentinvandevondel]

This is amazing!! When applied to Shopify coding makes much more sense. Great job !

[Hypertj]

You have a new fan! Awesome Jan. Should have seen this from the start! Shopify should buy those video's from you and show it online in the Shopify Compass!! :D :D

[samirsamir]

your explanations are great Jan ! thank you

[toubutey]

Thanks Jan, these type of videos are very helpful!

[iLoveTurtlesHaha]

Great video. It has helped me understand CSS as well as tackling Chrome's developer tools without getting overwhelmed.

I'd like to suggest for future videos that maybe you can show the setting up of the development environment as well as to address naming conventions, for newbies.

[iGrapeProoductions]

Thank you for this video its super clear. I'm going to try and adjust the font for product prices. Wish me luck. If you have any tips please let me know :)

[Sir_Men]

Thanks a lot it really helped me by your help i created a website for my sisters birthday

[josebentomeirelles]

Thank you very much Jan! Your videos are so helpful for me that I must say that you have the best channel for shopify development here on YT.

[mathiasdeceuninck]

Hi Jan, your videos are truly amazing and helping me enormously! Any change you would do a short video on how to adjust the CSS on one specific page but not across your full theme? (Say I would want to get rid of my padding in my specific about us page, but would still want this padding on the other pages such as my contact us page)

Thanks in advance!

[Ohotnikova_]

Wow, these type of videos are exactly the videos I need in my life 👌

[madrasapattinam]

Great video and good pace teaching!! Thanks for showing practical usage of the concept.! Helpful to understand topic. Thank you!!

[celiazhou]

Hi Jan, I love your accent and the way you try hard to explain the use of the code is literally fascinating💯. I wanna ask that if I try to add color and size dropdown up to the "add to cart" button, what kind of code that I should put in, and how can I change to the local developer's environment to find the right place to insert the right code. I majored in law, and this is a totally new area for me, yet I'm interested. I tried to use a review widget, and manually installed it's code to the place I want. Through watching your videos, I might learn a lot. Thanks for your sharing. Have a wonderful day.🌼

[adilzeroual]

Vielen Dank Jan! Deine Videos haben mir viel geholfen und du kannst sehr gut erklären;)

[lizidalcomune]

OMG you are opening a new world to me!!! Thank you so much Jan!! :)