Using only HTML, CSS and Javascript | News Website Project

Hey guys, In this video, We will build a complete News Website using only HTML, CSS and Javascript
Websites use:
News API: newsapi.org
Code here: github.com/Anu...
Checkout our Platform: codingshuttle.com
📒 Get Notes here: telegram.me/re...
🧑🏻‍💻 Get Code here: telegram.me/re...
📌 Bookmark this Playlist: • Web Development Course...
🥳 Join our Telegram Community:
Telegram channel: telegram.me/re...
🚀 Follow us on:
Linkedin: / coding-shuttle
Instagram: / codingshuttle_
Twitter: / anujbhaiya716
Hashtags:
#codingshuttle #webdevelopment
Ignore these tags:
html css javascript project
news website
news website html css javascript
news api
coding shuttle
project using html css and javascript
javascript project
html css js project
html css and javascript project
blog website html css javascript
anuj bhaiya
anuj bhaiya web development
html css project
javascript projects
html css javascript projects
projects using html css and javascript
js projects
web development projects
html css js projects
javascript api project
website using html css and javascript
anuj bhaiya news app
javascript
website project using html css javascript
news app using html css and javascript
html css and js project
website project using html, css javascript
code shuttle
api based projects
news app anuj bhaiya
news website project
javascript projects for beginners
weather app using html css and javascript
api projects
coding shuttle web development course
news api javascript
js project
news website kaise banaye
project html css javascript
javascript website project
news app project
api project using html css javascript
javascript full course
front end projects
front end projects using html css and javascript
html and css projects
web development project
frontend projects
news website using html css and javascript
web project using html css and javascript
website development using html css and javascript
web development projects with source code
javascript tutorial for beginners
news website anuj bhaiya
web development anuj bhaiya
api project
e commerce website project in html css javascript
html css js website project
portfolio website html css javascript
project on html css javascript
website
project using html and css
javascript html css project
blog website using html css and javascript
how to create news website
news website html css
web development project using html css and javascript
website project
anuj bhaiya project
coding shuttle news website
css
html css javascript project in hindi
html css javascript website project
html css js projects for beginners
js projects for beginners
web development
best project using html css and javascript
clone website html css js
javascript tutorial
javascript website
news api project
portfolio website
how to make a news website
how to make news website
html
html css javascript projects for beginners
html css javascript website
html css projects for beginners
html, css javascript projects
small project on html css and javascript
website using html and css and javascript
ecommerce website html css javascript
javascript for web development
js api project
website using html and css
anuj bhaiya javascript
css html javascript project
html css
newspaper website html css
web dev projects
website html css

[@codingshuttle]

Hi guys, I apologise for not being able to upload videos these past few weeks. We have been busy with building our Platform for coders on codinghuttle.com And now it is completed and I'll be more consistent with the videos here. Thanks for supporting me in this time as well ❤

[@sunnykumarpal9679]

Bhaiya please make more awesome websites like this

[@amitdahiya7425]

Bhaiya css jese javascript mai projects kyo ni h , please uske lie bhi kuch projects upload krdo ...... , and please keep uploading these project videos ❤

[@prashant.y]

Koi nahi we understand😉 your hard work

[@aadityaagrawal11]

Please upload more video like this.

[@prabinkumarsahu]

Why this website do not shows news in mobile , I made the complete website , it open in live server but when generate a live link and try to open then the news are not show there . Does anyone here face the same issue

[@yhbarve]

Thank you Bhaiya! I used my own UI in the project. I also made it responsive, and added a 'Go Up' button for smaller displays. Also added Dark Mode.

[@bansal208]

hey can you please share the source code.

[@amansayer4943]

bro you aced it

[@sAuraBhTissout]

bhai api ka key kam ni kr rha h new email me aya h phir v

[@AJ-wf3wp]

can we deploy it ?

[@yhbarve]

@@AJ-wf3wp yeah

[@dibasbiswal3020]

Bhai please continue the series.

[@nitin6096]

we need him here😂

[@anikkoley8464]

Plz aise related project leke aiya

[@prashant.y]

Perfect most awaited video . One again legend on their hard work 1:08

[@shivanshsrivastava5561]

Section are not displaying when go live ???

[@SHARON-BGMI]

​@@shivanshsrivastava5561 Mine also is not showing the contact it's full blank. Any solution

[@NaamNaveen07]

