dcsimg
www.webdeveloper.com
Results 1 to 12 of 12

Thread: New to web development, how do i do this:

  1. #1
    Join Date
    Apr 2017
    Posts
    1

    New to web development, how do i do this:

    http://www.wholefoodsmarket.com/smoothie

    as the title says, im new to web development and im trying to learn how to buildweb apps and interactive websites. One thing im trying to replicate is the site above. How would one do something like this? specifically the filling up animation? Would I use javascript(I'm assuming so) or PHP?
    Can i dynamically generate new divs for each ingredient filled into the container? Or would i create several invisible divs, which i would then manipulate based on the user input? Would I use some animation support like HTML5 Canvas, controlled by javascript?

    I'm not looking for actual code, but more of a pointer on how one would recreate this functionality?

    PS im new to web dev but not software development in general, if that helps

  2. #2
    Join Date
    Nov 2016
    Location
    Ukraine
    Posts
    16
    Okay, first, JavaScript is a programming language for front-end, so any animations should be done with it or with some of its Frameworks (like ReactJS and React Native). And PHP is a back-end language, so none of the interface tasks can be done with it.
    If you need more information about ReactJS or React Native, you can read these articles.
    I don't really know about the divs and how to manage it, but I hope this could be still helpful.

  3. #3
    Join Date
    Sep 2017
    Posts
    33
    Animations are to be done with JavaScript and its frameworks.

  4. #4
    Join Date
    Dec 2012
    Posts
    1,585
    Can i dynamically generate new divs for each ingredient filled into the container?
    Yes you can and I recommend doing so. You can animate the height of such divs by use of CSS3 animation.

    Would I use some animation support like HTML5 Canvas, controlled by javascript?
    Yes, using canvas is an alternative procedure. When it comes to animations I recommend using a framework like jCanvas which makes this easy.

  5. #5
    Join Date
    Apr 2014
    Location
    ca
    Posts
    32
    First you have to learn web development programming from w3school to redesign your website.

  6. #6
    Join Date
    Nov 2017
    Location
    India
    Posts
    2
    As a reference W3school is the best to startup any language. Apart from that, there are much material available on youtube, you can take help from that. Check out what latest trends, now these days about your language.

  7. #7
    Join Date
    Nov 2017
    Posts
    5
    Hello cHasler
    As you have described, you want to fill animation. You should use the javascript for animation and you can also use the dynamically divs for that. It will be better rather than use several divs.

  8. #8
    Join Date
    Nov 2017
    Location
    bangalore
    Posts
    1
    Web Development **Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.**
    Last edited by Train; 11-28-2017 at 11:26 AM.

  9. #9
    Join Date
    Dec 2017
    Posts
    4
    The best information on this topic can be found at W3Schools site. In addition to the standard way of defining the DTD, there is an alternative method - called XML Schema.

    At W3Schools site there is also the validator to validate xml code.

  10. #10
    Join Date
    Dec 2017
    Posts
    4
    At W3Schools site there is also the validator to validate HTML code.

  11. #11
    Join Date
    Oct 2013
    Location
    Sheboygan, Wisconsin
    Posts
    1,630

  12. #12
    Join Date
    May 2017
    Posts
    23
    Hello,

    If you have to work with animations and front-end development task then you should understand both programming language which is used to front-end and back-end development. Clarification about codes and its cleanliness is mandatory to start a project.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center