FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Gulsvi

@gulsvi

Keon would fire us for drinking on the job

Reeson55

@Reeson55

are there any issues with using images off google for my background images on codepen for projects?

Eduar Tua

@eduartua

Use postimage.io

https://postimage.io/

Gulsvi

@gulsvi

It depends on the image, some are copyright, but I doubt anyone would notice

Reeson55

@Reeson55

i mean im just using the url link

to post a background on codepen its nothing live

Eduar Tua

@eduartua

It depends on the rights as @SkyCoder01 says. If it is not a production site there will no be problems

Reeson55

@Reeson55

heres my tribute so far what do you guys think? http://codepen.io/Reeson55/pen/pPbMPN

Gulsvi

@gulsvi

@Reeson55 Good work for desktop, it should resize better for mobile :)

Reeson55

@Reeson55

@SkyCoder01 thanks, yeah not sure where to start there lol

CamperBot

@camperbot

reeson55 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:

:star2: 1232 | @skycoder01 |http://www.freecodecamp.com/skycoder01

Gulsvi

@gulsvi

Click the down arrow, in the top right-hand corner of the HTML + CSS panels and select the Analyze option. It will give you some suggestions

Reeson55

@Reeson55

maybe using flex-container?

Gulsvi

@gulsvi

@Reeson55 In general, don't use large values in pixels. You can remove this to help a lot:

width:1200px;

And take advantage of bootstrap. For example, on your image, use class="img-responsive"

And remove this from the CSS for that image:

  margin-left: 160px;

Think of a phone that's 280px wide. You've just pushed it to the left by 160px, over half the width of the phone's screen

Reeson55

@Reeson55

if i do that my image wont be centered

Gulsvi

@gulsvi

Those 3 changes make it look like this instead:
Add the center-block class to your image to center it

http://codepen.io/skycoder/pen/xqbGor

Reeson55

@Reeson55

okay I centered image but what about the width of the container?

Lucas Mazzitelli

@duffmckagan

<html lang="en">
<head>
<title>Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="jumbotron text-center">

<h1>Lucas Mazzitelli</h1>
<p>Full Stack Developer</p>
</div>

</body>
</html>

.jumbotron{
background-color: #f4511e;
color: #000

My css doesnt work, but when i put in the html with the tag <style></style> its works
Someone can help me?
sorry for my english, is a total crap haha

http://codepen.io/duffmckagan/pen/LyyGbN

here is my pen

Gulsvi

@gulsvi

@Reeson55 If you don't want it to get too wide, but still want it to be responsive, use max-width: 1200px for your container. http://codepen.io/skycoder/pen/NjjXqy

@duffmckagan Click "Settings" in codepen and add all of this to your settings instead:

<head>
  <title>Portfolio</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

^^ And that jQuery version looks very old. Latest version is 3.2

Reeson55

@Reeson55

@SkyCoder01 is that done with css? or add a class to the element

Gulsvi

@gulsvi

@Reeson55 max-width is a CSS property

https://www.w3schools.com/cssref/pr_dim_max-width.asp

Reeson55

@Reeson55

@SkyCoder01 ok thanks il try it out

CamperBot

@camperbot

reeson55 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:

:warning: reeson55 already gave skycoder01 points

Reeson55

@Reeson55

@SkyCoder01 wow thanks alot that changed everything.

CamperBot

@camperbot

reeson55 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:

:warning: reeson55 already gave skycoder01 points

Gulsvi

@gulsvi

Yeah, just small changes needed :)

Chris

@bestintown23

how do I remove underline from link

jonathanpuc

@jonathanpuc

@vanessavalentine Thank you! No I hadn't, I had another learning resource as well!

CamperBot

@camperbot

jonathanpuc sends brownie points to @vanessavalentine :sparkles: :thumbsup: :sparkles:

:cookie: 120 | @vanessavalentine |http://www.freecodecamp.com/vanessavalentine

Corri Taylor

@corritaylor

How do you sow your code on Gitter?

Alan Saber

@Alan95

hey guys, how can i remove this placeholder after a short of time, like 2 seconds? is there any delay option? after i created it: input.attr("placeholder", "Hello"); (jquery)

Jean Mesa

@roninjay

@duffmckagan put this in your head tag: <link rel="stylesheet" type="text/css" href="yourStylesheet.css">

Gulsvi

@gulsvi

@corritaylor share a link to your codepen project

Or, if you want to format the code with black background, use markdown. https://github.com/freeCodeCamp/freeCodeCamp/wiki/Code-Formatting

Gulsvi

@gulsvi

input.attr("placeholder", "Hello")
  .delay(2000)
  .queue(() => $(input).attr("placeholder", "").dequeue());

Where communities thrive

People

Repo info

Activity