FreeCodeCamp/HelpFrontEnd

Get help on our Front End Development projects.

Sweet Coding :)

@SweetCodingInc

@CyberPutty
First things first - To use react on codepen, you need to go to javascript settings section and set JavaScript Preprocessor to Babel

rajeshrmishra

@rajeshrmishra

hi Guys, please can you check if the site https://cdnjs.cloudflare.com/ working for you?

Sweet Coding :)

@SweetCodingInc

@rajeshrmishra yes

rajeshrmishra

@rajeshrmishra

thanks, I am not able to access

Sweet Coding :)

@SweetCodingInc

@CyberPutty On codepen as well, components can have their own css and props and what not. So no, it doesn't defeat purpose of using react.

The only problem is, you can't have your code separated out in different files.

Which is okay because codepen is there to create quick examples.

If you want to code online, there are better sites to do that like Stackblitz and CodeSandbox

@rajeshrmishra are you behind some proxy?

like corporate proxy at work

rajeshrmishra

@rajeshrmishra

@Sweet Coding no, at home

Randy

@RandyGoldsmith

does anyone know how to put a line vertically down through bullet points in a list?

Sweet Coding :)

@SweetCodingInc

@RandyGoldsmith border left on ul ?

Randy

@RandyGoldsmith

@SweetCodingInc tried that

i think its very complicated..requires a lot of stuff

Sweet Coding :)

@SweetCodingInc

I shouldn't

do you have codepen?

Randy

@RandyGoldsmith

https://codepen.io/duel_drawer8/pen/zRwraZ?editors=1100

Michael Cordero

@CyberPutty

@SweetCodingInc thanks ill check those out.

CamperBot

@camperbot

cyberputty sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:

:cookie: 289 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc

Randy

@RandyGoldsmith

if you scroll all the way down you will see i did what you suggested

what i want is a vertical line that goes through the list items bullet points

Sweet Coding :)

@SweetCodingInc

@RandyGoldsmith You could set

ul {
    list-style-type: none;
    padding: 5px;
}

Randy

@RandyGoldsmith

but i need the bullet points..

im just doing a clone of this

https://creativemarket.com/ikonome/686585-Material-Resume-Blue/screenshots/#screenshot3

under work and education you'll see the blue circles and lines

Sweet Coding :)

@SweetCodingInc

@RandyGoldsmith Got it... You shouldn't use ul/li in that case

Randy

@RandyGoldsmith

@SweetCodingInc i have to use :after and :before and that stuff right?

Sweet Coding :)

@SweetCodingInc

@RandyGoldsmith You could. but it will be harder that way

Randy

@RandyGoldsmith

looked it up and they have some solutions on overstack but they arent easy to understand

not very good at html and css..this is suppose to help me with that

Michael Cordero

@CyberPutty

@RandyGoldsmith take out all of the lines and place a div before the one with the list. then position it absolutely. give it a height and a margin as well as border left in order to position it. it will be absolutely positioned within the div. but you need to make sure to stay away from the top,bottom,left,right properties as that will sort of disconnect it from the div.

@RandyGoldsmith

.timeline
{ 

  height:60px;
  position: absolute;
 margin-left:30px;
  border-right: 1px solid;
  display:inline-block;

}

<div class="timeline">

      </div>
      <div class="work">
        <ul class="">
          <li class="">Design Director at Big Design, New York</li>
          <li>Senior Designer at Design Company, Brookyln</li>
          <li>Designer at Brand New, Paris</li>
        </ul>
      </div>

@RandyGoldsmith you should also make work display:inline-block i believe.

Randy

@RandyGoldsmith

@CyberPutty hmm..trying it now

Michael Cordero

@CyberPutty

.work {

  display:inline-block;

}

Randy

@RandyGoldsmith

https://codepen.io/duel_drawer8/pen/zRwraZ?editors=1100

must be doing something wrong

Michael Cordero

@CyberPutty

https://codepen.io/Cyberputty/pen/PQKyJV

Claudio Restifo

@Marmiz

I think the best approach is using pseudo-elements (:before or :after).
Could be a chance to learn them?

You can use it to style the bullet point as well :)

Michael Cordero

@CyberPutty

@RandyGoldsmith compare is that what you want

Randy

@RandyGoldsmith

@CyberPutty yes thanks, its very close..i just need the line to run through the circles

CamperBot

@camperbot

randygoldsmith sends brownie points to @cyberputty :sparkles: :thumbsup: :sparkles:

:cookie: 307 | @cyberputty |http://www.freecodecamp.org/cyberputty

Randy

@RandyGoldsmith

@Marmiz yeah i may have to learn them and read up on how to do that

Claudio Restifo

@Marmiz

@RandyGoldsmith I'd go with something like:

li:before {
 content: "";
 width: 5px;
 height: 10px;
 position: absolute;
 background: 'acquamarine';
}

and then play around with top and left/right according to your font size

width and height are just random number as well

Where communities thrive

People

Repo info

Activity