HTML CSS FAQ Design | Webdevtrick.com

Create a FAQ Section using HTML ,CSS & JavaScript

You see when we type or search something on our search engine earlier it used to give the result and a link that has all the content related to it so that the user doesn’t need to scroll or surf more time to find the one problem solution.

Nowadays as technology and AI updates there’s a feature has came known as FAQ this basically gives all the answers what questions will be in the head of the user if he wants to download a game, FAQ will be generated with pros and cons as well as the alternative sites or tips, etc. FAQ feature is basically introduced to solve the 75% – 80% problem of the user.

Now as a developer there’s nothing we can’t recreate or code so let’s see the building of this feature. In This Article We Create FAQ Section using HTML ,CSS & JavaScript.On that note, I welcome you all to Codewithrandom with a new blog in which we’ll see the creation FAQ feature.

I hope you have got an idea for this project.

HTML Code for FAQ Section

      
Frequently Asked Questions
 
 
What can JavaScript Do? 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
 
 
 
How JavaScript Can Modify HTML and CSS Values? 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
 
 
 
What Is SVG? 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
 
 
 
Is FAQ Section Matters In Website? 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
 
 
 
How To Create a Light FAQ Element? 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. Ut tortor pretium viverra suspendisse potenti.
 
 
 
 
   

In this HTML Code we have defined the structure in which under the accordion item tag we have defined some question and their answers and then we have linked a jQuery code and in the script tag because it will be going to use when we will code the JavaScript now lets code the CSS part to add styling to the FAQ Design.

Do you want to learn HTML to JavaScript? 🔥

If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.

CSS Code for FAQ Section

