These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Feb 2018
Janina Pohorecki
@janepohorecka
Feb 04 2018 00:32
Is anyone here very familiar with javascript?
Gulsvi
@gulsvi
Feb 04 2018 00:34
@janepohorecka yes, lots of us are familiar with javascript :) what's your question?
Janina Pohorecki
@janepohorecka
Feb 04 2018 00:38
@gulsvi Ah, thank you. Well, my problem is understanding javascript and how to truly use it in a timely, efficient manner. I am looking for reading/resource recommendations to properly learn the language from the bottom up.. Currently I am trying to manipulate SVG bezier curves so that I get a wavy animation. I have tried all day to implement this and all I am left with is a bunch of scribbles connected to my <button> tags. It's pretty frustrating to say the least. https://codepen.io/janepoho/pen/payygM
CamperBot
@camperbot
Feb 04 2018 00:38
janepohorecka sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2584 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Feb 04 2018 00:41
@janepohorecka We learn it from the ground up here - it's mostly self guided though. https://freecodecamp.org
As for your waves, this is one of those things where you might consider not using JavaScript - like here: https://codepen.io/andyfitz/pen/akAKdV
As for reading materials, you might want to check out Eloquent JavaScript or You Don't Know JS
Janina Pohorecki
@janepohorecka
Feb 04 2018 00:44
@gulsvi yes, I have looked into trying to do it with css, but I want to challenge myself trying to do it with javascript
  • the waves themselves will be far more irregular than this
