Building a Netflix-style website for a beginner to intermediate web-builder.

I'm looking to build a sleek aesthetic website that has a single background image, and a Netflix-Like feel to it in the way of several webpages being shown on one homepage as several image links to another webpage in a carousel type format just like the images for each movie are displayed in Netflix.

I am currently using Squarespace as a web-builder. How can I accomplish this there? If another web-builder is optimal for this project, I am open to other suggestions for alternatives to Squarespace.

Attatched is an example of the "feel" I'm going for.Netflix.jpg
ZraxiusAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You have some limitations you are working with and being a beginner is one of those limitations as I am sure you are aware.  The other limitation is your web builder.  Squarespace, wix and weebley are all very good in that you can get up and running very quickly.  What makes them easy to use is the fact they have limitations and preset themes.  If what you want to do is not in any of the themes provided, then you have to ask yourself about the trade off of learning how to do what you want on  your own vs getting something up and running now even if it means you don't get exactly what you want.

Part of what is the "netflix" look and would not be hard for somebody that can understand html and css enough to make square images line up and be responsive. Using bootstrap or foundation responsive libraries would be a big help.

Getting back to what is easy.  Look at the themes for portfolios   and it looks like Avenue, Wexley, and flatiron are all very similar and I would suggest going with one of those.
0
ZraxiusAuthor Commented:
Thank you VERY much for your reply, It was very helpful.

I was hoping to use experts such as yourself to help save time and shorten my learning curve. For example: How would I edit the Avenue template to include a background image for the entire page, and convert each row of images into a carousel style format with smaller pictures that show about 5 or 6 images per carousel turn at a time?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What we will do is help you with code you have written or give you hints.  What we will not do is write a lot of fresh code for you.  You can pay somebody for that :)

It looks like for square space you can do some basic changes or pay for a full account to get to developer mode.   For example, if you create a page, then on the left nav of squarespace where you see your page, there will be a gear icon.  Click that, then in the pop up click advanced.  There it looks like you can add js or css.  As example if you add
<style>body{background-color:black}</style>

Open in new window

Then save, and reload you will see the page background is black.  To get an image background, you would need to upload an image, know the url then use a background image https://developer.mozilla.org/en-US/docs/Web/CSS/background-image.  Make sure to size the image properly and set the resolution for the web, 72dpi will work.  You don't want your image much larger than 100k for a big image and 30k to 50k for a medium sized image.

Another option for simple things like just changing the background color of one section, if you hover over portion of the page, you will see you can edit just those blocks.

Also on the left  nav, go to the "home" where you see "pages" then below that design, commerce, metrics...  click on design. Then style editor will give you some options as well as it looks like you can have a custom style sheet.

If css is new to you, I strongly suggest going through the basic html and css course http://www.codecademy.com/tracks/web.  They say it is 7 hours.  Don't do it all at once or you will just go through the motions and not remember what you did. It might be helpful to even take the course twice to let it sink in.

If you are just copy and pasting code without knowing what you are doing,  you will end up wasting 3 times that amount of hours going back and forth trying to figure out what is wrong.

As far as converting each square to carousel, that will take some javascript/jquery and probably with squarespace require the ability to go to developer mode although it still may be possible without.  Either way, it would not be a quick thing.  I suggest sticking with what is easy that you can do and go with the template.

If you want a go at customizing animation for the squares, then I suggest  you try out the javascript and jquery unites at http://www.codecademy.com/tracks/javascript and http://www.codecademy.com/tracks/jquery.   Run through javascript first.  You may need to do this one over 2 to 3 days.  Then on the next day hit jquery which is a javascript library that helps make things like animation easier.  Even after a week, a lot of this will be foreign, but at least you may be able to ask more detail questions and receive proper answers.

No need to reinvent the wheel as there are some jquery plug ins do do what you want such as http://www.jssor.com/, http://sorgalla.com/jcarousel/, http://kenwheeler.github.io/slick/, http://owlgraphic.com/owlcarousel/ or https://amazingcarousel.com/ that can be set to individual elements such as a div that makes up the squares.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

ZraxiusAuthor Commented:
Thank you very much again Scott for the direction. I will put my nose to the grindstone and do what I need to do to get this ball moving. In your professional opinion, is Squarespace a good web building platform to begin with for this type of website? Are there others you might recommend over it?

I've seen the A.I. driven "Grid" @ thegrid.io advertised. Any professional thoughts on going with that route?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have seen the advertising for that as well and been to the site, but never signed up to try.

The builder sites like wix, weebly, squarespace et. el., are good for both beginners/non developers and more advanced developers when you just want to put up a quick blog site and use their pre-made templates or a 3rd party.

If you are good with using one of their layouts perhaps with some minor color changes, a non developer should be able to be ok.   It's when you have something very specific or need a special process or function when you will run into trouble.

Wordpress is a good option.  Wordpress.com is self hosted. I know for sure wordpress.org (that you host yourself) will give you the ability to create some custom looks and features and both the hosted (.com) and self hosted (.org) will have access to many 3rd party themes and utilities.   However, any customization is not something for the non developer.

Without trying it, I would guess thegrid.io is similar to the 4 other builder/cms sites I mentioned.

If you want to do this  yourself and you do not have the skills to develop custom on your own, then you are better off simply using what you can, get it working and as you gain in success, hire out.   Having a home page  made of a giant slider thing (very common and no problem to find a plug in) vs trying to copy a specific layout is not going to make or break your site anyway and spending too much time on chasing that will take you away from finishing unless you just to hire somebody.  The other problem with trying to make an exact copy of another site that is already unique is you will just look like a "Me too" but not as good.  I think that will end up hurting you as well.  

My advice is to work with what you can to get started.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ZraxiusAuthor Commented:
Many Thanks!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.