Page 1 of 2 12 LastLast
Results 1 to 15 of 18

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

  1. #1
    Join Date
    Apr 2017

    New to web development, how do i do this:

    wholefoodsmarket 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
    Last edited by \\.\; 03-08-2018 at 08:46 AM. Reason: SPAM link removed.
    Share on Google+

  2. #2
    Join Date
    Nov 2016
    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.
    Share on Google+

  3. #3
    Join Date
    Sep 2017
    Animations are to be done with JavaScript and its frameworks.
    Share on Google+

  4. #4
    Join Date
    Dec 2012
    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.
    Share on Google+

  5. #5
    Join Date
    Apr 2014
    First you have to learn web development programming from w3school to redesign your website.
    Share on Google+

  6. #6
    Join Date
    Nov 2017
    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.
    Share on Google+

  7. #7
    Join Date
    Nov 2017
    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.
    Share on Google+

  8. #8
    Join Date
    Nov 2017
    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.
    Share on Google+

  9. #9
    Join Date
    Dec 2017
    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.
    Share on Google+

  10. #10
    Join Date
    Dec 2017
    At W3Schools site there is also the validator to validate HTML code.
    Share on Google+

  11. #11
    Join Date
    Oct 2013
    Sheboygan, Wisconsin
    Share on Google+

  12. #12
    Join Date
    May 2017

    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.
    Share on Google+

  13. #13
    Join Date
    Jul 2017
    From W3schools you can get best help for startup...

    hire wordpress developer
    Share on Google+

  14. #14
    Join Date
    Jan 2018
    Kindly go through best web development trends for 2018 in this article right here.

    Stating that, the listed web development trends for 2017 are still highly relevant. Technology changes continuously, so to be at the top of your game as a web developer, it’s vital you’re keeping up. It can be confusing and discerning when so many updates and developments are being released every few weeks. With 2018 just getting started, we’ve put together some information about the anticipated trends for this upcoming year and some advice about what areas of development you should be focusing on.
    Share on Google+

  15. #15
    Join Date
    Jan 2018
    I'm not looking for actual code, but more of a pointer on how one would recreate this functionality?
    Share on Google+

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14387 seconds
  • Memory Usage 3,001KB
  • Queries Executed 15 (?)
More Information
Template Usage (36):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (15)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (1)pagenav_pagelink
  • (15)postbit
  • (15)postbit_onlinestatus
  • (15)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (74):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates