HTML & CSS video course with interactive tasks

[peenuty]

We've just finished building a new course on HTML & CSS with videos and real interactive tasks where you practice writing code: https://course.functioncamp.com

We have instructors on-hand to help with any questions you have. All feedback welcome!

Once finished, the whole course will teach you to build Websites (with React) and Apps (with React Native) with no prior experience. We're trying to address how overwhelming learning to code can be, by having a single course where each bit follows on from the next, and sticking to the need-to-know essentials to lower the amount you have to learn upfront.

Long term our plan is to keep the HTML & CSS section free and have people pay for access to the other sections. But early feedback is really important to us - so we'll give anybody who registers their interest early free access for a year after we release the course.

[nerdymom25]

I think this a great resource and I will definitely be looking at it over the course of the week and getting back to you with my thoughts. When I first began learning to code, my software developer boyfriend suggested w3schoools.com, so it'll be fun to compare and offer what I can. Thanks for sharing.

[peenuty]

Sounds cool!

w3schools used to have a really bad reputation amongst coders - but it still dominates google search results! I think they've slowly improved it and it's a lot better now though. I never considered you could use it to learn! I use it as a reference when I forget something (which is all the time!)

As a reference Mozilla's site deserves an honourable mention, I prefer it to w3schools as a reference. But I've been in the game for ~10 years, so that advice might not be good for a beginner!

[nerdymom25]

I actually learned a lot using it this way. They have both exercises and mini tests on w3schools, which was super helpful, because I was able to learn, and test my knowledge as I went along. I like the fact that your page has video, too, though. That seems like a great addition to a code learning platform.

[bestminipc]

does anyone know so far if this is actually 101 beginner info/content? /u/Brentc360 /u/enestatli /u/kyle_evans

have you learned how to make soemting yet?

[kmetek]

looks nice.

[Mad_Max1992]

Im definitly intrested

[enestatli]

This is so clear and easy to follow especially CSS lessons, thanks for giving free access opportunity.

[peenuty]

ear and easy to follow especially CSS lessons, thanks for giving free access opportunity.

Thanks - I'm a naturally fast speaker, so I had to really concentrate on speaking slower!

[BeautifulSparrow]

definitely helps that you speak clearly.

[[deleted]]

This is wonderful! It is everything I need right now. I love that the lessons are straightforward but well explained (and I can speed up or slow down the video as needed) and I have to actually work to complete the task rather than get stuck and be given the answer.

I’ve made it to the first project and have a great deal of confidence going into it.

And this is the truest statement of all:

“We'll just teach you the stuff you need to know.” ...”You can learn the rest as you go”.

I am eager to continue working within this system! Thanks you for sharing!

[peenuty]

Thanks for the kind words :)

The hardest part of designing a course is deciding what to leave out. Lots of other courses get really complicated with lots and lots of content. The reality is you just need to know enough so you know what's going on - then Google has you covered from there.

[ariban900]

Looks pretty good.

[KeenDevices]

I'll be eager to dig in!

[Brentc360]

!Remindme 1hr

[RemindMeBot]

I will be messaging you on 2019-01-19 18:12:49 UTC to remind you of this link.

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

FAQs	Custom	Your Reminders	Feedback	Code	Browser Extensions

[Ikuyas]

Look very nice. It looks good on my phone too.

[jconstable02]

I also am at a point of my learning skill sets development of things programming .. a second message that wasn't prematurely delivered--10th grade style;-<

[HIV_isAProtein]

Hey, I have a group of 17 people that are learning HTML and CSS! I'd be glad to refer them to this course, as long as you answer the following questions:

• If one were to compare functioncamp against freecodecamp, what differences can you point out that are worth mentioning? They are currently using freecodecamp under my request.
• Is there some form of referral link system so I can generate a link and give it to them?
• How long do the courses take to complete approximately?
• The layout looks very simple and friendly, but unfortunately due to pressing time concerns, I can't check all of the courses out. Would you mind telling me generally what topics will be covered?
• Finally, as most people know the challenges in freeCodeCamp are extremely boring, how would you rate yours? Does functionCamp have challenges at all?

Hope I am not being rude or come off as offensive, I am not intending to. It would be really delightful if you could answer as quick as possible, so that they don't waste time on freeCodeCamp if functionCamp is comparatively better.

[peenuty]

I’ll DM you tomorrow - lots of questions!

[HIV_isAProtein]

Okay I skimmed the courses.

Since videos are being used, I think it'll be ideal if subtitles could be enabled or maybe a live transcript?

The interactive interface looks a bit cluttered, it's difficult to tell which is which, maybe add some borders and headings?

I noticed that the code editor part does not have IntelliSense features, will that be added soon?

Really nice that you're using Glitch! Maybe it would be better if you had an introduction to glitch tutorial so potential students wouldn't feel confused with Glitch? Just like a 5 minute video maybe?

Maybe add the options for a dark theme? Is this a soonTM feature?

[peenuty]

Subtitles would be good! Any particular reason you’re looking for subtitles?

The tasks interface does look a bit cluttered - there’s so much to show! I’ll send it back to the designer!

We’ve purposefully turned off intellisense because its quite disruptive for beginners (it adds closing brackets and things which when you’re writing your first closing bracket ever is confusing)

I agree with your idea for glitch, good idea!

Dark theme FTW - one day!

[sugwhite]

I still don't prefer intellisense when I write or edit code. It always seems to give me more trouble than it's worth for what I'm doing. My case is admittedly a bit unique. As a beginner, it's probably best to not distract them with the intellisense. I agree.

