3 done tasks from MDN

MDN Learn
,
#1

I did many tasks that i decided to create 1 thread for them, it’s ok?

Here my madness: :badger:

1.Fundamental_Layout_Comprehension:
Pages
Github

2.RWD:
Pages
Github

3.Silly story generator:
Codepen

Want to see your criticism!

Thank you!!

#2

Hello @QuebecNova

i will assest it one by one so it could take sometime

for the grid part you can solve it by using

grid-template-columns: 3fr 1fr;

also it would be nice to add gap between the article and the aside element

it always better to stay away from media and flex and grid layout created to make the layout responsive without the need to detect the screen size and behave based on that

so if i am suggest anything that you remove all media and do it again and you will notice how powerful grid and flex can be

later i will check the other

by the way it better in future to post single task per post so no one get scared by having to review 3 task at once :joy:

hope that help and have a nice day :slight_smile:

2 Likes
#3

here are my assest for second task

you doing great but the image of the final result is not the same as yours so

  1. in bigger screen the aside element should be next to the cards

  2. in bigger screen 3 card in each row which make 3 cards for the first row and 2 cards in the second row

  3. My Website should be on left and nav menu on same line on right side

4)it much easier to use grid for cards if you like

hope that help and have a nice day :slight_smile:

2 Likes
#4

and for third one

you doing great well done just some notice :

  1. it better to use let for your variable cause var make the variable has general scope
    check this for more info about let vs var
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

  2. customName.value should replace Bob not :insertx:

  3. to replace all occurrence of certain string you can use replaceAll

it nice to look for all method/variable tat available for certain object for example you can see all available method for string here

and for other object just go to mdn page and search for the type you want then it will give you all the methods there

if you want extra push look for regex which help a lot with searching

this the guide to it

and this the regex object

and this the cheat sheet that you will keep forever with you :joy:

hope that help and have a nice day :slight_smile:

2 Likes