Gulsvi
@gulsvi
Feb 04 2018 00:45
Unfortunately, I'm not too familiar with SVG animation in JS @janepohorecka but maybe someone else will be able to help.
Janina Pohorecki
@janepohorecka
Feb 04 2018 00:46
@gulsvi it's quite alright! Thank you for the reading recommendations.
CamperBot
@camperbot
Feb 04 2018 00:46
janepohorecka sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Gulsvi
@gulsvi
Feb 04 2018 00:47
Good luck!
Tom
@moT01
Feb 04 2018 03:22
@janepohorecka not sure what you're going for or if you're still playing with things - i made a little something - might get you on a track https://s.codepen.io/moT01/pen/OQNRbg - maybe the wrong track not sure
Janina Pohorecki
@janepohorecka
Feb 04 2018 03:33
@moT01 he Tom, thank you for reaching out to me. That's not exactly what I am looking for. I want to make waves that pulsate up and down. Ive continued working on it and came up with: https://codepen.io/janepoho/pen/mXPEZV
CamperBot
@camperbot
Feb 04 2018 03:33
janepohorecka sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 972 | @mot01 |http://www.freecodecamp.org/mot01
Janina Pohorecki
@janepohorecka
Feb 04 2018 03:33
@moT01 But I want it to look more like this in the end:
Screen Shot 2018-02-03 at 8.02.50 PM.png
@moT01 waves that are not completely uniform and have more gaps between them in certain areas
@moT01 first make them without moving and them somehow animate them.. I have never done this before so I don't really know all what I am doing :-P
Tom
@moT01
Feb 04 2018 03:36
sounds like a challenge alright
no libraries?
Janina Pohorecki
@janepohorecka
Feb 04 2018 03:41
@moT01 I'd prefer to do it myself... unless there was a wicked easy library to use.
Tom
@moT01
Feb 04 2018 03:51
yea, not that i know of specifically - a quick search brings up a bunch https://css-tricks.com/lodge/svg/27-animating-svg-javascript/
but that does sound like a fun challenge - i may try and make something up - ill let you know if i come up with anything
Jacob Fines
@jfines
Feb 04 2018 04:13
I'm struggling with the creative / design aspect of projects. Can anyone help?
I seem to just get stuck feeling like I don't know what to make thats cool
Tom
@moT01
Feb 04 2018 04:17
as far as website design?
or just fun projects
Jacob Fines
@jfines
Feb 04 2018 04:23
@moT01 Well, regarding what we do here (web development) - but in general I guess. So, what happens is it makes the most sense ( to me ) to have some kind of front end design to go off of (step 1), then possibly to add use cases to that - eg: "image galery can be navigated using ...: , or, "there is a call to action button and it ... when you click it", and so on. That's step 2, then, last of all, code it up to make it look and perform that way.
I get stuck at step 1
Dunno if I'm good at picking good color combos and eye catching designs ( you know - the awesomess of it)
Tom
@moT01
Feb 04 2018 04:24
i hear ya, i suck there too
find a somewhat easy looking website and try to replicate it
CamperBot
@camperbot
Feb 04 2018 04:24
find a somewhat easy looking website and try to replicate it
nothing found
Ken Haduch
@khaduch
Feb 04 2018 04:25
I guess there are no easy looking websites? :laughing:
Tom
@moT01
Feb 04 2018 04:25
ha
i didnt catch that
find a less easy one
CamperBot
@camperbot
Feb 04 2018 04:26
find a less easy one
nothing found
Tom
@moT01
Feb 04 2018 04:26
damn
Jacob Fines
@jfines
Feb 04 2018 04:26
That makes sense. Doesn't exacly leave me feeling like a hero but I guess it gets the job done.
@camperbot ^
Oh wati ...
did I just try to talk to a bot?
llol
Tom
@moT01
Feb 04 2018 04:27
it might help give you an eye for design
and im sure youll pick up a bunch of tricks and skills along the way
oh - this site has a slide show - i guess i gotta figure out how to do that
i did a few from here
you have to sign up and they send emails
Jacob Fines
@jfines
Feb 04 2018 04:29
@moT01 right on. That looks cool
here's the first one
Jacob Fines
@jfines
Feb 04 2018 04:31
@moT01 Thats cool man
Jacob Fines
@jfines
Feb 04 2018 04:36
@moT01 is it working?
That seems like a radical pace to try to do
Oh, I forgot ( until now ) --> there is this: http://www.csszengarden.com/
Tom
@moT01
Feb 04 2018 04:41
yea, they get kinda complex to do in a day - not sure you're supposed to replicate them - i think you're supposed to come up with your own similar site - i thought replicating would be better practice for me. If I go back to continuing those I will probly simplify the site - just do a page or two instead of the whole site
Jacob Fines
@jfines
Feb 04 2018 04:47
@moT01 I imagine that once a person does a few sites the pattern is relatively the same. Once the pattern is down then one can focus on the more intricate aspects / tweaking
no?
Tom
@moT01
Feb 04 2018 04:48
i suppose it depends on the complexity of the site
there's sort of a generic structure like those two i showed ya on a lot of sites - but they can get pretty complex and different as well
once you do something once - its something you have in your arsenal that you can use again and again
like if i wanted to make that navigation bar on the first site - i could just pretty much copy and paste
Jacob Fines
@jfines
Feb 04 2018 04:56
right on
^ my open source project, interested in feedback / collaborators
Heathercoraje
@Heathercoraje
Feb 04 2018 06:42
  var $result = $div.append($img).append($('<div class="namePlus"></div>').append($p));

    if (isOnline === 'online') {
      $a.append($i);
      $('.namePlus').append($span);
      $result.append($a);
    }
    return $
Hello folks, I have question with this
I want to append $span to the div namePlus
when I return it does not have span.
  var $result = $div.append($img).append($('<div class="namePlus"></div>').append($p));

    if (isOnline === 'online') {
      $a.append($i);
      $('.namePlus').append($span);
      $result.append($a);
    }
    return $result;
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 07:30
Could anyone please advise me how to put a tooltip on an image?
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 07:49
@Heathercoraje Always perform append operations as a last thing
$('.namePlus').append($span); will look for an element that is already in the DOM. And since you've not added it, you won't find it.
Instead, you can specify context for this search.
It should look like
$result.find('.namePlus').append($span);
I'd recommend you refactor it like

var $namePlusDiv = $('<div/>', { class: 'namePlus' });

var $result = $div.append($img);

