Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Gulsvi
@gulsvi
Like this, seems overly-complex:
.scuba-bg{
    background-image: url("http://res.cloudinary.com/dfnn1jyt7/image/upload/v1495832716/pic1_lulilj.jpg");
    background-position: center;           /*this will keep the background picture centered no matter the browser size*/
    background-size: cover;                /*scale background image so that it completely covers the background (may crop image)*/
    background-repeat: no-repeat; 
    background-attachment: fixed;          /*create parallax scrolling affect by fixing image to background block*/
    transform: translateY(-173px);         /*used to move picture up, margins wouldnt work because picture is fixed*/
    margin-bottom: -270px;                 /*crop bottom of picture*/
    height: 100%;                          /*will show the whole picture*/
    overflow: hidden;
/*    border-style: solid;
    border-color: yellow;        */    
}
Andrew Hickman
@ahickman3
@SkyC0der haha exactly, this guy gets it. See, bottom = 60vh positions it 60% away from the bottom, as id expect. But top = 60vh positions it like 20% away from the top, as i wouldnt expect lol thought the whole point of vh was that is positions with respect to the point on the page where its currently and #vh away from wherever.
Its actually a lot less messy from the night before lol i went through everything and tried to understand the logic and took out a bunch of filler. But yeah, the image stuff gets messy
Gulsvi
@gulsvi
@fullmetal7777 I think this is because of the transform you're doing
I mean, if you get a single picture, and the only CSS you apply to it is your top/bottom settings, it will work as expected
Andrew Hickman
@ahickman3
@SkyC0der its the only way i could get the image to bump up :/ i wanted to image to be perfect. I wanted it to be centered. even as i was minimizing the page. Also, i wanted it to be bumped up a little and i wanted it to be fixed to create a parallax scrolling effect
Gulsvi
@gulsvi
As soon as you start transforming, relative/absolute positioning things, using negative margins or big margins, you're taking everything out of the normal flow of the page.
Andrew Hickman
@ahickman3
@SkyC0der so it goes from a normal X+1 function to x^2-y^3+root(459) bascially lol
Gulsvi
@gulsvi
Exactly lol
Andrew Hickman
@ahickman3
@SkyC0der man, web dev is tricky lol
Gulsvi
@gulsvi
For responsive design, you're much better off using media queries - different sized images and different image placement depending on the screen size rather than a one-size-fits-all approach
Andrew Hickman
@ahickman3
@SkyC0der so if i absolutely have to get some weird code going on for an object, i just have to deal with it and work around it basically? The code for that image is as condensed as possible, and i tried everything to get it all to work together and thats what i came up with.
@SkyC0der Actually, mediaquery is what im getting into now. My first task was the get the text on the first background image ("Mark Hickman") so scale using mediaquery. Then i started looking at the vh and all that and things got off track
Gulsvi
@gulsvi
@fullmetal7777 Play around with media queries some more - very important for responsive design. If you study the way bootstrap does it, you'll see they have it everywhere.
Flexbox ends up relieving us from the need for that to an extent, but for background image placement, font size adjustment, etc... media queries are really the way to go
image.png
image.png
Andrew Hickman
@ahickman3
@SkyC0der which is exactly what i want to get into. Im going to try to get this site mobile-ready (hpoefully its not an impossible task at this point), add one more section, and call it quits for that. One question, i red a couple people say start from mobile and work your way up, but wouldnt having your website design done and then working on condensing it be easier? sounds like the way to go for me
@fullmetal7777 ahaha i dont even drink coffee, but if i get one of those mugs for my birthday, i might have to pick up a new habbit
Gulsvi
@gulsvi
@fullmetal7777 I've only been doing this for a few months and I haven't designed any full sites yet. My guess is that it's easier to start small and scale up.
"Mobile First" is something I see a lot
Andrew Hickman
@ahickman3
@SkyC0der oh damn, I didnt realize that. The idea of being as knowledgeable as SkyC0der in a few months, now ive got something to look forward to :D
Gulsvi
@gulsvi
Before you think about the mobile version of your page, you need good content though :) so it's really, content first, then mobile, then desktop
Thanks for the compliment :)
kbernie
@kbernie
Hello! I started to learn front end, when you work on back-end usually you have a requirements.txt file with the things you use; is there something similar convention for front end? Like now I'm trying out Bootstrap framework and Font Awesome toolkit and I want to keep track of technologies I use
Gulsvi
@gulsvi
You can learn a lot here in these chat rooms to be honest - different problems to solve nearly every day
Ejikemeuwa Eric Nnanna
@melete90
Hi guys, <div class="jumbotron"></div> doesn't work on my system. please what do I do?
Gulsvi
@gulsvi
@melete90 How have you set up bootstrap?
Andrew Hickman
@ahickman3
@SkyC0der yeah screw that, im not even messing with responsive design on this site, im so fed up with it haha but the next one, thats where its at.
JD Tadlock
@jdtdesigns
@fullmetal7777 Once you learn Sass, responsive design will be much less of a pain. :D
Andrew Hickman
@ahickman3
@jdtdesigns yeah ive probably spent over 40 hours on this site alone because of not using bootstrap. I wanna learn some new stuff at this point, probably makes more sense to move along and get into JS etc and everything will be much easier rather than trying to crank it out using something that may not work best anyways.
Gulsvi
@gulsvi
@deepanshuchg what is your code like now? Happy to take a look
JD Tadlock
@jdtdesigns
@fullmetal7777 I wouldn't get so stressed over a couple days or even months with this stuff. The reality is, the normal person can take years to get to an advanced level with css. It's a pretty expansive language and can do amazing things. If you're more interested in the programmatic side of things, learning css basics and maybe some intermediate stuff will be all you need. Not everyone wants or needs to be a front end designer. ;)
Ejikemeuwa Eric Nnanna
@melete90
@SkyC0der I went on settings-javascript-quickadd-bootsrtap
bootstrap*
Gulsvi
@gulsvi
@melete90 You'll need to do that on settings -> CSS -> quick add -> bootstrap for the CSS library
javascript only enables this stuff, but the CSS is required for it to work: https://v4-alpha.getbootstrap.com/getting-started/javascript/
Ejikemeuwa Eric Nnanna
@melete90
@SkyC0der okay, thanks
CamperBot
@camperbot
melete90 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 1577 | @skyc0der |http://www.freecodecamp.com/skyc0der
Nikki L.R.
@nikkilr88
Is there anyone here who knows how to work with Cloud9? I made a React project with "create-react-app", but I can't figure out how to run "npm run build"
JD Tadlock
@jdtdesigns
@nikkilr88 There should be a terminal at the bottom that you use to run commands.
Nikki L.R.
@nikkilr88
@jdtdesigns Yeah
image.png
Am I using the wrong one?
JD Tadlock
@jdtdesigns
did you npm install?
and did you type npm run build
Nikki L.R.
@nikkilr88
@jdtdesigns Had to cd to project folder
JD Tadlock
@jdtdesigns
;)
it's just like working locally