Thanks Bhaiya, for this project; we wish we will see the the greater side of your knowledge in coming days through a lot of projects and consistency as well😊.

[@AJ-wf3wp]

can we deploy it ?

[@adddijain]

bhaiya thank you for this series please make more projects like this and thank u so so much

[@AdityaKumar-pf8mh]

Thank u alot bhaiya 🙏❤️❤️......This is a most awaited video . At a very crucial time u have provided us a project that is enough

[@codermarcos6027]

Thank you bhaiya bohot kuch sikha is project se... Dil se thank you

[@ranatariq8638]

Every beginner wants sch exaplation I am really very grateful and have desired sch more projects like this...

[@avantiverma2811]

hey can you just confirm whether this uses bootstrap to make it responsive for other devices too?

[@ajmatansari887]

bhaiya plzz if possible regular videos daalne ki koshish kriye I'v been waiting for so long for your new videos your way of teaching is absolutely amazing bhaiya thank you so much bhaiya

[@kartiktate6576]

I'm making this project with the help of this video and i fill very confident Thank you sir 😊

[@AJ-wf3wp]

can we deploy it ?

[@programmingsoul4269]

Thank you so much bhaiya this is my first project, 😊😊 Thanks for this amazing guidance

[@abdullahjan87]

Sir Kindly MERN ka course shuru karwa dain. Huge fan from Lahore, Pakistan😇.

[@factoworld9527]

Q bhai pakistan me nhi hai kya web developer ?

[@ankitbhowmick691]

script.js:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach') at bindData (script.js:22:14) at fetchNews (script.js:13:5)

[@aishaashraf7477]

I am getting same error 😅

[@yashsharma-xi5cl]

@@aishaashraf7477 same problem

[@amansayer4943]

thank you bhaiya for this wonderful project i was struggling with java script and with this project i got lot of confidence.

[@parvjain09]

Please bhaiya it's an request ki aap please consistency maintain rakhiye.... please kaffi delay hota ja raha h is wajah se course

[@shagunchoudhary3029]

Waiting for your new video....thanks ❤

[@vikramrajput8622]

Sir me newsapi me JavaScript console me error show kar Raha h mene kai baar recheck ki code correct pr error show karna news show hi nhi kar Raha h

[@icyspecialist]

Bhaiya you deserve billion of subscriber thank you so much♥️

[@prashant.y]

One day this playlist get 5cr+ videos in next year 1:55

[@afzalhasmi3947]

Nice

[@pavithrakumar8748]

thankyou so much sir . this is my first project and i really enjoyed it

[@avantiverma2811]

hey can you just confirm whether this uses bootstrap to make it responsive for other devices too?

[@pavithrakumar8748]

@@avantiverma2811 yes bootstrap makes it responsive

[@pavithrakumar8748]

@@avantiverma2811 hey would you like to work together?

[@avantiverma2811]

@@pavithrakumar8748 yeah sure but can you help me with one thing ... im following the video and code but the changes are not showing up not even the nav bar is proper.. please help.. whats the problem here?

[@avantiverma2811]

@@pavithrakumar8748 can you help me with this thing. the problem is my code is not giving the right display. even the navbar is not appropriate as in video even tho im writting the same code. please help if u can.

[@aakashyadav3351]

OMG itne saalo baad finnally ❤

[@neerajyadav2349]

Bhaiya Responsive Websites ke liye ek detailed video banado

[@janvimyadventures1310]

bhaiya you really help.

[@ahmadwaheed8003]

When i host the web site on git hub pages and open from the provided url it is not showing the news. Please provide any solution many are facing the same issue.

[@utkarshdewan8736]

Same issue. Have you found any solution?

[@Shubham-cx7vj]

same issue please let me know if you found solution..

[@yashdhakad2319]

Bro same issue

[@rkscp7711]

Thank you so much,you really teach awesome 👍

[@babarsheikhbabar6891]

zabardas sir sir isi trahn ki js project or bi video uplod kare plz js concept kafi clear hojata he

[@VarunSharma-sk5os]

plz Bhaiya make more projects like this

[@juishinde9809]

Just completed the project 💯 Thank you soo much bhaiya 🙏 Learnt a lot!!

[@avantiverma2811]

hey can you just confirm whether this uses bootstrap to make it responsive for other devices too?

[@raushanrawat620]

