Freecodecamp: [beta] CSS Pseudo-classes

Created on 25 Feb 2017  路  9Comments  路  Source: freeCodeCamp/freeCodeCamp

I was lucky enough today during my phone screen for (junior position) that I knew a bit about CSS's Psuedo-classes, particularly nth-child(n).

I was looking at the beta FCC's curriculum and I don't see anything about Psuedo-classes.

Perhaps we can add more lessons about it to the curriculum?

help wanted learn discussing

Most helpful comment

Hi, is it okay for me to contribute to the curriculum for CSS pseudo-classes/selectors/pseudo-elements?

Based on my experiences coding the projects in freeCodeCamp, these are the selectors i have found most useful:

  • [attribute=value] for accessing elements with custom data (data-* attribute)
  • :nth-child(n) for styling repeated elements (E.g. 2nd-cell in every table row)
  • :not(selector) increases flexibility of selector usage

I would be happy to craft challenges to cover the above mentioned topics if need be 馃槃

All 9 comments

Whats the process of adding to the FCC curriculum? Can a community member make a submission? If so whats the proper way to do so?

@KenzoM thanks a lot for this request, this helps us in identifying what recruiters are asking out there and tuning our curriculum further.

Sorry about the delay in getting back to you.

/cc @freeCodeCamp/moderators Any experts here for a insight on how and what to include?

Whats the process of adding to the FCC curriculum? Can a community member make a submission? If so whats the proper way to do so?

Yes we welcome contributions from everyone, and would be grateful for them, please feel free to create an issue in this repository for initiating a request or https://github.com/freeCodeCamp/CurriculumExpansion, where you can discuss exact content of curriculum in depth.

Once confirmed you can make a pull request to add to the content where by you need to follow the Guidelines for Contributing.

Thanks.

Awesome, thanks for the reply @raisedadead !
I will see if I can come up with other CSS related stuff that may come in handy after my interview this week.

@KenzoM yes - I don't think we cover this important CSS concept. You can create some challenges to cover this (maybe a few of them to drive home how this mechanic works). Please let me know if you have any questions - I'll be happy to help keep you unblocked :)

Hi, is it okay for me to contribute to the curriculum for CSS pseudo-classes/selectors/pseudo-elements?

Based on my experiences coding the projects in freeCodeCamp, these are the selectors i have found most useful:

  • [attribute=value] for accessing elements with custom data (data-* attribute)
  • :nth-child(n) for styling repeated elements (E.g. 2nd-cell in every table row)
  • :not(selector) increases flexibility of selector usage

I would be happy to craft challenges to cover the above mentioned topics if need be 馃槃

@hay-dee Go for it! I would do it myself, but I am busy at the moment, so feel free to take my place 馃憤

@KenzoM Thanks! 馃槃

Just an update. Right now, i plan to insert three short challenges covering the topics mentioned in my previous post. The challenges will be placed right after the Use an id Attribute to Style an Element challenge. The challenges will manipulate elements in the CatPhotoApp as follows:

  • changing sizes of radio buttons using [type="radio]

  • changing color of 2nd list item in the unordered list using :nth-child(2).

  • changing color of 1st and 3rd list item in the unordered list using :not(:nth-child(2))

Any suggestions to improve the challenges, be it content or placement, are most welcomed!

@hay-dee Make sure to include a solution to your challenge in the solution prop of the JSON object. This will be used via npm test and will help make sure the tests your assert work and the challenge itself is solvable. Make sure to use the <code> and <blockquote> in your challenge description so its easier to understand for the user. Also once you complete your challenge and it is merged reach out to users and have them run through your challenge so you can get feedback on your description, instructions, tests, etc. ( I'd be happy to run through it 馃槈 )

Was this page helpful?
0 / 5 - 0 ratings

Related issues

thecodingaviator picture thecodingaviator  路  42Comments

doubleUTF picture doubleUTF  路  45Comments

tomasvn picture tomasvn  路  47Comments

sadathanwar17 picture sadathanwar17  路  66Comments

Ethan-Arrowood picture Ethan-Arrowood  路  56Comments