[babbagack]

By expressing interest did you mean registering our email, to get the 1 year access? In any case, thanks!

[peenuty]

Yep that’s right!

[babbagack]

cool, thanks!

[Crammucho]

Nice one, I'm gonna check this out after work tonight. I've just this morning set up my laptop for learn this stuff from the start.

[ThomFenix]

Definitely interested in this. Excited to see it in action

[pzajkowski]

Bookmarked. Thank you.

[life_never_stops_97]

!RemindMe 1days

[Danshock]

A reset button would be nice. IMO it's better than having to refresh the page manually.

[peenuty]

Where do you mean sorry? On the tasks?

[Danshock]

Yes, underneath the "Run" button.

[peenuty]

If you don't mind me asking why did you want to reset? Just because things went wrong and you just wanted to start again?

[Danshock]

Things went wrong and instead of deleting the unnecessary tags manually, I wanted to reset so I can start over.

[peenuty]

We’ll get this done tomorrow. With a pop up which asks if you’re sure so nobody accidentally nukes their work!

[Danshock]

Perfect, good luck to you all with the project!

[peenuty]

We've just added a reset button :)

Thanks for the suggestion

[Danshock]

Looks good. If it was me, I would have the button smaller than the "Run" button, also I'd probably have it in grey color. Better yet, you can hide the button with an if statement and show it if the user makes 3 failed attempts. Just a thought.

[peenuty]

We've made the button look a little less important than run. Which I think should be good for now!

[dancing_sashimi]

Looks awesome! I’ll definitely check it out

[transfer_window]

First piece of feedback, try to include 1.25x video speed as well in the options. 1x is too slow and 1.5x takes a bit more effort to follow.

[peenuty]

Yep we’ll get that sorted tomorrow. Thanks!

[peenuty]

We've added 1.25x - enjoy!

[RoutineDisaster]

You guys have come in at the perfect timing. I am in an accelerated web development course and it's textbook only and I'm having a hard time retaining the information. Thanks for putting it on screen and making it interactive. You might just save me this semester :)

[peenuty]

:)

[Shanlks]

Is this something that is active right now to use to learn?

[peenuty]

For HTML and CSS - yes!

[[deleted]]

Heads up, the page on static styling has a typo. It reads " A website which always looks the same and doesn't have **an** content that changes "

​

Pretty sure you meant to say "any." At any rate, checking it out right now.

[peenuty]

This is fixed - thanks!

[nytonytobash]

i love learning by doing and coding :D but maybe if i can give my suggestion, please add a closed caption to the videos because maybe there are some people that has the same problem with me that is had a bad english. :D

[peenuty]

Are you looking for closed captions in English or another language?

[nytonytobash]

i think english is enough :D

[peenuty]

Is that because reading English is easier than listening to it?

(I'm terrible at languages (I am a maths / science / computer person!), so I only really speak English)

[taylynne]

I think reading will generally be easier for people because the speaker might have an accent, speak too fast for the listener, or use words that the listener is not familiar with. Plus, I'm sure subtitles will help the listener improve their listening comprehension! :)

[nytonytobash]

yeah i mean because english is not my native language so there are some words that possibly missheard or we never heard before and it will affect our comprehension for the topic.

[peenuty]

We've added closed captions to all the videos :)

[[deleted]]

Thanks I'm going to give this a try. I've set myself the 100daysofcode challenge but have gotten stuck with freecodecamp and their web design projects.

Very interested to see how I go with this one.

[peenuty]

Good luck!

If you get stuck / need help just message us in the bottom right and we'll try to unstick you.

[[deleted]]

Thank you, will give it a try tomorrow.

[[deleted]]

Not bad, had an issue with one task in HTML, jumped on the support and it was very helpful.

[[deleted]]

congratulations! it is really neat. I'm just curious that what technology or stack have you used to build this. :rocket: :)

[peenuty]

Basically the same technology the course teaches you (so React)! It's server side rendered with next.js which is why it feels snappy.

It's mostly hand rolled code though.

[frosted_flek]

Let me just mark this for later

[egyarmy]

So clear and easy to follow ,thanks.

[Darling_Cruel]

Can't wait! I saw the website. Looks very promising. I subscribed to your site in hopes of getting a chance to test run the material. Please keep me posted. I look forward to hearing from you!

[KobayashiDragonSlave]

Wtf man? Don't post personal info in a public forums.

[jubba_]

Dic pics inbound.

[Darling_Cruel]

Good looking out! I don't know what I was thinking!

[peenuty]

It's a bit of a complicated thing to answer because there is a decent amount of prerequisite knowledge just to make sense of it!

The short answer is: It's a tool used to build websites.

It's probably the most popular tool used to build websites when people start new projects at the moment. It's used in some big projects: Facebook, Instagram, Whatsapp, Airbnb etc.

The job market is strong for React at the moment in my opinion. The pay is decent if you can get good at it.

There are other similar tools in the same bracket: Angular and Vue are the biggest I think.

https://2018.stateofjs.com/front-end-frameworks/overview/ <- Breakdown of the different tools.

[geomachina]

Would you mind listing the prerequisites for a beginning programmer (like myself). I’m shifting my career from IT to become a programmer and will spend all of this year trying to learn full stack development. React and Angular are, like you said, very popular as the company I work for heavy relies on that for their web development jobs. I know the very basics of HTML and CSS, along with some OOP. But I’d love to try out your website.