Bhaiya aapka samjhane ka tarika bohot hi achha h love you bhaiya❤❤ Please continue more projects like this 🎉🎉🎉

[@prabinkumarsahu]

Why this website do not shows news in mobile , I made the complete website , it open in live server but when generate a live link and try to open then the news are not show there . Does anyone here face the same issue ??

[@codingshuttle]

The api is not compatible with any other host url other than localhost in the free developer account.

[@krish7305]

​@@codingshuttle bhaiya on stackoveflow people say if we make express js server of it and request api data from there then it will work in host url 😊 pls reply even i made this web responsive i also add dark mode and many more so it will be good for me to hosted it 😂

[@areebahmed1773]

@@krish7305 bro show me your website please?

[@ahmadwaheed8003]

Brother have you solved the error or not?

[@krish7305]

​@@areebahmed1773 bro if I paste link in that that will automatically removed idk

[@AbhishekThakur-hf8fi]

Bhaiya react series start krdo plzz😊

[@bansal208]

Thank You so Much Bhaiya!

[@kunilamanika2825]

Sir, please javascript ka complete course dal dijiye

[@aasthagupta1322]

Sir plzz frontend react ke sath continue rakho

[@ITVishal]

Bass ek cheez aur bata deejiye ki main kaise usko GitHub par deploy karen because sirf navigation wala render ho paa raha h,baaki ka body kuch nahi aa raha h,please tell.

[@prabinkumarsahu]

mine also

[@orBhaiKaisaHe]

Ok bhai thanks🙏

[@ranatariq8638]

Awesome method to tech....

[@i_am_dumb1070]

Will you teach React and Node js as well in this course?

[@rahulgupta2322]

Ni h I think 🤔

[@SuvamTharu]

upload more and more more project using html css and javascript

[@roopkumar6835]

Sir i face this error: { "status": "error", "code": "corsNotAllowed", "message": "Requests from the browser are not allowed on the Developer plan, except from localhost." }. please guide.

[@user-wt3kr3ic5m]

it is helpful and do more like this kind of the website

[@kuldeepchouhan0143]

i face one problem when i open website in vs code it will open and show cards but when i deploy in netlify only site open but card not show help me

[@yashrai2328]

same problem

[@harleen8677]

same problem do u know how to solve this ?

[@mangeshdalvi583]

unable to deploy this website on github.😔😔

[@utkarshgupta3670]

Yes, Please give the solution

[@nitinjaswal527]

made this thanku very much my first major project

[@Mars18542]

I coppied the code from github but its not working just the nav bar display

[@avantiverma2811]

@@Mars18542 hey even im facing same problem tho i did not copy but even after following the video the code is not running properly

[@vithanalameghana609]

​@@Mars18542Hey just add one by one you'll get

[@ReactWala]

I was just thinking about making a project using HTML, CSS and JS.

[@CHANDANKUMAR-sg8cp]

bhaiya deply bhi kiye hai kya website ko

[@trishabhanu1048]

Have any one deployed this project using github pages js is not loading in browser js is loading fine when we open with live server and when js code is made run on js compiler its showing that eror:window is not defined anyone pls help

[@codewithPushpank]

Really amazing,,, i also created this amazing website Source :- anuj bhaiya channel Thank u bhaiya (sir )

[@nishagawade3248]

perfect explanation. thanks for the video

[@AyushSharma-vm1ei]

Thanks alot you really saved my day ...Is it okay to use your code ?

[@s.rcomplex7759]

Sir, my navigation bar and search button are not working, and there are no errors shown in the console log. I followed all the steps you taught us, but I still haven’t been successful.

[@keerthanaaduri]

same here even i have the same problem

[@mohdabdulfareed7871]

Anuj bhaiya please continue

[@eraqibahmad942]

What about full stack developer on KZbin

[@lakshyathedestiny7674]

Bhayya api url kam nhi kr rha https ki jgh http not found kh rha h network m or console error de rha h response m 😢😢 Kya kre

[@aniketankush218]

Great! this is a begginer friendly project. It helped a lot.

[@saimasiddiqui8457]

Bhaiya, I am getting some error Object code: "corsNotAllowed" message: "Requests from the browser are not allowed on the Developer plan, except from localhost." status "error"

[@AnuragSharma-dv6mh]

i' m also phasing this same error

[@Shubham-cx7vj]

