Improve your HTML and CSS skills by creating a blog in this frontend development course.
✏️ Julio Codes created this course. Check out his channel: https://www.youtube.com/c/JulioCodes
💻 Code: https://github.com/jlop007/FreeCodeCamp-NewsFlash
🔗 Remix icons: https://remixicon.com/
🔗 SwiperJS: https://swiperjs.com/
⭐️ 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Are there supposed to be multiple "Sign In" entries in the top right corner?
At 11:19 the icons aren't coming in my website what to do?
15:00
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="#">
Great project. The blog has an awesome look and feel. Now I am eager to learn the backend development aspects of such a project so I can host my own full-stack blog with streamlined updating processes that are similar to WordPress in functionality.
Excellent work as always 👍
Thanks.
What if I want to create a backend for html project, when post from backend it publish to frontend?
The course was great but confusing. i wish you completed HTML skeleton first then start styling so we see the styles coming to life as you move.
my arrow icon for see more is not responsive and it's not center with the text button, i checked everything i could but it is still not fixed
I wanted to try this but it doesn't work to download the file…
Julio!?
I heard "Coolio" ho damn
Thank you & wish you all well 😃🌟✨🙌
15.03.2023 08:12 pm ist
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.
1:31:42
can follow these institutions to build my own website through watching this tutorials
Anybody know why JavaScript isn't being updated on the live server? , My html and CSS files are being updated but my JavaScript files aren't .
Thanks for doing this video. It was a lot of fun.
So how do I make the search bar work
Thank you Julio Codes. I am impressed.
Thank you Freecodecamp for sharing this great tutorial.
How can get the images of the code?
Can I use it? for free?
Really good content, nicely explained for beginner to intermediate levels, love it!
There's just one thing I can explain/understand. In the swiper, when you are on the first slide, if you try to go left, it seems to direct you on the index.html samg when you try to go right when you are on the last slide.
I can't seem to find any anchor for this so I guess it's in the js part but care to explain why/how to fix it so it just blocks and you can't go back if you're already at the end ?
for some reason Swiper doesn't work for me at all, it always show 4 images per slides
1:19:27
Thanks, Beau, it was a pleasure creating this course for the FreeCodeCamp community. I hope you all find it useful!