Frontend Development Course – Create a Blog with HTML & CSS

Ecommerce Empire Academy

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

✏️ Julio Codes created this course. Check out his channel:

💻 Code:

🔗 Remix icons:
🔗 SwiperJS:

⭐️ 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

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

29 thoughts on “Frontend Development Course – Create a Blog with HTML & CSS”

  1. The Dapper Foxtrot

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

    1. The Dapper Foxtrot

      @Satya Ranjan It’s a popular way of becoming trained instead of attending a formal university program. Usually done in a few months!

  2. Daisy Manmohan Singh

    Sir you are on fire 🔥🔥🔥 I can see before I complete one I would have a week stuff to learn.

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

    1. I don’t know how to download the materials of this course and follow up with the tutorial😢🙏🙏🙏🙏

      I really need help

  4. Jonathan Bedoya

    Thank you very much for sharing, I’m currently working in Stanley Black and Decker in Customer Service, and I’m studying Software Engineer and I am practicing with this. THank you very much.
    by the way, what is the name of the Theme you are using in your VSC?
    Thank you.

  5. Good Job. I’m learning now Angular and I’m still beginner. can I use some of what you did in Angular project?

  6. Excellent content so far, thoroughly enjoying it (~30mins in), but my only advice would be to slow down a bit to allow people who code along to check if they’ve written the code right and check it works as yours does. Sure, we can pause the video, but there’s almost no breaks and it’s hard for a relative newbie to follow along and see exactly what changes the code is making to the page. I have an issue currently where mine doesn’t quite look the same and I can’t really tell at what point the error may have been made because any reference points feel swept over a little. Just my two cents of course, I just feel like a couple of things need to be slowed down and explained a little more… or perhaps I just need more coffee instead!!

  7. A crash course about setting up react native with rnfirebase wpuld be really appreciated.

  8. Esteban Godoy

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

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

  10. hey, thanks a lot for the content. It was excellent as an extra, like adding news and articles information but using the ‘json’ endpoint. Thank you very much

  11. CHITUS💖⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

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

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

  13. Good job. I do feel like you go a bit too fast. Even though I could pause there is often not enough time to grab my remote and pause the video to the spot that I need. Suggestion. When finished with a part (like all of the anchor tag styles) pause for a few seconds before moving on.

  14. Francisco Hernandez Sabatino

    Thanks Beau, it was a great tutorial, I learn a lot!!
    And thanks FreeCodeCamp for this content, I hope a I can participate making a tutorial in the future

  15. Michael Smith

    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!

  16. 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.

Comments are closed.