Recipe Page | Frontend Mentor Challenge (HTML & CSS)

Learn how to complete Frontend Mentor's newest challenge the Recipe Page using HTML & CSS
🔥Want to earn FREE Money, PayPal, Amazon Giftcards, or even Crypto? Sign up to freecash and use my link here: freecash.com/r/29703737f5
Payment Proof: i.postimg.cc/hGZxgWD7/proof.png
Source Code: 🚨UNTIL I GET MONETIZED (SUBSCRIBE)🚨
Chapters:
00:00 Recipe Page Project
00:51 Recipe Page HTML
07:53 Recipe Page CSS
16:30 Recipe Page Finished Project
Here are some of the vscode extensions I use:
- Auto Rename Tag (Jun Han)
- Color Highlight (Sergii N)
- Font Awesome Auto-complete & Preview (Janne252)
- Indent Rainbow (oderwat)
- Live Server (Ritwick Dey)
Frontend Mentor, Frontend Challenge, Frontend Mentor Project, HTML, CSS, JavaScript, HTML Tutorial, CSS Tutorial, JavaScript Tutorial, HTML Website, HMTL CSS Website, Responsive Website, HTML Project, CSS Project, HTML Project Ideas, HTML Tutorial For Beginners, CSS Tutorial For Beginners

[@edsHTML]

New MORTGAGE CALCULAOR Frontend Mentor project just dropped go watch it here GO GO GO 🚨🚨🚨: ruclips.net/video/xp-gaZ7XlG4/видео.html
CONTACT FORM Frontend Mentor project just dropped go watch it here GO GO GO 🤯🤯🤯: ruclips.net/video/B8OOjAcOVFg/видео.html

[@athanmartin990]

Great stuff! I am just getting in to coding and your videos help a lot.

[@edsHTML]

Keep going bro 😎 you will get better everyday 💪

[@whateveritwasitis]

awesome! its so hard to find tutorials that have loud obnoxious music to distract me

[@adfinemrising]

very nice work mate! keep it up

[@edsHTML]

Thanks bro 😎

[@jmosofficiallyvlog]

Nice bro! I have an idea how to do my final exam thanks to you

[@edsHTML]

All the best 💪

[@DevDissent]

Just use OL for the numbered list? Did this challenge as well on my channel. 🍻

[@edsHTML]

i used divs with flex to get the text lined up like in the picture. it was the best way i knew to do it, but yeah you could still you OL👍

[@DevDissent]

​@@edsHTML
.properList {
/*
default padding-left applied by browsers to UL/OL is usually 40px, adjust here
*/
padding-left: 99px;
}
.properList li {
/*
distance between number and text / distance between marker and list item text content
*/
padding-left: 99px;
}
Instructions
some text
some text
some text
some text

[@edsHTML]

nice😏 i remember messing around with the padding and margins but it wouldnt work for me

[@faisal_dev951]

hi where's the source code ?

[@edsHTML]

you can find the starter code on frontend mentor, its the newest challenge😀

[@faisal_dev951]

@@edsHTML hahaha no the solved one haha

[@fat_cock_]

Hi! Do you know how to submit solution? I creared repository in Github, but they're need hosting for my site. Isn't?

[@edsHTML]

In your github repository i think you go under settings and find github pages. There you select the main branch i think. Im not at my computer right now, but thats how I remember 👍