same error, do you got the solution?

[@sejalsingh7116]

same error did you find any solution to it

[@sivaraamnatarajan6220]

bro download an live server extension in your visual studio code, then go run the index file with right click -> open with live server then it will eventually run

[@sivaraamnatarajan6220]

bro download an live server extension in your visual studio code, then go run the index file with right click -> open with live server then it will eventually run

[@kumarikavita4052]

Great Explanation Bhaiya!!❤❤❤

[@UP80_RoHit]

bhaiya apka code kaam nhi kr rha hai

[@avantiverma2811]

yeah same i dont know how people are doing it.

[@soniya_naskar]

it showing window not defined.. can you help me resolve this error

[@ayush-ind]

Informative 💯

[@vsrock3409]

finally full project completed

[@CHANDANKUMAR-sg8cp]

bhaiya deploy bhi kiye hai kya?

[@AJ-wf3wp]

can we deploy it ?

[@jitendrakr9037]

Thank you sir Good Explaination

[@AnkitKumar-cg9hu]

Can someone tell how to host a project has includes an API ?

[@Shubham-cx7vj]

i am facing issue..please let me know if you got any solution

[@avibirla9863]

How to search while using ENTER key bcuz here we need to click on search button

[@priyankachoudhary3029]

let btn = document.getElementById('search-button'); document.addEventListener('keypress', (event)=>{ if (event.key === 'Enter') { event.preventDefault(); document.getElementById("search-button").click(); } }); (You can do this) 😁

[@dashingboy5586]

Dsa launch video kb aayegaa....dsa batch kb launch hogaa

[@rishibhattasali9730]

Also include mern stack here.

[@mohdabdulfareed7871]

Please make like this videos ❤❤

[@bishalbhar-km3rl]

sir, this project was awesome....

[@sawankj]

Hi, after deploying the site on vercel, the api cards are not showing up, only the navbar is showing, Can you please help

[@hazratofficial07]

Same broo

[@sawankj]

@@hazratofficial07 Bro newsAPI ka premium khareedna pdega iske liye otherwise won't work

[@Nikita12353]

Thank alot❤❤❤

[@sanyamjain1053]

bhaiya my cards elemnts are all coming only in asingle row what to do

[@arnoldsmith6584]

are bhai mere cards display nahi ho rahe hai??

[@whites4769]

To appears in different rows firstly check the class is same or not then add this in your code .cards-container { display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 20px; }

[@Avinashkumar-wk1kf]

Superb 🎉

[@FaizanAli-bq9wo]

Zbrdst

[@shashankkrishnan5238]

Why it is showing error 426?? Message from the browser are not allowed on the developer plan.

[@poonam-es2ff]

Sir pls bring more projects.

[@sahilsandi07]

Bhaiya jab ye project vercel par host kiya toh error aa rha console me Failed to load resource: the server responded with a status of 426 () script.js:22 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach') at bindData (script.js:22:14) at fetchNews (script.js:13:5) Please help to resolve..

[@prajnachattaraj3531]

I have the same issue :)...have u resolved it?

[@sahilsandi07]

@@prajnachattaraj3531 nope

[@rudrikasingh2892]

were you able to solve this error?

[@utkarshgupta3670]

Yes, Please give the solution

[@cse_167_simransingh5]

Same erroe

[@funny_tuber0.1]

Bhai ekdam fire 🎉🎉🎉🎉🎉🎉🎉

[@pradumnchauhan2056]

Thanks bhaiya

[@sudhanshuchaubey896]

chal jhuta

[@IrfanSoftwareEngineer]

thankyou so much bhaiya is ek video se pura coding samajh aa gaya aur coding me interest is project ko mai apni favourite project rakhoonga and isme kuch naya features add karke upload karoonga live

[@ScrollWithPodcast24]

I have a big problem making this project any one can help me how to solve . My problem was api call, request from the browser are not allowed on the developer plan, except from localhost

[@saurabhkhamkar12]

Same issue brother

[@siddhubhai2508]

IMPORTANT NOTICE - Hey guys, if you gonna launch it, it is dangerous as users can get your api key from inspect, and if they use it for ddos attack or other wrong activity then your name will come in front and you may be charged legally for that, so please make calls from backend using node js with express or other backend setup ❤

[@sahiljadhav-yn1zb]

What to do to stop it

[@siddhubhai2508]

