Frontend Development Course - Create a Blog with HTML & CSS

Improve your HTML and CSS skills by creating a blog in this frontend development course.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Intro & demo
⌨️ (0:04:24) Setup
⌨️ (0:05:56) Header - HTML
⌨️ (0:14:58) Base - CSS
⌨️ (0:25:51) Header - CSS
⌨️ (0:35:15) JavaScript events
⌨️ (0:49:30) Search bar - HTML
⌨️ (0:52:18) Search bar - CSS
⌨️ (0:58:57) JavaScript events continued
⌨️ (1:03:15) Featured articles - HTML
⌨️ (1:08:37) Featured articles - CSS
⌨️ (1:29:20) Quick read - HTML
⌨️ (1:34:59) Quick read - CSS
⌨️ (1:38:20) SwiperJS
⌨️ (1:43:43) Older posts - HTML
⌨️ (1:47:41) Older posts - CSS
⌨️ (1:51:34) Popular tags - HTML
⌨️ (1:55:20) Popular tags - CSS
⌨️ (1:58:04) Newsletter - HTML
⌨️ (2:01:25) Newsletter - CSS
⌨️ (2:02:29) Footer - HTML
⌨️ (2:09:23) Footer - CSS
⌨️ (2:15:17) Blog post - HTML
⌨️ (2:24:22) Blog post - CSS
⌨️ (2:32:42) Media queries

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

--

[juliocodes]

Thanks, Beau, it was a pleasure creating this course for the FreeCodeCamp community. I hope you all find it useful!

[jjjessee]

Eternal newbie here. This is one of the clearest process productions I've encountered. Easy to code along, sraight forward development, well planned and great result. Good Job! Thanks!

[faatimabah]

Monday 27/06/22 I started my 12 Weeks journey to become Web developer starting with this video, I will be learning to code for 4h everyday for 3months and hopefully by then, I would be a confident web dev... I am documenting my journey on my youtube channel.
Good Luck everyone👍🏽 we can do it.

[tomevans]

I've only watched 20 minutes of this but I can already see that this is one of the best tutorials of its kind. Thanks Julio. Your channel will soon be massive with your skills.

[hiwayshoes]

This was a wonderful project, Julio! It took me 4 days to make it through, and I did, lol…. Cheers 💖!

[weirdeyez]

2 tips for everyone watching:

1. If you are struggling to keep up, watch at 0.5x speed.
2. If you are getting a favicon 404 error in the beginning when running "live-server .", put this next line in the head section of your index.html file

<link rel="shortcut icon" href="#">

[kevyyar]

This is beautiful Julio good job as always!

[MrWordsmith]

Thanks Julio and FreeCodeCamp, this video was awesome. I do feel like you might shoot through content a little fast, since I'm still relatively new I like to save and have a good look at the effects of styles fairly regularly, and I found myself just frantically banging out bigger than normal blocks of code as I was trying to code along, so there was A LOT of pausing to catch up! Anyway I really appreciate the effort you go to to create content like this, I'm looking forward to watching more of your videos!

[amarful]

This is great! It helps me alot to learn html css and js.
Thank you so much!

[onyedikachiozoani]

Just finished the course today. Thank you a lot for this. It was wonderful

[Neil_Jordan]

Thank You FreeCodeCamp & Julio! I completed this tutorial, I´m going to continue doing the next projects that you have in your channel :)

[thedapperfoxtrot]

This is very timely! I'm creating a personal site for bootcamp, and this will be a great feature!

[EWUZIFLOW]

Thank you Julio Codes. I am impressed.

[EWUZIFLOW]

Thank you Freecodecamp for sharing this great tutorial.

[heshort]

Thanks. I hope there are more explanations on the structure and organisation of the numerous classes and rationale behind them instead of just reading what you are coding.

[thaboyjuicee]

I really needed this after finishing fcc courses

[estebangodoy]

Dude, I wish there was a tutorial to become a blockchain developer in Polkadot :) much love guys 😊👍🙏

[keithchua]

another step towards my software developer journey! thanks freecodecamp!

[brianbishoptv]

Thanks for doing this video. It was a lot of fun.

[griffinkirkland]

Julio Codes didn't make the website mobile responsive, most mobile are 320px to 480px, he started media queries from 700px, wanted to compare his GitHub repo to the video's project, it's not available.

Anyways, I made it responsive for mobile and a couple of other things

I even loved it more, because of the incompleteness of the project, it made me rack my brains

I love that.