@import url(‘https://fonts.googleapis.com/css?family=Hind:300,400’); *, *:before, *:after < -webkit-box-sizing: inherit; box-sizing: inherit; >html < -webkit-box-sizing: border-box; box-sizing: border-box; >body < margin: 0; padding: 0; font-family: 'Hind', sans-serif; background: #fff; color: #4d5974; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-height: 100vh; >.container < margin: 0 auto; padding: 4rem; width: 48rem; >h3 < font-size: 1.75rem; color: #373d51; padding: 1.3rem; margin: 0; >.accordion a < position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; padding: 1rem 3rem 1rem 1rem; color: #7288a2; font-size: 1.15rem; font-weight: 400; border-bottom: 1px solid #e5e5e5; >.accordion a:hover, .accordion a:hover::after < cursor: pointer; color: #ff5353; >.accordion a:hover::after < border: 1px solid #ff5353; >.accordion a.active < color: #ff5353; border-bottom: 1px solid #ff5353; >.accordion a::after < font-family: 'Ionicons'; content: '\f218'; position: absolute; float: right; right: 1rem; font-size: 1rem; color: #7288a2; padding: 5px; width: 30px; height: 30px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 1px solid #7288a2; text-align: center; >.accordion a.active::after < font-family: 'Ionicons'; content: '\f209'; color: #ff5353; border: 1px solid #ff5353; >.accordion .content < opacity: 0; padding: 0 1rem; max-height: 0; border-bottom: 1px solid #e5e5e5; overflow: hidden; clear: both; -webkit-transition: all 0.2s ease 0.15s; -o-transition: all 0.2s ease 0.15s; transition: all 0.2s ease 0.15s; >.accordion .content p < font-size: 1rem; font-weight: 300; >.accordion .content.active

In this code of CSS we have styled the FAQ design in which we have styled the accordion tag to make it look like a FAQ design which is loaded after the user searches in the google we have defined the transition, opacity, padding, margin, font-family, font-weight etc. So that every thing is aligned properly and it doesn’t get messy while we run it. Now lets code the JavaScript part to make it responsive.

JavaScript Code for FAQ Section

const items = document.querySelectorAll(".accordion a"); function toggleAccordion() < this.classList.toggle('active'); this.nextElementSibling.classList.toggle('active'); >items.forEach(item => item.addEventListener('click', toggleAccordion));

In this JS code we have first used the syntax called document.querySelector in it will toggle the Question and embed the answer in it. And as soon as the user will click on the dropdown it will appear. To make the click responsive we have added a syntax addEventListener which will make it responsive as soon as the user will click it. Let us see the final output of the FAQ Design.

Final Output Of FAQ Section using HTML ,CSS & JavaScript

We have Successfully created our FAQ Section using HTML ,CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Источник

Create a Basic Webpage with CSS and JavaScript

This article was originally published on programmingliftoff.com as Create a Basic Webpage with CSS and JavaScript. Note: If you already have your website and just need to upload it to GitHub and enable GitHub Pages, read Upload a Website to GitHub Pages Prefer to watch this tutorial instead of reading it? Click here to watch it on YouTube. Tired of creating boring HTML pages without style? Then it’s time to add some CSS and JavaScript to liven up your webpage! In this tutorial we will create a website with a basic index.html file and add some CSS and JavaScript files to make it more exciting. Then we will upload the webpage to GitHub as a GitHub Pages website! Note that the methods shown in this tutorial to add CSS and JavaScript files in a webpage are not specific to GitHub Pages. These methods will work with any website and any host (GitHub, GitLab, BitBucket, etc. ). Without further ado, let’s get started! Start by opening your favorite text editor and creating a new folder (you can name the folder anything you like). In that folder, create a file named index.html. Add the following code to index.html:

    My webpage!   Hello, World!  id='date'>   

Adding JavaScript to Our Webpage

Next we will learn how to import JavaScript code from a separate file into ‘index.html’. Create a folder named ‘javascript’. Inside that folder, create a file named ‘index.js’. Inside this JavaScript file, add the following line:

document.getElementById('date').innerHTML = new Date().toDateString(); 

 async src="./javascript/index.js"> 

Now save the files and refresh your browser. You should see the current date printed bellow ‘Hello, World!’. So how is this working? Take another look at the JavaScript we added. As you can see, it gets the element with id ‘date’ (thats the

tag in our webpage), and sets the text inside it to a new Date() object that is converted into a more readable string. Then we added a tag in the ‘index.html’ page to load this JavaScript code in our webpage. We set the src attribute of the tag to «./javascript/index.js». This tells the browser to load the file ‘index.js’, which is located in the ‘javascript’ folder. This happens asynchronously and then the JavaScript code is executed, updating our web page almost instantly! Great, now that we’ve added some JavaScript, lets add some CSS.

Adding CSS to Our Webpage

First create a folder named ‘styles’. Inside this folder, create a file named ‘styles.css’. Type or paste the following code into ‘styles.css’:

body  text-align: center; background-color: #f0e8c5; > 

Now go back to the ‘index.html’ file and add the following tag inside the tag (right above the tag we added in the last section):

 rel="stylesheet" href="styles/styles.css" /> 

Now refresh the ‘index.html’ page in your browser. Sweet! We’ve successfully added styles to the webpage! Looking at the code we added to ‘styles.css’, you can see that we centered the text and added a light-tan background color to the body of the webpage. Then we added a tag with the attribute rel=»stylesheet» to ‘index.html’. This tells the browser that we will be loading CSS styles from a separate file. We also added the attribute href=»styles/styles.css» . This tells the browser that the styles we want to add are located in the ‘styles.css’ file, which is in the ‘styles’ folder. Awesome! Now that we’ve added JavaScript and CSS to our webpage, let’s overdo it and add some image with some sweet styles!

Add some sweet CSS styles!

    My webpage!  rel="stylesheet" href="styles/styles.css" />  async src="./javascript/index.js">   Hello, World!  id='date'>  class="image-section">  class="section-style">  src="https://source.unsplash.com/random/400x200" alt="" /> A random image courtesy of unsplash.com.   class="section-style">  src="https://source.unsplash.com/random/400x200" alt="" /> A random image courtesy of unsplash.com.    class="image-section">  class="section-style">  src="https://source.unsplash.com/random/400x200" alt="" /> A random image courtesy of unsplash.com.   class="section-style">  src="https://source.unsplash.com/random/400x200" alt="" /> A random image courtesy of unsplash.com.     

body  text-align: center; background-color: #f0e8c5; > div  margin-top: 15px; > .image-section  display: flex; justify-content: center; > .section-style  margin-right: 25px; margin-left: 25px; background-color: white; > 

Now refresh your webpage. Nice! We have a sweet webpage with images from unsplash.com! Every time you refresh the page you will see a new random image. Pretty cool, right?! If you had any trouble, watch the video tutorial on YouTube.

Next Steps: Uploading the Website to GitHub Pages

Ok, now that we’ve had our fun creating our site locally, let’s publish it to the internet for free using GitHub Pages. Head on over to Upload a Website to GitHub Pages to learn how to upload your site to GitHub Pages. Thanks for reading!
-Andrew @ Programming Liftoff
Website: programmingliftoff.com

Источник