if (isOnline === 'online') {
  $a.append($i);
  $namePlusDiv.append($span);
  $result.append($namePlusDiv).append($a);
}
return $result;
Oros Alexandru
@AlexOros
Feb 04 2018 08:15
@AlexOros
Hello guys, I have redone my tribute page, and looking for some feedback
https://alexoros.github.io/tribute-page/
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 08:18
@AlexOros At the bottom of the page, change the colour of CARL SAGAN, the part where you hover and it pops up. Also, change the colour of your footer, doesn't go too well with the colour of the page, try to make it a less darker shade.
https://www.w3schools.com/colors/colors_shades.asp
Also, I would say put the headings of the timeline in a different font to the actual text, but that's up to you @AlexOros
Oros Alexandru
@AlexOros
Feb 04 2018 08:31
Thanks
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 08:32
You're welcome :) @AlexOros
LydaTech
@lydatech
Feb 04 2018 08:35
@AlexOros One thing that is pretty common is making your text blocks too wide. When you make the text span the whole width of your page it makes it harder to read
Jack Lyons
@JackEdwardLyons
Feb 04 2018 09:40
Hey guys, Im having trouble updating my Vue JS component to show and hide -- it works with initial data but when you dynamically add a new element to the DOM, the click even fires but the show/hide doesn't work
could anyone help?
Stephen James
@sjames1958gm
Feb 04 2018 11:25
@JackEdwardLyons I don't have any vue experience, but I could take a look
Apollo
@enigmacipher
Feb 04 2018 11:42
Why cant I style my table like this, https://codepen.io/enigmacipher/pen/rJemQj using the div tag instead of using html selectors for table, tr, th. This is what I got when I used div class instead of selectors. https://codepen.io/enigmacipher/pen/RQaVJB
Apollo
@enigmacipher
Feb 04 2018 11:48
Using selectors wont work when I style multiple tables, adding classes to each element is time consuming. Would be nice to use a container
Ali Bulut
@ali27001
Feb 04 2018 12:15
@enigmacipher you want to put a line between them
Simon Cordova
@gbsimon87
Feb 04 2018 14:47
Hey all! :)
Tom
@moT01
Feb 04 2018 14:50
:wave:
alteducation
@alteducation
Feb 04 2018 14:54
HI Can Someone help me with a bit of yaml code
A. J. Bozdar
@moajday
Feb 04 2018 14:56
Yamk code here at FCC?
Jonathan Cunanan
@jcunanan05
Feb 04 2018 15:01
hello i am doing basic css but it seems I have a problem withfloat left and inline-block. I was just wondering should I learn flexbox to make this layout good?? https://codepen.io/jcunanan05/pen/gWmraE
Tom
@moT01
Feb 04 2018 15:03
@jcunanan05 flex is very useful - i would recommend to learn it either way
https://www.youtube.com/watch?v=G7EIAgfkhmg
Jonathan Cunanan
@jcunanan05
Feb 04 2018 15:06
thanks @moT01 !! ok i should start learning it right now. Any advice for me how should i tackle the overlapping box in my codepen??
CamperBot
@camperbot
Feb 04 2018 15:06
jcunanan05 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 973 | @mot01 |http://www.freecodecamp.org/mot01
Jonathan Cunanan
@jcunanan05
Feb 04 2018 15:06
ohhh i saw the guide. it may be the fastest solution
Tom
@moT01
Feb 04 2018 15:08
im not a fan of floats and dont use them much - perhaps cause i dont understand them completely and struggled the few times i used them
what are you going for
Jonathan Cunanan
@jcunanan05
Feb 04 2018 15:11
just putting the overlapping box in the container. haha maybe i should use flex then so the content would be inside the parent div
because float makes the content be on top of the parent that's why it overlaps i think
maybe i should remove that float and learn about flex containers haha
Aditya
@ezioda004
Feb 04 2018 15:14
@jcunanan05 Why do you have float: left on both child divs?
Jonathan Cunanan
@jcunanan05
Feb 04 2018 15:28
thanks @ezioda004 i should change it then
CamperBot
@camperbot
Feb 04 2018 15:28
jcunanan05 sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 430 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Feb 04 2018 15:31
@jcunanan05 I mean if you remove them it wont overflow, whats your intention exactly?
Emil
@aguyinmontreal
Feb 04 2018 15:41
Hi guys! Can someone suggest me good resources on how to connect a React front-end to a back-end? How to package/distribute all the files? How to connect with the APIs? Which APIs are required? How using APIs in React is different than in JQuery? How to get real-time updates from the back-end?
Thanks!
Kartik V
@zephy20
Feb 04 2018 15:57
@aguyinmontreal are you totally new to js
Igor Pugach
@etcIgor
Feb 04 2018 15:57
hi everyone, who can prompt how to align text to the middle with bootstrap. I can't cope in any way... https://codepen.io/etcIgor/pen/eVZRyy?editors=1000
Stephen James
@sjames1958gm
Feb 04 2018 15:58
@aguyinmontreal create-react-app is designed to create a distributable package for React.
The APIs would depend on the application.
You can use JQuery to make your API calls in React, just have to put the requests in specific life cycle methods (you can also use browser fetch API)
Real time updates would generally be done with web sockets and that is not React specific
@etcIgor which text are you trying to center?
Igor Pugach
@etcIgor
Feb 04 2018 15:59
that is under the image...
Emil
@aguyinmontreal
Feb 04 2018 15:59
@kartikv20 no, I'm good with Express/NodeJs/Jquery / however React is new to me
Kartik V
@zephy20
Feb 04 2018 16:00
for API, jQuery is outdated
use fetch
it has a relatively simple format
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:00
@kartikv20 whoaaa????
since when XMLHttpRequest become outdated?
Emil
@aguyinmontreal
Feb 04 2018 16:02
@sjames1958gm thanks, I heard that when using React, we had to avoid mix it with Jquery at all cost, what's your stand on that? What else do you suggest for APIs?
CamperBot
@camperbot
Feb 04 2018 16:02
aguyinmontreal sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8935 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Aditya
@ezioda004
Feb 04 2018 16:03
@etcIgor Since that p has col-md-8 col-md-offset-2 try
p {
   text-align: right;
}
Jonathan Cunanan
@jcunanan05
Feb 04 2018 16:05
@aguyinmontreal axios is good too
Stephen James
@sjames1958gm
Feb 04 2018 16:05
@aguyinmontreal I don't agree with avoid at all cost type statements. You use the tools that are appropriate.
I would look to solving the problem with native tools such as fetch API before going to use jquery.
Certainly a lot of jquery is HTML formatting which would not be useful when you are using React for that.
Igor Pugach
@etcIgor
Feb 04 2018 16:05
but in the original version css is not used at all (
Kartik V
@zephy20
Feb 04 2018 16:06
@SweetCodingInc well not outdated, but more people are shifting to fetch
Aditya
@ezioda004
Feb 04 2018 16:09
@etcIgor Ok without CSS then add class = "text-right" on that p
Igor Pugach
@etcIgor
Feb 04 2018 16:12
didn't help, will experiment further, thanks
Aditya
@ezioda004
Feb 04 2018 16:16
Sure, its a bootstrap class and works fine when I tested on your pen.
Emil
@aguyinmontreal
Feb 04 2018 16:22
@sjames1958gm so for example, on Gitlab, when people are adding comments on an open "issue", and I see the new comments appearing live on my screen, that's necessarily websockets? It cannot be done with API requests?
Pieter Stokkink
@forkerino
Feb 04 2018 16:23
@aguyinmontreal you can use API calls for it, but then you need to poll the server manually every x amount of time
Stephen James
@sjames1958gm
Feb 04 2018 16:23
@aguyinmontreal Well you can periodically request updates, but that can put an extra load on the server depending on the number of clients
Emil
@aguyinmontreal
Feb 04 2018 16:32
@forkerino @sjames1958gm alright! so web sockets is 100% the way to go? any other technology that can be used for that?
Pieter Stokkink
@forkerino
Feb 04 2018 16:34
@aguyinmontreal I'd use the socket, I don't know of any good alternative (the API calls can work for moderate amount of users, for example an app that is only available for a limited number of users, but it doesn't scale well)
Stephen James
@sjames1958gm
Feb 04 2018 16:37
@aguyinmontreal Of course the backend will have to support web sockets, if not then polling will have to be used
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:37
@aguyinmontreal STOMP is a well standardized technology. You could combine that with either socket api or SSE (server sent events)
Emil
@aguyinmontreal
Feb 04 2018 16:42
@sjames1958gm what exactly do you mean by "polling", could you please provide me with a link? thanks
CamperBot
@camperbot
Feb 04 2018 16:42
aguyinmontreal sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Emil
@aguyinmontreal
Feb 04 2018 16:43
@SweetCodingInc do you have a link for some suggestions on how to integrate STOMP ?
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:44
the server?
@aguyinmontreal what's your backend?
node/java/.net
Emil
@aguyinmontreal
Feb 04 2018 16:45
@SweetCodingInc NodeJS/Express
Stephen James
@sjames1958gm
Feb 04 2018 16:45
@aguyinmontreal polling just means to perriodically request information from the backend
Emil
@aguyinmontreal
Feb 04 2018 16:45
@sjames1958gm alright! :)
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:47
@aguyinmontreal
webstomp
stompit
Emil
@aguyinmontreal
Feb 04 2018 16:47
@SweetCodingInc and on the React side?
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:47
I've used stompit extensively
React is client.. and for that you'll use stomp js
there is react-stomp
Pieter Stokkink
@forkerino
Feb 04 2018 16:49
@aguyinmontreal check https://socket.io/
very easy to incorporate in a Node backend
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:49
@aguyinmontreal that's why i shared webstomp and stompit..
they're for backend
@forkerino checkout ExpressIO A neat and clean wrapper around express + socket.io
Pieter Stokkink
@forkerino
Feb 04 2018 16:50
@SweetCodingInc :smile:
Emil
@aguyinmontreal
Feb 04 2018 16:51
@forkerino socket.io is based on web sockets, or something else?
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:51
@aguyinmontreal websockets
Pieter Stokkink
@forkerino
Feb 04 2018 16:51
@aguyinmontreal yeah, it just helps you feed stuff into a socket from the backend
Emil
@aguyinmontreal
Feb 04 2018 16:51
@SweetCodingInc I meant I tought stomp.js was only for backend
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:52
stomp is also based on websockets but it has cleaner API. Without certain protocol, people tend to go apeshit with implementation
@aguyinmontreal oh.. no.. It's not that way.. Any socket app is gonna have client and server components
Emil
@aguyinmontreal
Feb 04 2018 16:58
Alright! thanks all! @SweetCodingInc @forkerino @sjames1958gm @kartikv20 @jcunanan05
CamperBot
@camperbot
Feb 04 2018 16:58
aguyinmontreal sends brownie points to @sweetcodinginc and @forkerino and @sjames1958gm and @kartikv20 and @jcunanan05 :sparkles: :thumbsup: :sparkles:
:cookie: 235 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
:cookie: 270 | @jcunanan05 |http://www.freecodecamp.org/jcunanan05
api offline
:cookie: 200 | @kartikv20 |http://www.freecodecamp.org/kartikv20
:star2: 2981 | @forkerino |http://www.freecodecamp.org/forkerino
Emil
@aguyinmontreal
Feb 04 2018 16:58
@jcunanan05 what is "axios" for?
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:58
@aguyinmontreal :+1:
Pieter Stokkink
@forkerino
Feb 04 2018 16:58
@aguyinmontreal :+1:
axios is a library for doing API requests
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:58
a library to make ajax requests
Pieter Stokkink
@forkerino
Feb 04 2018 16:59
fetch() is good enough, nowadays, in my opinion
Emil
@aguyinmontreal
Feb 04 2018 16:59
so, axios is not a replacement to web socket
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 16:59
it's not even remotely related to websockets
Lee
@LeeConnelly12
Feb 04 2018 18:20
handling text input in react is needlessly complicated, i hate it
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 18:20
wait what?
I find it quite easy
and interesting
the things you can handle after having a event handler as onchange to make tons of stuff
Sweet Coding :)
@SweetCodingInc
Feb 04 2018 18:21
@tiagocorreiaalmeida unless you want to trigger an api call on input change...
Tiago Correia
@tiagocorreiaalmeida
Feb 04 2018 18:22
yeah that what I was trying to say sorry :\
Lee
@LeeConnelly12
Feb 04 2018 18:33
I want to set the value of the textarea at the bottom to what i type into the textarea above, how would I do this?
class Content extends Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
    }

    render() {
        return (
            <section className='content'>
                <Container>
                    <Row>
                        <Col xs="12" sm="6">
                            <textarea
                                placeholder='Enter your code here'
                                className='form-control'
                                onChange={(value) => this.setState({ value })}>
                            </textarea>
                        </Col>
                        <Col xs="12" sm="6">
                            <textarea className='form-control'>
                                 // How would I update this value every time I type something into the above textarea?
                                {this.state.input} 
                            </textarea>
                        </Col>
                    </Row>
                </Container>
            </section >
        );
    }

};
Stephen James
@sjames1958gm
Feb 04 2018 18:44
@LeeConnelly12 You set value in state but you use input in the bottom text area. Try {this.state.value}
Lee
@LeeConnelly12
Feb 04 2018 19:58
@sjames1958gm I fixed it by setting the value attribute of textarea to this.state.value, thanks
CamperBot
@camperbot
Feb 04 2018 19:58
leeconnelly12 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8936 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 04 2018 20:22
@LeeConnelly12 :100:
Max
@Allaboutthatcode
Feb 04 2018 22:05
hey everyone
Lisa Copeland
@lisacopeland
Feb 04 2018 22:13
@Allaboutthatcode hey
Max
@Allaboutthatcode
Feb 04 2018 23:02
anyone here?
Emil
@aguyinmontreal
Feb 04 2018 23:12
hey hey hey
go ahead and ask your question
Max
@Allaboutthatcode
Feb 04 2018 23:26
hi
I am having an issue with HTML, I can
t seem to change the size of the image just right.
using a css class decleration.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:31
do you have a pen for it? @Allaboutthatcode
Max
@Allaboutthatcode
Feb 04 2018 23:32
pen?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:32
on code pen
do you have an account on https://codepen.io/
@Allaboutthatcode
Max
@Allaboutthatcode
Feb 04 2018 23:37
no
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:38
best to make one, very useful :) @Allaboutthatcode
In the meantime you can post the code which you're having an issue with over here! @Allaboutthatcode
Max
@Allaboutthatcode
Feb 04 2018 23:40
awesome. I saw you had an option to pay, not sure if it's useful to just have a free account.

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {color: red;}
.smaller-image{width:100px}

