It’s very hard to troubleshoot local issues remotely using just screenshots. I did notice you have a syntax error on the div with the container class in the HTML. It should be… …not ). Answer from lasjorg on forum.freecodecamp.org
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
My CSS isn't working - HTML-CSS - The freeCodeCamp Forum
June 5, 2022 - Tell us what’s happening: t The effects of my CSS isn’t showing even though i’ve linked my CSS to HTML. This also happened on the previous project where i had completed my HTML codes, who knows what’s wrong? Describe your issue in detail here. **Your code so far** /* file: index.html ...
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
HTML and CSS not showing - HTML-CSS - The freeCodeCamp Forum
August 5, 2024 - I’m experiencing a problem with my FreeCodeCamp account. When I access the coding challenges, neither the HTML nor CSS code is being displayed. I can see the instructions, but I am unable to view or edit t he code. H…
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
CSS styling not working - HTML-CSS - The freeCodeCamp Forum
December 17, 2021 - Hello, I’m working on the personal portfolio project and I’m running into an issue in the “contact section” of my page. I am trying to style this section but none of the css selectors are having any effect on the html I’…
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
CSS Not Working -- Codepen - HTML-CSS - The freeCodeCamp Forum
March 20, 2021 - I’m working on my second project (Survey Form) in the Responsive Web Design curriculum and have completed the HTML for it. However, when I attempt to add CSS to the CSS processor, it won’t run. Is there an issue with my …
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
External CSS File not Working - HTML-CSS - The freeCodeCamp Forum
January 12, 2025 - I’m trying to understand the structure and syntax for writing external CSS files. I have an HTML file and a CSS file. The HTML file is in a project folder. That folder also contains things I plan to use that will be p…
🌐
Reddit
reddit.com › r/freecodecamp › html is fine, css is torture?
r/FreeCodeCamp on Reddit: HTML is fine, CSS is torture?
July 3, 2024 -

I've started the HTML and CSS course recently, and while HTML is understandable and nicely presented (in my opinion), CSS is absolutely confusing to me.

Most of the exercises seem like just rewriting the code given with no rhyme or reason, like "oh, this element looks bad, let's give it padding, margin, and text-align" (looked good to me anyway). And therefore none of it sticked, I'm at the tribute page project and I dread setting this stuff up, I still don't really know which property does what, and some of the steps in the tutorials are like "oh, you should have just used this command you've only seen once (or never) before".

Am I alone in this and doing something wrong? Or is the CSS part a bit lacking? If it's on me, how can I get the most out of it? Doing the previous project, I copied over some of the CSS stuff from previous exercises and simply gave it random values until it looked right, how do I make it so that I remember and know how to use this stuff?

Can anyone recommend some nice courses to supplement FCC CSS? Preferably free or cheap, I already found a page that shows visual reference for each of the properties, and it's pretty nifty

Top answer
1 of 16
11
I am currently finishing up the Responsive Web Design certification, and I've had a lot of the same issues. The course does a lot of "just do this" without explaining exactly what is happening. And yes, I've also had to look up functions or syntax more than once because they just dropped it in without it being in a prior lesson. One thing that has been helping me a ton, though, is that I have VS Code open on my other monitor. I do the step in my VS Code and then copy-paste it into the prompt. Then, as it goes, I make it my own. So I have 20 or so web pages that are my own, my own topics that are important to me, with my own information, with my own formatting. It makes it much more engaging, and I feel, helps me learn what is actually happening. One lesson, changing something actually broke my web page, and figuring out how to fix it helped me learn a lot. As an amateur coder, I am certain that the reason why "tutorial hell" is a thing, is because the tutorials just say what to do without explaining why. You can follow along and feel like you've accomplished something. But then if you were asked to build your own project from scratch, most people would be lost. By replicating the lessons as I do them, I'm doing twice the coding, and customizing my experience and learning.
2 of 16
9
CSS is your first taste of something closer to a true programming language. HTML is a form of document structure syntax. It’s got more in common with YAML, XML, JSON, etc than it does with JavaScript, python etc. CSS is a declarative programming language. This isn’t an easy concept to explain - but basically rather than programming exactly the steps to change the colour or size of an element, you declare what you want and then CSS itself takes care of the details of figuring out how to actually accomplish that. Most programming languages are imperative - you need to explain in code exactly how you want something to happen. It’s the difference between saying “I want to iterate through each element in this list of html elements. For each of the children of a given element, I want to find all elements with an H1 tag and then centre align them and make them blue”, and saying “I want all header elements in this parent element to be center aligned and blue”. So the trick is learning how to declare what you want to happen in a way that is understood by the CSS engine. This is a nuanced process that does take some degree of trial and error, alongside referencing documentation. The value in learning this is twofold. Firstly, CSS is your first introduction to a form of abstraction - thinking about a document as something that can be manipulated and altered through a small set of declarations that affect all or parts of the document. Wrapping your head around this is essential for working with JavaScript. Secondly, declarative languages are everywhere, and they’re extremely important to become familiar with. All databases use declarative languages for running queries against them, whether they are relational, columnar, document oriented, graph or any other exotic format. The whole thing of needing to use a command you’ve never heard of before is also something you will encounter continuously as a programmer. I’ve been doing this professionally for close to a decade now and I still find this almost daily. You cannot and will not know everything about any language and it’s important that you accept this early. You need to get comfortable with the notion that you will have to rely on documentation and external knowledge bases to complete any programming task.
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
:nth-of-type(1) css not working - HTML-CSS - The freeCodeCamp Forum
October 10, 2024 - I have two empty divs name , in my html code since they’re same I tried to select the first one using empty:nth-of-type(1) but it didn’t do the job, the styles I added were ignored. I was expecting using empty:nth-of-type(1) will let me control the css of the first empty class div but it ...
Find elsewhere
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
CSS not working in HTML, help please - HTML-CSS - The freeCodeCamp Forum
March 31, 2018 - This is my first attempt at coding and I do not understand why the CSS is not working. As you can see, I used CSS selector to style an element and as well as classes. However, when I load the .html, classes do not work but the element does. Can someone point me to the right direction so I can ...
🌐
freeCodeCamp
forum.freecodecamp.org › t › my-css-not-working-why › 340284
My css not working why - Page 2 - The freeCodeCamp Forum
January 13, 2020 - but you said you have only one file, if you have only one file then the html file should contain your css
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
Why solutions are not working? - HTML-CSS - The freeCodeCamp Forum
November 24, 2021 - Tell us what’s happening: Describe your issue in detail here. **Your code so far** <style type='text/scss'> @for $j from 1 through 5{ .text-#{$j}{font-size: 15px * $j;} } </style> <p class="text-1">Hello</p> <p …
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
Css not working for main tag - HTML-CSS - The freeCodeCamp Forum
September 1, 2018 - I’m styling but it’s not working for my main tag. and I don’t know how to get both HTML and CSS in this topic. I put them in a zip file but I can’t drag it in. Your browser information: User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) ...
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
CSS problems with your program - HTML-CSS - The freeCodeCamp Forum
July 27, 2018 - I tried to do the CSS section and from the start, the colors need to be changed so I changed them to red or blue or whatever and even used the forum to verify my answers tried to send out the problem on the forum and i’m being denied because i have to use the forum more? how do i fix your problems? the code i did was right and even found the right answers on the forum that matched my answers the text changed to the right color and all the other check boxes are selected but it fails me due to the...
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
Stylesheet not loading - HTML-CSS - The freeCodeCamp Forum
August 16, 2024 - I am working on the JavaScript cash register project. I have `` `` in the head of my HTML. I tried "/styles.css" and "./styles.css" with the dame result: the stylesheet is not applied. Is the stylesheet for that proj…
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
CSS works in FreeCodeCamp, but not in VS Code - HTML-CSS - The freeCodeCamp Forum
June 1, 2023 - I’ve faced this problem and can’t figure out what’s wrong: I have this code in FreeCodeCamp online: HTML part: · P.S., once I’ve applied: position: absolute; top: 0; left:0; it would work and show #back-wall div. Anyway, I’d like to hear why it hadn’t work before that)) · I’ve ...
🌐
freeCodeCamp
forum.freecodecamp.org › t › style-css-not-working › 353604
Style.css not working - The freeCodeCamp Forum
October 20, 2019 - I need help. The style.css doesn’t apply to the html page it is intended. Fyi, both files are in the same directory. I also tried clearing the browsing data(cache) but it doesn’t solve the problem. index.html <!DOCTY…
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
CSS Selectors Not Working on my HTML Code - Help - HTML-CSS - The freeCodeCamp Forum
January 27, 2021 - Hello, I am newly active and I am practicing coding as I learn. I wrote these lines of code on my Notepad++ and MS Notepad editors and the end result on the browser won’t reproduce all the selectors within my style tags…
🌐
freeCodeCamp
forum.freecodecamp.org › t › all-css-not-working-only-in-mobile › 336259
All CSS not working only in mobile? - The freeCodeCamp Forum
December 27, 2019 - Hey y’all im back with some crazyyyy problems again! I just deployed a simple site for a friend of mine, its my first one (yayy)! pulled it up live in Chrome, looks great, and its all working BUT NOT ON MY PHONE 😵 yes, i have mobile friendly CSS in there, but for some reason my iphone 8 isnt displaying ANY CSS at all, only the HTML! the css is linked and in the same folder on Cpanel, and it shows it on PC. what kind of strange thing is this? obviously dont have Console on my phone ...
🌐
freeCodeCamp
forum.freecodecamp.org › html-css
My CSS is not working - HTML-CSS - The freeCodeCamp Forum
April 15, 2018 - Hi there, :wink: My first post ever. I have made this website but my CSS does not work. I cannot understand why. HTML seems to be corect. Please advise. I want the website to show neatly lined up not like scattered ar…