Feedback Request - FCC Tech Documentation - Intro to JS

Code Feedback
1

Hi Folks,
I generated a basic intro to JavaScript page.
Pushed myself to smash thru it while sitting in front of television last night, then finessed the styling this morning. Emmett shortcuts are great for the HTML structure, once you know how.
This time i know how to make the codepen tests pass :rofl:
I deliberately used the exact same hex color as the JS logo to create a visual association. I dont like text on the nav links dropping while i hover over the image (which is a link to top of the page), but “perfect is the enemy of good”… so ive left it as is for now. Perfection can wait until tomorrow.

Im quite pleased (smug) with the styling, but got fed up with fact checking JS documentation, so smacked some lorem text in there instead at the bottom…

Thanks if you take the time to let me know your thoughts. Tom;

1 Like
2

Very nice. There is a point that isn’t capitalized in the beginning like the others, particularly - a keyword is any…in basic syntax section.

1 Like
3

Page looks good @tommytucker. Something to revisit;

  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are coding errors you need to address.
1 Like
4

Thanks again Roma,
Until im more proficient im going to get in the habit of running my HTML and CSS thru W3C - thanks for sharing the link…
I love building projects vs sitting reading pages of documentation… its way more engaging.

1 Like
5

Why the border left of the logo disappears when scaling ?

6

Hi @Groucha,
I fixed the “JavaScript for beginners” item in the Navbar, as it wasnt collapsing well, was that what you meant?
What do you think of the overall page?

I may fork this in future and make the navbar collapse horizontally with a burger icon to access the nav menu… if that doesnt break the FCC code. It doesnt look very appealing on a mobile phone screen.

7

Sorry I didn’t say hi :slight_smile:

I meant with the square logo, when the cursor is on, it comes bigger but lost border left.
So I see into your css code that you set border for the fourth side of the square.
So, I don’t really understand if the lost of the border is a design effect or a problem when hovering the logo/square

8

@Groucha
sorry i cant see what you see, either at full screen or when collapsed. :man_shrugging:
the logo has the ID of logo which has margin: 50px auto; - which means that there is 50px top and bottom and auto margins left and right of the logo within its container. :thinking:

I know the logo hover expansion effect makes the text below move up and down, i dont know how to fix this yet, and i know i could spend hours trying to work it out so i havent bothered yet. :grimacing:

9

Sorryyyy let me try again :smiley:
my english syntax still need working^^

Into your html : you have a where the first element is an with an id = logo (JS part)
Into your css, it’s related to #logo and, into properties you set
border : 1px solid black;
So, your JS letters are into a square which has 4 borders (top, right, bottom and left)
You applied an hover effect on the logo which has a property : width: 65% (5% more than the not hovered one). So when you place the cursor on the logo into the square, the width of the logo increases.

So at the biggest point size (if you let the cursor on logo and it is hovered) the left border of the square disappears and this is the point I didn’t understand and ask if you know why it happens :slight_smile:

I’m not able to explain why the text under is moving, I suppose it reacts to adapt with the new size of the logo and yes, it looks like a work to understand why and how to avoid that hihi but hey I’m interested if you find something about :slight_smile:

If someone see what I mean and is able to explain it better…please do it :slight_smile:

Keep the work <3

1 Like
10

@Groucha
Thanks Mate for taking the time to go through it, im not having that issue on my browser! :man_shrugging:

Remember every browser / device might not display each webpage the same, i can only surmise your device and my device are not rendering the content equally…

There are some interesting “high level” videos about CSS if you are interested (or you maybe know 10x more than me at this point!!);

11

Wow I didn’t think about this point haha
But the quest stays entire :thinking: why it disappears…on my browser

I use Google Chrome 81.0.4044.138 (64 bits)
What is your browser ?

Maybe someone else could have a try and shares what happens on her/his screen ?

Thanks for video references I’ll have a look at
We are on the same learning path :nerd_face:

1 Like
12

@Groucha
Im on mac OS 10.15.4 - Mozilla firefox 76.0.1 (64bit)

Yeah, i try to remember to design for the pages to collapse beautifully, cos what you see might not be what others see. good Luck. :sunglasses:

13

I had some hesitation to pick mozilla too but mmh I think it could be a good thing to see how pages have different displaying :slight_smile:

Oh gosh does it mean we should have a look on IE too ??? arg