h2 {font-family: Lobster, Monospace;}

p {font-size: 16px;
font-family: Monospace;}
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img src class="smaller-image" "https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

I'm having an issue with resizing the width of the image.
This is what I did so far.
Alexis Salcedo
@alexisss1928
Feb 04 2018 23:42
I think you miss the ";" after 100px
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:42
@Allaboutthatcode very useful to have a free one if you're learning to code
Max
@Allaboutthatcode
Feb 04 2018 23:43
okay, let me try that.
no dice :-/
Alexis Salcedo
@alexisss1928
Feb 04 2018 23:44
<img src class="smaller-image" "https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "> Here is the error
<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:45
does ur image display at all? @Allaboutthatcode
Max
@Allaboutthatcode
Feb 04 2018 23:45
OOOOOOOOOOOOOOOOOOOOOOOOO
let me try that.
omg
that makes so much sense.
because "class" is one thing, in which you are telling it what do do, while src is the "source" and yeah.
Alexis Salcedo
@alexisss1928
Feb 04 2018 23:46
Done?
Max
@Allaboutthatcode
Feb 04 2018 23:46
one sec
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:46
sorry, @alexisss1928 beat me to it :D
Alexis Salcedo
@alexisss1928
Feb 04 2018 23:48
:smile:
Max
@Allaboutthatcode
Feb 04 2018 23:53
sorry I took so long
I was trying to type it out instead of copying and pasting so I learn what I am doing wrong.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:54
no, that's cool bro @Allaboutthatcode
Max
@Allaboutthatcode
Feb 04 2018 23:54
I am new to coding and I'm trying to teach myself as best as I can. I applied to my local college to pursue a four year degree in information technology and science.
Are you a full time web dev @MuhammedKarim ?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:55
nope, I'm probably less of a programmer than you :D @Allaboutthatcode
but there are a lot of experienced people on here as well, who are always willing to help! @Allaboutthatcode
Max
@Allaboutthatcode
Feb 04 2018 23:57
ooooooo
Do you freelance or work for a company? @MuhammedKarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:58
just like you, self-studying :) @Allaboutthatcode
Max
@Allaboutthatcode
Feb 04 2018 23:59
ahhh, okay. That's cool. What courses have you taken? @MuhammedKarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 04 2018 23:59
w3schhols, HTML, CSS and JS only so far. wbu? @Allaboutthatcode