HTML & CSS Project Tutorial - Build a Recipes Website

Поділитися
Вставка
  • Опубліковано 26 жов 2024

КОМЕНТАРІ • 164

  • @sabalniroula26
    @sabalniroula26 3 роки тому +249

    I have completed this lesson and what I would like it suggest is that: try to make layout yourself at first and if you stuck at anything take help from video. In this way you can exactly figure out where your flaws are and you can improve yourself rather then just watching and copying and pasting. HAPPY CODING !!!

    • @alexbright9849
      @alexbright9849 2 роки тому +1

      i agree👍👍👍

    • @noeledits392
      @noeledits392 2 роки тому +16

      Not advisable for beginners

    • @elizadziuba8352
      @elizadziuba8352 2 роки тому +10

      @@noeledits392 especially advisable for beginners

    • @MohAmuza
      @MohAmuza Рік тому

      I actually to that in all project, its the perfect way to learn new things

    • @varunaggarwal7126
      @varunaggarwal7126 Рік тому

      I did that and I ended up with a working website hosted on azure static website but the code is not as clean and orderly as shown here, well I guess practice makes perfect.

  • @alexalzona6477
    @alexalzona6477 3 роки тому +16

    Thanks everyone that’s worked on this, this has been a great help along my journey. I hope if I’m ever skilled enough to help others I would not hesitate to do so.

  • @isra_dlg
    @isra_dlg 10 місяців тому +2

    As a total beginner ( I know the very basics of HTML, CSS, and JS) this tutorial was super helpful, a little bit fast-paced but great, and direct to the point, thanks Mr. Smilga for doing this. I now have to learn a bit more about grid , em's and rem's ... thanks again

  • @wilsonvolley5281
    @wilsonvolley5281 2 роки тому +13

    For the overlay on the simply recipes banner there is no need for postion: relative or absolute. It goes div 1-> div 2-> div 3 so all you need to do is have div 2 the same height and width as div 1(the parent container) and change the background.

  • @victormungai
    @victormungai 3 роки тому +10

    I just heard John Smilga and I knew... I've struck gold!!!!

  • @Josephhhhhhhhhhhhhhhhh
    @Josephhhhhhhhhhhhhhhhh 3 роки тому +52

    The amount of work you guys put into this👏❤️

  • @davidrosen2705
    @davidrosen2705 3 роки тому +10

    the goat of the front end this man is a legend

    • @Steel0079
      @Steel0079 3 роки тому

      Definitely, I think John is the final stop in all the searching for the best self learning coding UA-cam content.

  • @TK-wp3iw
    @TK-wp3iw 3 роки тому +8

    Omg! I just started css you dropped this video thank you so much 😊

  • @naturepositive7707
    @naturepositive7707 3 роки тому +4

    John is amazing. I done this toturai when he upload it in parts and he is the best. "Codding Addict" is Gold!

  • @mbotidemuwak2671
    @mbotidemuwak2671 2 роки тому +1

    I just remembered him through his voice.
    Thanks.

  • @DennisSimplifies
    @DennisSimplifies 2 роки тому +5

    Just completed the full course on HTML and CSS.
    I'm here to take on the Project.
    Thank you 100x @CodeAddict
    John Smilga is the best 👍

  • @radenazhar3112
    @radenazhar3112 3 роки тому +2

    im confused somehow, some people make a nav link with ul > li > a, and some people code without a list. so which one do u prefer the most?

    • @alkhemist6631
      @alkhemist6631 3 роки тому +4

      Understand how it works and you can use anyone you like

  • @ouvie
    @ouvie 2 роки тому +5

    oh my gosh thank you! i was looking for a course with a project and this one is perfect. keep it up

  • @hanungdwiprasetyo6330
    @hanungdwiprasetyo6330 3 роки тому +7

    I waited for this😊.
    Please make part 2 or another html css project 🙏

  • @Vickishh
    @Vickishh 2 роки тому +2

    Wow! Thank you so much for this tutorial. I have been away from coding for a while and just needed a refresher and I am happy I came across this.

  • @bytemyke
    @bytemyke 3 роки тому +19

    This is awesome! So in depth and easy to understand

  • @huxnwebdev
    @huxnwebdev 3 роки тому +9

    Can't believe #legend is here, Huge Respect from a small youtuber 💖

  • @SamuelMmaduabuchi-nr6xb
    @SamuelMmaduabuchi-nr6xb 5 місяців тому +1

    You make everything so easy!!!!

  • @DevMadeEasy
    @DevMadeEasy 3 роки тому +3

    Hey 🔥John Smilga,
    HTML & CSS Project Tutorial - Build a Recipes Website?
    🤩Wow, Great content, as always!!!
    I just 💜loved it.
    Thanks for sharing it!🙏

  • @nizamramazanov8393
    @nizamramazanov8393 2 роки тому

    Thank you freeCodeCamp for posting!

  • @pygmalion8952
    @pygmalion8952 3 роки тому +2

    This man literally taught me html and css

  • @agiksetiawan
    @agiksetiawan 3 роки тому +1

    You're master of coding

  • @ruirodrigues2938
    @ruirodrigues2938 2 роки тому

    Jonh is a great teacher, saw his name here and i remenber the amazing courses he has from Udemy

  • @mynickisnick8270
    @mynickisnick8270 3 роки тому +4

    I hope you do more projects in the future!

  • @supriyochatterjee4095
    @supriyochatterjee4095 3 роки тому +3

    Amazing Channel, keep up the great work, God bless all

  • @goatzy_run
    @goatzy_run 3 роки тому +1

    Gonna save this. This will be very helpful technique

  • @OnlyDerac
    @OnlyDerac 3 роки тому +1

    Understandable. Have a great day 👨🏿‍🦲✌🏿

  • @VinayakGNair
    @VinayakGNair 3 роки тому +2

    John is good at teaching tech .

  • @ahmadwaheed8003
    @ahmadwaheed8003 3 роки тому +3

    Great teacher.

  • @mrrishiraj88
    @mrrishiraj88 3 роки тому +2

    Thanks a lot for your efforts

  • @AmbitiousJay1
    @AmbitiousJay1 3 роки тому +1

    Exactly what I was looking for

  • @landsfadern2
    @landsfadern2 3 роки тому +3

    Hope the instructor make sures to add Sushi on that website. Anyways cool idea.

  • @storypur
    @storypur 3 роки тому +4

    Appreciate your efforts ❤😍🙏

  • @avinashgardas974
    @avinashgardas974 3 роки тому +1

    Best channel to learn

    • @Steel0079
      @Steel0079 3 роки тому

      Check out coding addict. John's channel. You won't have to go anywhere else after that.

  • @theteflondon431
    @theteflondon431 2 роки тому +2

    John. I enjoyed watching this tutorial. I, however, had a question. for the single recipes, should one put in more than one recipe, will the css you did cover every recipe or will copying and pasting need to be done for every recipe thereafter

  • @MuhammadOsamaAbbas
    @MuhammadOsamaAbbas Рік тому

    Amazing tutorial
    wonderful way of teaching

  • @gabimuresan9188
    @gabimuresan9188 2 роки тому +1

    Thanks a lot for this video.👍

  • @marcosaristigueta5191
    @marcosaristigueta5191 3 роки тому +3

    Thanks a lot. This is very helpful

  • @adritatory3
    @adritatory3 2 роки тому

    completed !! alhamdulillah. Thank you!!

  • @mb-techmedia8494
    @mb-techmedia8494 2 роки тому

    Thank you, coding Addict
    I enjoy your tutorial.

  • @auroskkil8825
    @auroskkil8825 2 роки тому +1

    Your doing a great job guys !!..

  • @willzo4026
    @willzo4026 3 роки тому +1

    Thank you for this.

  • @nagatoshi4597
    @nagatoshi4597 3 роки тому +3

    Helpful, thanks!

  • @rudrapatel48
    @rudrapatel48 3 роки тому +5

    can you please arrange a Full responsive portfolio in flutter

  • @MrNestaho
    @MrNestaho 3 роки тому +5

    For the following code, the tags-list display "grid," and the tags-list a display "block"
    What is the relationship between the "grid" and "block" here, please explain in details.
    Thanks
    .tags-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    }
    .tags-list a {
    text-transform: capitalize;
    display: block;
    color: var(--grey-500);
    transition: var(--transition);
    }

  • @pasindunethsara7782
    @pasindunethsara7782 3 роки тому +2

    Great 👍excellent 👌

  • @creativecollaborations1510
    @creativecollaborations1510 3 роки тому +2

    ❤️ Beautiful Blessings

  • @VungL
    @VungL 3 роки тому +2

    If you're new to programing language Html is the way to go.
    Alot of people shitting on html like it's some kind of plague.

    • @nogoodgod4915
      @nogoodgod4915 3 роки тому

      It's not a programming language though

    • @David-fq5un
      @David-fq5un 2 роки тому +1

      huh? Learning html will not help you learn programming, it's a markup language.

  • @sanjanamokool4208
    @sanjanamokool4208 3 роки тому +1

    Do I need prior knowledge about HTML and CSS before doing following this project?

  • @adityarai4972
    @adityarai4972 Рік тому

    sir you are a legend

  • @aer0449
    @aer0449 3 роки тому +1

    Love you sir ♥️

  • @Kaushalrai2000
    @Kaushalrai2000 3 роки тому +1

    Thank you❤

  • @GonzaRRK
    @GonzaRRK 3 роки тому +3

    Amazing!

  • @harry8040
    @harry8040 3 роки тому +2

    please make one using java script in the same design

  • @vijayethiraj9097
    @vijayethiraj9097 3 роки тому +2

    A quality content

  • @The_riyam
    @The_riyam 3 роки тому +1

    thank u so much

  • @erawanthewise8227
    @erawanthewise8227 3 роки тому +1

    Make a Vulkan tutorial please!!

  • @9ycwindows235
    @9ycwindows235 2 роки тому

    thank you very much!

  • @hashirnouman8355
    @hashirnouman8355 3 роки тому +1

    please release JavaScript version of solidity course

  • @DaliyTv
    @DaliyTv 3 роки тому +1

    Muchas gracias por el tutorial aprendi basatnte siguiendo el video.

  • @bwm1371
    @bwm1371 2 роки тому +1

    thankyou

  • @Bigwells
    @Bigwells 2 роки тому

    Thank you

  • @jettthecoder1185
    @jettthecoder1185 3 роки тому +1

    The about page tho! XD

  • @abhayxoxo
    @abhayxoxo 3 роки тому +1

    Awesome ❤️

  • @nimcosaciid5526
    @nimcosaciid5526 3 роки тому +1

    Plz make part2

  • @seppneimusser5723
    @seppneimusser5723 2 роки тому

    29:33 change height: 310px; to height: auto;

  • @mascode1
    @mascode1 2 роки тому

    This is great!

  • @bscodev
    @bscodev 3 роки тому +1

    Best!

  • @ujjawal6660
    @ujjawal6660 3 роки тому +1

    Thnx 😊

  • @websitelearninglab
    @websitelearninglab 3 роки тому +1

    Nice!

  • @gururajcse5675
    @gururajcse5675 3 роки тому +1

    🎉🎉🎉

  • @endless3171
    @endless3171 3 роки тому +3

    i've got semi colon expected and selector expected warning when I try to code color and letter-spacing property at 19.34 . Is there any solution for that ?

  • @mayankvikash
    @mayankvikash 3 роки тому +4

    Hey,
    Is your channel monetized? If not, how do you make money, other than money given by sponsors?

    • @Steel0079
      @Steel0079 3 роки тому

      It's a non profit organization.

  • @MI7QC
    @MI7QC 3 роки тому +1

    Nice job :)

  • @mekuanint265
    @mekuanint265 2 роки тому

    Tankyou keep it up

  • @simonecostantini7968
    @simonecostantini7968 Рік тому

    Thank you!

  • @aogunnaike
    @aogunnaike 3 роки тому +1

    Awesome

  • @pranavraj5698
    @pranavraj5698 3 роки тому +2

    He is not using Live Server. Don't know why.

  • @piggymaster3209
    @piggymaster3209 Рік тому

    BM 2:00:49

  • @luqmanhamdan9285
    @luqmanhamdan9285 3 роки тому +1

    Wait, is this the minimalist website HTML, CSS only with no JS at all.

  • @soujanyavt
    @soujanyavt 3 роки тому +1

    so its just like a blog right?

  • @SachinGuy
    @SachinGuy Рік тому

    I have a question here, how does he copy paste a single line mutiple times without having to select the line first?

  • @behindthescene2727
    @behindthescene2727 3 роки тому +1

    lets practice

  • @mr.anantvishwakarma1145
    @mr.anantvishwakarma1145 3 роки тому +2

    Can we have some timespans please...

  • @Ahm3dAshour
    @Ahm3dAshour 3 роки тому +1

    Good

  • @sanketchitnis5104
    @sanketchitnis5104 3 роки тому +1

    is there any cisco packet tracer course

  • @ms77grz
    @ms77grz 3 роки тому +1

    👍👍

  • @okokok3321
    @okokok3321 2 роки тому +1

    why did 'text-align: center" at 40:40 not work ?

  • @safadkhili2844
    @safadkhili2844 3 роки тому +1

    💜

  • @cravisbouyin4864
    @cravisbouyin4864 3 роки тому +3

    John hi! Tough time following all your projects for Html 5. Any chance you can include projects with python and large projects for multinational projects and large data sets. Thanks 35x buddy! 😐🙂👨👆

  • @techmine4942
    @techmine4942 2 роки тому +1

    30:00 Big Screen Layout

  • @MrNestaho
    @MrNestaho 3 роки тому +1

    hello
    I downloaded the source code, try to run the "final folder" index page

    • @MrNestaho
      @MrNestaho 3 роки тому

      however the hamburger icon display not properly, only one stroke is display instead of three stroke

  • @elobservador7155
    @elobservador7155 3 роки тому +1

    Gracias por los subtítulos +1 💪

  • @pcgaming1518
    @pcgaming1518 3 роки тому +1

    I don’t want to be that guy but why would you do all of this when wix and other services are available?

    • @hamzaelyoumni3408
      @hamzaelyoumni3408 3 роки тому

      Wix is limited to small websites

    • @Steel0079
      @Steel0079 3 роки тому

      Because this is the actual front end development. You can do a lot more, anything basically with this. Whereas with those you're limited to templates and stuff the site provides. Software Engineer(ofc a lot more to learn even after this) vs non software Engineer basically. Depends on what your needs are.

    • @abbysands9510
      @abbysands9510 3 роки тому

      I like to put it in a different way, imagine you want a house to live in, you have two options buy the house or build the house. Let us further imagine that in this scenario you have an unlimited amount of money, time and you are able to build your house anywhere if you so decide without submitting a request permit form to your local council.
      Let assume that the pre-built house has everything a house could have but not everything you want. In short, you are limited to the design of the house, yeah you can move things around, add or remove things from the house, style, paint the house but you cannot change the original design of the houses for example you cannot knock out a wall to add a new room, etc.
      Now in a house you build or design yourself you can design the house any way you want, you are not limited to someone else design or vision but rather to your own imagination.

  • @stride0812
    @stride0812 3 роки тому +4

    I struggle with layingout and position in css 😥

    • @ginasta7575
      @ginasta7575 3 роки тому +2

      Me too I tried all things from margin,padding, flex and float

    • @Steel0079
      @Steel0079 3 роки тому

      Check out my comment to Gina in this thread.

    • @stride0812
      @stride0812 3 роки тому

      @@Steel0079 Couldn't find it

  • @timothyhenrye7501
    @timothyhenrye7501 2 роки тому

    nice

  • @omorfaruk6986
    @omorfaruk6986 3 роки тому +1

    Show website development with php please

  • @Apoorvpandey
    @Apoorvpandey 3 роки тому +1

    Need timestamps

  • @mattramey5780
    @mattramey5780 2 роки тому

    i have a problem getting my nav button to move right when i add justify-content: space -between. the inspector says the element has no title attribute, but my code looks the same as in the video. any advice?

  • @iwillbeblunt4494
    @iwillbeblunt4494 3 роки тому +2

    My bookmark 34:03