Responsive Web Design Updates

…and that one is on me for not reading the post properly. I was so used to CodePen I forgot it links everything automatically.
:sweat_smile:

When you type real html code, you would have to use the link element to link css.
You could use the style element, but there are a lot of advantages to using an external css document such as same styling for the whole website.

The new update makes us use the link element, which will help us to be a better dev.

I agree! I played with making a neocities a while back and external CSS is really useful for consistent styling. I think having to put in the CSS link manually is a good habit to keep.

After I submit the last project I will do the new curriculum for practice. More practice is always good. :smiley:

1 Like

Hey, I really wish you would’ve added a notice or something on the legacy course to warn users, it was kind of disorienting logging back in today and finding all my “progress” undone.

I also kind of miss having examples and concrete steps like in the legacy version. They help illustrate the example a little better than the current version, but I guess it wouldn’t fit since the lessons are in the code itself now. :frowning:

2 Likes

Thanks for all the effort and hard work!

I have a question regarding the use of the <link> element after this update:

  • For the solution on this step to be accepted, FCC requires the user to write the element as follows <link/>

  • I’ve looked through MDN doc and cannot find an example/reference in which the <link> is written that way.

Is this a bug or a practice I’m not aware of?

It’s a required piece in actual development. Codepen ‘helpfully’ does it for you.

Hi! new to the scene. I finished my HTML part on the last curriculum and I felt like I learned lots with the example before the task and the brief explanation.

I decided to re-do all the steps again in the new curriculum and I swear that if it weren’t for the last version I wouldn’t be able to go step by step, and move forward. I’m assuming this will be a bit harder for beginners …

Overall, can’t say anything else cuz I don’t know about anything else xD

1 Like

UPDATE: New version is very organized and has a few elements and new info, I haven’t seen before. I like it! Thanks for the very hard job and for making it free and beautiful. LOS AMO!

I actually had an extensive career in instructional design and technology (20+ years, to include earning a masters and phd in the field) prior to becoming a web developer. So, this feedback is coming from both of these perspectives.

Since FCC came out (unfortunately, that was after I had already made the transition to web dev), I’ve pointed a lot of novices and junior devs to FCC. As a result, I’ve also been able to see and hear about their experiences as the curriculum has evolved and expanded.

I just started teaching a web design & development course at one of my instructional technology alma maters, as in this was the first week of the course. As part of this course, I’m using sections of FCC to introduce my students to certain topics. To provide rough time estimates for my students, I’m also going through all the exercises myself, so I’ve spent several hours in the last 8 days doing FCC exercises.

My observations on the new design:

  • In general, I think the project approach is much more cohesive and will be much more motivating.
  • The individual exercises in this new project based approach will definitely help reinforce topics that have been previously covered. (Something that was noticeably lacking in the previous approach.)
  • While better for retention, the repetition in the project based approach is less conducive to providing a quick overview of topics. (Enough so, that I’m actually going to have my students do the legacy version of most topics. However, I’ll definitely recommend the project-based approach to folks trying to learn on their own.)
  • The reduced instructions and examples is less overwhelming initially, but it also leaves users with significantly less guidance at exactly the time they need guidance.
    The lack of additional assistance and tips only exacerbates this paucity of instructions and examples. Hopefully, the “Ask For Help” button will help with this, but with the reduced instructions and examples, it would have been much better to have the “Ask For Help” button in place and working before switching to the new design.
  • As someone with visual challenges, I can’t believe I’m saying this, but the triple pane was better. It allowed scrolling through the instructions and the code, while still being able to easily see the other. Yes, it felt crowded on occasion, but it was still very usable —even at the absurdly increased font-sizes that I need (unlike other tools that I have to use, every day, in my day job - <cough>Jira</cough>).
    I’m taking an educated guess that the inline instruction was an attempt to provide something comparable.
  • I really, really, really, really don’t like sparse instructions being inline in the editor. Mind you, I’m extremely familiar and comfortable with html & css, and yet —the disconnected/interrupted code was like being handed a hammer half-way through someone else’s ongoing swing and being expected to take the hammer while continuing the swing of a hammer uninterrupted and with full force.
    Seeing the surrounding html/css , with comments bracketing the area that the learner should be coding in, is much more in keeping with the real world and it also provides critical html & css context.
  • Separating the css into its own file, and requiring learners to add all of the html, including the DOCTYPE and links to css file is definitely an improvement. However, it is jarring to have exercises switch between them without having distinct and obvious cues about the switch (this is definitely exacerbated by the inline instructions, since they impede seeing the existing html/css context). I have no doubt that the files being switched —without clear context or other cues— is going to confuse a lot of novices.
  • It really would have been nice to have a banner, or some other type of notice, on the curriculum page that simply indicated that a change was coming/had just happened, provided clear instructions on how to access the “legacy” version, and included a link to this post, or a blog post, about this new version.
2 Likes

HI @metasean !

Welcome back to the forum!

Thank you for taking the time leave this well thought out and helpful feedback.

The ask for help button is coming. :slight_smile:

With the old curriculum, students were able to do the individual challenges but when it came to the projects, students were confused on how to connect their html to css.
Often times students would build projects with all of their html and css in one file, because they didn’t know how to link a css file to the html document.

The goal of the new design was to help students see how a real web page was built and hopefully bridge the gap between the lessons and the certification projects.

There is a PR that address this issue.

But moving forward when the other courses are released, this will be something that is added to help users with the new change.

If you think of any other pieces of feedback, you can also create issues, or suggest feature requests on freeCodeCamp’s github page.

I think I head plans of eventually adding an index of topics as well to help with quick reference?

1 Like

Hi. I have built the Product Landing page, which checks out all the tests on the old editor(codepen) while some tests fail on the new one, with the same code. Could you please help?

Here is the codepen:

Hi @akshaysrivastava0311 !

Welcome to the forum!

Did you link your css file in the html document?

<head>
 <link rel="stylesheet" href="styles.css">
</head>
1 Like

@metasean Thank you for such an extensive and professional perspective. While not being familiar with web design, or instructional technology, I have seen a lot of similar opinions (not as eloquently emphasized as yours) on this rollout.

Considering that the legacy curriculum is still available, I think it can only really be considered a positive that even more was added. But this is my question:

@jwilkins.oboe Are there any plans, or any talks, to ever remove the legacy curriculum—and if there are—will we be given prior notice?

1 Like

Edit: Currently the legacy responsive curriculum will stay where it is for a while.
Where it gets moved in the future, I am not sure because I am not working on that specific team that makes those decisions.

freeCodeCamp has a lot of legacy content.
For example, there are legacy front end and backend projects which users used to have to complete but are now moved to the interview prep take home section.

Thank you so much for this information. I’ve been battling with the old version since two days now to submit my project but to no avail, now I feel relieved seeing this update. Thank you for this.

Ah, correct! I had written it but had another file linked. This seems to solve it. Thanks a lot!

Nice update, good work!!!

Try .flavor, .dessert

I think it 's a bug.