-3

I ask my question as someone who knows pretty much nothing (nothing at all) about coding. I am clearly very confused about how HTML, CSS, and JS interact.

I am creating a Squarespace website, and I found an FAQ form from Codepen.io that I would like to include on a specific page of the website. I want to know how to approach inserting the HTML, CSS, and JS into a Squarespace code block.

I am able to copy and paste the HTML part of the code into the Squarespace code block feature and the FAQ form shows up, but without all the colors/fonts/styles that the CSS and JS code apparently bring to it. That is about all I got to "work." Below I provided a link to the code I am referring to. I hope this is all making sense.

FAQ form in question: codepen.io/sarenz/pen/azGLRg

*I have added the CSS and JS codes for context

CSS:

  • { /basic reset/ box-sizing: border-box; margin: 0; padding: 0; }

body { /* background: red; */ background: lightgray; }

.faq-wrapper{ border-bottom: 1px solid rgba(0,0,0,0.5); font-family: 'Lato'; line-height: 1.6; padding: 40px 40px 17px 75px; position: relative; }

i { display: block; height: 50px; width: 50px; }

a{ cursor: pointer; display: block; height: 40px; margin-right: 0; position: absolute; right: 75px; top: 30px; width: 40px; }

a.hide-button{ z-index: -1; }

p.faq__question, p.faq__answer{ margin-left: 30px; margin-right: 100px; max-width: 650px; }

p.faq__question{ font-weight: 700; padding-bottom: 20px; }

.hidden-part { height: 0; }

.hidden-part *{ opacity: 0; }

.faq__question:before, .faq__answer:before{ color: #3376b3; font-weight: 900; margin-left: -30px; position: absolute; }

.faq__question:before{ content: 'Q:'; }

.faq__answer:before{ content: 'A:'; }

JS:

$( function(){

'use strict';

var $showButton = $('.faq-wrapper .expand-button'), $hideButton = $('.faq-wrapper .hide-button');

$showButton.click(function(){ var id = $(this).attr('data-id'); var height = $('.hidden-part[data-id="'+id+'"] >.faq__answer').height(); height = height+25;/Adds extra padding to the bottom/

$(this).velocity({opacity:0}) .css('z-index',1) .next('.hide-button') .velocity({opacity:1}) .css('z-index',2) .next('.hidden-part') .velocity({height:height}); $('.hidden-part[data-id="'+id+'"] *').velocity({opacity:1},{duration:400}); });

$hideButton.click(function(){ var id = $(this).attr('data-id'); $('.hidden-part[data-id="'+id+'"] *').velocity({opacity:0},{duration:200}); $(this).velocity({opacity:0}) .css('z-index',1) .prev('.expand-button') .velocity({opacity:1}) .css('z-index',2) .next() .next() .velocity({height:0}); }); } );

grkr1
  • 9
  • 2
  • 1
    Get yourself a notepad++ , go to any youtube html tutorial video, watch the entire series and practice. Learn about divs and how you use them to structure your entire website,and then learn contact forms and then you'll soon be using javascript to validate them. Then you'll be interested in a server side language like php to send those data as an email or even store them in a database , in which you'll want to learn mySQL. – Gosi Aug 02 '19 at 02:19
  • There isn't really a code-specific question here with a code sample that we can discuss. https://stackoverflow.com/help/how-to-ask – jmargolisvt Aug 02 '19 at 02:21
  • Stackoverflow policy’s we should help those wishing to break into coding. Even if it is not directly a coding question. I am glad to see some great directions pointing questions like this in the correct direction. – TamusJRoyce Aug 02 '19 at 02:31

1 Answers1

0

Congrats on getting started in the coding world! Squarespace has a tutorial on adding custom HTML, CSS, and JS to your website: link

As far as understanding how HTML, CSS, and JS interact, there are plenty of tools available to help you learn depending on your preferred learning style: Google Results

Here's the basic run-down:

  • HTML: The content that you want on your website
  • CSS: The formatting of that content
  • JS: Logic to change the content and formatting based on conditions or events (ie user clicks a button)
wraasch
  • 405
  • 3
  • 13