@@sahiljadhav-yn1zb Making node setup in a folder and sending request from frontend js to backend node's code that the server should request to api, render the captured news and then send that news to the frontend, this will be slow and different for every user and will take your api quota at peak, so for that second option you have is that, you can connect your backend js code to mongodb and then doing initial fetch when server starts and after that the code should save that news to mongodb collection, you can set any name, and the frontend code should request for news from mongodb through your server, in this way your news will same for everyone, also fast because the news is already rendered intead of rendering the news when the user makes request. Although it is not necessary that you use only node js, instead you can use python also, or other but my preferences is node js. Good Luck 👍

[@devilchinnubhai1854]

can u suggest me the extensions u used while doing this project bro pls tell me how to change the plan from localhost to website please bro...

[@shubhamverma3808]

i also want to know

[@atharvatirkhunde4517]

pesticide @@shubhamverma3808

[@sivaraamnatarajan6220]

bro download an live server extension in your visual studio code, then go run the index file with right click -> open with live server then it will eventually run

[@_Riyaz-lr3ql]

Hii , "status": "error", "code": "corsNotAllowed", "message": "Requests from the browser are not allowed on the Developer plan, except from localhost." this error show when i am developing this project how to solve this error ? please help

[@VarunSharma-lw6cn]

is this error resolved yet i am getting the same error

[@juhichoudhary9281]

I am also getting samw error did u solved

[@_Riyaz-lr3ql]

@@juhichoudhary9281 no i am trying to resolve it

[@_Riyaz-lr3ql]

no, i am trying to resolve it @@VarunSharma-lw6cn

[@user-mu9xo4gx5y]

I am also getting same error. Have you resolved it.

[@Himanshu_Das71]

Same coda dala hu.. Wo placeholder 400×200 but kuch nhi aa rha waha .. Kya kru?? Anyone pls help

[@tamjeedhira3706]

im facing the same problem

[@tamjeedhira3706]

if u found any soln then pleasee help me

[@sujaltamrakar827]

This project can I put in resume Final year student

[@Santosh06251]

Make more projects Anuj bhaiyaa

[@parvjain09]

Bhaiya 31.50 par Fetch waali line same to same likha h...par console mai failed to load resources: server responded with a status of 426() yeh aa raha h...poora sahi se API key bagera sab likha h...

[@parvjain09]

Please someone give reply..bhaiya reply kar do

[@krish7305]

bro same with me i think for that there is developer plan which is paid

[@parvjain09]

@@krish7305 ya bro... But yrr Anuj bhaiya ko batana chahiye tha... Half complete karne ke baad yeh issue maja nahi aata phir...

[@Sortedarray32]

@@parvjain09 have you found any solution to this problem

[@parvjain09]

@@Sortedarray32 ya it worked for me.. Just written the whole code.. And then open it with live server...with extension live server preview...and Html code loads perfectly

[@rakeshbhetariya]

Bahoot time le liya bhaiya apne 😢

[@user-tg5mq1xy2r]

Can you please tell what you did at 36:26 - the auto save issue...?

[@anuragshaw3437]

hello bhaia.. i have followed this class and made the website but github pages pe host krne k baad cards load nhi ho rhe. Kya problem hai aap bata skte ho

[@aniketttrana]

Hua??

[@sish_techofficial9942]

third party api you are sending request Does not allow you to send request from broswer except from localhost, thats why it works on your local machine. paisa lagao subscription lo work krega

[@chandranshumishra842]

can this be used to get daily latest news also ? Or just the same news . Thanks in advance

[@anmol344]

this is responsive or not?

[@desi-fitness-factory]

Bhaiyaa Mere Me Error Aa Raha Hai cardsContainer is Null Please Help

[@piyushsharma3915]

amazing bhaiya

[@rmpatpath3916]

Hi anuj .my nephew has got admission in computer science course..can you upload a begginer leven tutorial for those who are starting C's branch??

[@nexus2056]

Great video brother!

[@StudyMaterial61]

thanku sir

[@user-ux3tr7mg1v]

good explaynation

[@akds8378]

sir API call nhi ho pa rha hai error="request from the browser are not allowed on the devloper plan except from local host"

[@akds8378]

Please help me

[@sivaraamnatarajan6220]

bro download an live server extension in your visual studio code, then go run the index file with right click -> open with live server then it will eventually run