Join Now

Build a Responsive Dynamic Website using Html, Css and Javascript

  • By CodingManish
  • Build a Responsive Dynamic Website using Html, Css and Javascript

    Join us on an exciting journey into the realm of web development as we explore how to build a responsive and dynamic website using HTML, CSS, and JavaScript. In this comprehensive tutorial, we'll walk you through each step of the process, from structuring your web pages with HTML to styling them with CSS and adding dynamic elements with JavaScript.

  • Video Tutorial of Responsive Dynamic Website
  • Key Highlights

    • HTML Structure: Learn how to structure your web pages using HTML to provide clarity and accessibility.
    • CSS Styling: Dive into CSS to customize the appearance of your website and create visually appealing designs.
    • SCSS: Explore the power of SCSS (Sassy CSS) to streamline your CSS workflow and create more maintainable stylesheets.
    • JavaScript Interactivity: Add dynamic elements and interactive features to your website with JavaScript, enhancing user engagement.
    • Responsive Design: Ensure that your website looks great and functions seamlessly across desktops, laptops, tablets, and smartphones.


    Steps to Create Dynamic Website

      Set Up Your Project:

    • Create a folder named "my_dynamic_website" or any preferred name.
    • Inside the folder, create four files: index.html, style.css, style.scss, and script.js .

    HTML Structure (index.html):
      
       
        <!DOCTYPE html>
        <html lang="en">
            <!-- www.codingmanish.in -->
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Dynamic Landing Page With Time</title>
            <link rel="stylesheet" href="style.css">
            <link rel="stylesheet" href="style.scss">
        </head>
        <body>
        
        
        
            <time id="date"></time>
            <time id="time"></time>
            <h1>
                <span id="greeting"></span>
                <span id="name" contenteditable="true"></span>
            </h1>
        
            <h2>What is your focus for today?</h2>
            <h2 id="focus" contenteditable="true"></h2>
        
        
            <script src="script.js"></script>
            
        </body>
        </html>
    
        
      
      
      
    CSS Styling (style.css):
        
      
        
       
        @import url("https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;600&display=swap");
        :root {
          --primary-color: #fdd835;
          --secondary-color: #388e3c;
          --dark-color: #333;
          --white: #fff;
          --black: #000;
        }
        
        * {
          margin: 0;
          padding: 0;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
        }
        
        body {
          font-family: 'MuseoModerno', cursive;
          color: var(--black);
          line-height: 1.5;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          text-align: center;
          height: 100vh;
          background-size: cover;
          background-position: center;
        }
        
        #date {
          font-size: 2rem;
        }
        
        @media only screen and (max-width: 45em) {
          #date {
            font-size: 2rem;
          }
        }
        
        @media only screen and (max-width: 38em) {
          #date {
            font-size: 1.7rem;
          }
        }
        
        @media only screen and (max-width: 28em) {
          #date {
            font-size: 1.3rem;
          }
        }
        
        #time {
          font-size: 6rem;
        }
        
        @media only screen and (max-width: 45em) {
          #time {
            font-size: 5.3rem;
          }
        }
        
        @media only screen and (max-width: 38em) {
          #time {
            font-size: 4.5rem;
          }
        }
        
        @media only screen and (max-width: 28em) {
          #time {
            font-size: 3.5rem;
          }
        }
        
        h1 {
          font-size: 2rem;
          margin-bottom: 2rem;
        }
        
        @media only screen and (max-width: 45em) {
          h1 {
            font-size: 1.9rem;
          }
        }
        
        @media only screen and (max-width: 38em) {
          h1 {
            font-size: 1.7rem;
          }
        }
        
        @media only screen and (max-width: 28em) {
          h1 {
            font-size: 1.4rem;
          }
        }
        
        h2 {
          font-size: 1.5rem;
          margin-bottom: 0.5rem;
          opacity: .8;
        }
        
        @media only screen and (max-width: 45em) {
          h2 {
            font-size: 1.4rem;
          }
        }
        
        @media only screen and (max-width: 38em) {
          h2 {
            font-size: 1.2rem;
          }
        }
        
        @media only screen and (max-width: 28em) {
          h2 {
            font-size: 1rem;
          }
        }
        
    
        
      
      
    SCSS Styling (style.scss):
        
      
    
        @import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;600&display=swap');
    
        :root {
            --primary-color: #fdd835;
            --secondary-color: #388e3c;
            --dark-color: #333;
            --white: #fff;
            --black: #000;
        }
        
        // Responsive Breakpoint
        $bp-large: 60em;        //960px
        $bp-medium: 45em;       //720px
        $bp-small: 38em;        //608px
        $bp-smallest: 28em;     //448px
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'MuseoModerno', cursive;
            color: var(--black);
            line-height: 1.5;
        
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100vh;
        
            background-size: cover;
            background-position: center;
        }
        
        #date {
            font-size: 2rem;
        
            @media only screen and (max-width: $bp-medium){
                font-size: 2rem;
            }
        
            @media only screen and (max-width: $bp-small){
                font-size: 1.7rem;
            }
        
            @media only screen and (max-width: $bp-smallest){
                font-size: 1.3rem;
            }
        }
        
        #time {
            font-size: 6rem;
        
            @media only screen and (max-width: $bp-medium){
                font-size: 5.3rem;
            }
        
            @media only screen and (max-width: $bp-small){
                font-size: 4.5rem;
            }
        
            @media only screen and (max-width: $bp-smallest){
                font-size: 3.5rem;
            }
        }
        
        h1 {
            font-size: 2rem;
            margin-bottom: 2rem;
        
            @media only screen and (max-width: $bp-medium){
                font-size: 1.9rem;
            }
        
            @media only screen and (max-width: $bp-small){
                font-size: 1.7rem;
            }
        
            @media only screen and (max-width: $bp-smallest){
                font-size: 1.4rem;
            }
        }
        
        h2 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            opacity: .8;
        
            @media only screen and (max-width: $bp-medium){
                font-size: 1.4rem;
            }
        
            @media only screen and (max-width: $bp-small){
                font-size: 1.2rem;
            }
        
            @media only screen and (max-width: $bp-smallest){
                font-size: 1rem;
            }
        }
        
     
    
    
        
        
    JavaScript (script.js):
      
        
        // DOM Elements
        const date = document.getElementById('date');
        const time = document.getElementById('time');
        const greeting = document.getElementById('greeting');
        const name = document.getElementById('name');
        const focus = document.getElementById('focus');
        
        // options
        const showAMPM = true;
        
        // show time 
        function showTime() {
            let today = new Date();
            let day = today.getDate();
            let month = today.toLocaleString('default', { month: 'long' });
            let year = today.getFullYear();
            let hour = today.getHours();
            let mint = today.getMinutes();
            let sec = today.getSeconds();
        
            // output date 
            date.innerHTML = `${month} ${day}, ${year}`;
        
            // set AM or PM 
            const amPm = hour >= 12 ? 'PM' : 'AM';
            
            // 12 hr format 
            hour = hour % 12 || 12;
        
            // output time 
            time.innerHTML = `${hour}:${addZero(mint)}:${addZero(sec)} ${showAMPM ? amPm : ''}`;
        
            setTimeout(showTime,1000);
        }
        
        // add zero to time 
        function addZero(n) {
            return(parseInt(n, 10) < 10 ? '0' : '') + n;
        }
        
        // set background and greeting 
        function setBgAndGreet() {
            let today = new Date();
            let hour = today.getHours();
        
            if(hour >= 5 && hour < 12){
                //morning
                document.body.style.backgroundImage = "url('img/morning.jpg')";
                greeting.textContent = 'Good Morning';
                document.body.style.color = 'white';
            }
            else if (hour >= 12 && hour < 16) {
                // afternoon
                document.body.style.backgroundImage = "url('img/afternoon.jpg')";
                greeting.textContent = 'Good Afternoon';
            }
            else if (hour >= 16 && hour <= 20) {
                // evening
                document.body.style.backgroundImage = "url('img/evening.jpg')";
                greeting.textContent = 'Good Evening';
            }
            else {
                // night
                document.body.style.backgroundImage = "url('img/night.jpg')";
                greeting.textContent = 'Good Night';
                document.body.style.color = 'white';
            }
        
            setTimeout(setBgAndGreet,1000);
        
        }
        // Get name 
        function getName() {
            if (localStorage.getItem('name') === null) {
                name.textContent = '[Enter Name]';
            }
        
            else {
                name.textContent = localStorage.getItem('name');
            }
        }
        
        // set name
        function setName(e) {
            if(e.type === 'keypress') {
                // make sure enter is pressed
                if (e.which == 13 || e.keyCode == 13) {
                    localStorage.setItem('name', e.target.innerText);
                    name.blur();
                }
            }
        
            else {
                localStorage.setItem('name', e.target.innerText);
            }
        }
        
        // Get focus 
        function getFocus() {
            if (localStorage.getItem('focus') === null) {
                focus.textContent = '[Enter Focus]';
            }
        
            else {
                focus.textContent = localStorage.getItem('focus');
            }
        }
        
        // set Focus 
        function setFocus(e) {
            if(e.type === 'keypress') {
                // make sure enter is pressed
                if (e.which == 13 || e.keyCode == 13) {
                    localStorage.setItem('focus', e.target.innerText);
                    focus.blur();
                }
            }
        
            else {
                localStorage.setItem('focus', e.target.innerText);
            }
        }
        
        name.addEventListener('keypress', setName);
        name.addEventListener('blur', setName);
        focus.addEventListener('keypress', setFocus);
        focus.addEventListener('blur', setFocus);
        
        // Run
        showTime();
        setBgAndGreet();
        getName();
        getFocus();
        
     
    
    
    
    
        
        

    Download the source code files for this project for free by clicking the Download button.

    Total projects



    Related Projects



  •   Pepsi Landing Page Using Html Css Javascript
    9 mins read

    Pepsi Landing Page Using Html Css Javascript

    codingmanish

    1 Nov 2023

    Read more

  • ...

    your source for awesome coding projects! Let's dive into the world of code together! 🚀