Assessment and guidance need on Styling basics 1 skill test

MDN Learn
#1

I am stuck here because I have not studied CSS yet .Kindly Help and guide.
Looking at this I am scared of learning CSS.

Styling basics: Task 1 * { box-sizing: border-box; } 
  body {
    background-color: #fff;
    color: #333;
    font: 1.2em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 1em;
    margin: 0;
    width: 500px;
  }

button,input,select{
font-family:inherit;
font-size:100%;
}

Edit your preferences

  • Email:
  • Website:
  • Phone number:
  • Favorite food: Salad Curry Pizza Fajitas
  • Update preferences

link to the topic

Good Day…!!

#2

@Coder_In_Progress CSS isn’t too scary once you get used to it, and I’m happy to give you some quick pointers to allow you to get ahead with these parts. Although the Forms module really requires some previous knowledge of HTML, CSS, and JS.

I can’t really check our your code in this form — can you please put it into an online code sharing tool like codepen or JS Fiddle?

#3

@chrisdavidmills Sure,But I have never posted on codepen(I dont have a subscribed plan) or JS fiddle.
Can you please guide me on that.

Thank you…!!

#4

I think you can post on codepen without a subscription - you just need an account, which is free.

Once you’ve logged in, click on Create > Pen on the left hand side.

On this screen, enter the HTML, CSS, and JS for your examples in the appropriate panels. You don’t need to worry about creating <link> and <script> elements to link to CSS and JS to your HTML - this is done automatically.

You will see your code running in the big pane at the bottom.

Once you are done writing your code, click the Save button, and then share the URL of the page with anyone you want to see it (i.e. me!)

For example, I just created this test: https://codepen.io/chrisdavidmills/pen/BaoEzjY

#6

hello @Coder_In_Progress
glad to see you going forward

as chris said you should start with the css lesson first before going to style the web form and you will need to learn js before start to do some dynamic modification to it
so as chris said try to study the css then you can come back to style your web form

as you may notice each lesson has pre requirement so for the styling the web form you need to finish the html and css first

another thing when you try to put link here click on that icon

Screenshot from 2020-05-26 15-05-04

cause inserting direct link fail and it make it disappear

coder in progress work

in codepen it much better to put the html code in the html panel and the css part in the corresponding css one and samething for js
you would not need to use the link element it linked automatically

i am still in the css classes after that i will do the styling of the web form

have a nice day and have fun

#7

@justsomeone Hey Thank you for the correction.
Actually I was searching for something and got into forms css section.and got stuck there. :sweat_smile:
Now I have started my CSS section.Its going good as of now.

Good Day…!!

#8

Hello @Coder_In_Progress

you welcome :slightly_smiling_face:

glad to know that you doing fine with the css

thanks and you too