DEV Community: Bianca Correia

Day 4 of writing code

Bianca Correia — Sun, 06 Aug 2023 11:50:47 +0000

The registration form challenge is complete!

These challenges are getting lengthier and more difficult by the minute lol
The challenge incorporated new elements, attributes and properties in CSS.

A little tip when starting a new html/css document. Always remember to that in each CSS document to reference my style sheet to my HTML document.

In summary I have highlighted a few steps included in creating the form:

Add a form element in order to action a form-data
The method attribute specifies how to send form-data to the URL specified in the action attribute.

To create form-like lines, we add the fieldset element
In order to name each fieldset, we have to add label elements and add the desired text.
As label elements are inline by default, they are all displayed side by side on the same line, making their text hard to read. To make them appear on separate lines, add display: block to the label element, and add a margin of 0.5rem 0, to separate them from each other.

To create black boxes within the form we should add an input element within our label element.
We should use the for and id attributes to connect the label and input elements. E.g
Enter Your First Name:

For accessibility, best practices link the input elements and label elements by adding ids
For attributes will be added to the label
id attributes will be added to the input

I have noticed that I haven’t gotten accustomed to memorising the different properties E.g to align text I must write text-align instead of just text. It is going to take a lot of practice before I grow comfortable remembering these little things. In order to facilitate the memory of these properties I will add them to a document list and test myself.

Overall, I have learned how to create a fully functioning interactive form with answer boxes and submit buttons.

If you are also taking the freecode camp challenges let me know your thoughts and what have you learnt so far.

Third day writing code

Bianca Correia — Sun, 23 Jul 2023 21:04:27 +0000

Hey guys! Just when I thought CSS would be the basic emulation of adding different colours and backgrounds continuously it proved me wrong, it can do a lot more than that!

Today I completed the coloured markers challenge on freecodecamp!. The first part of the challenge was to learn how to make secondary and tertiary colours. In order to make a secondary colour we have to combine two primary colours. For example, to make a magenta colour we mix two primary colours red and blue.

The different types that I learned today of applying colour to an element with CSS were with hexadecimal or hex values.

Hex colour values start with a # character and take six characters from 0-9 and A-F. The first pair of characters represent red, the second pair represents green, and the third pair represents blue. For example, #4B5320.

With hex colours, 00 is 0% of that colour, and FF is 100%. So #00FF00 translates to 0% red, 100% green, and 0% blue, and is the same as rgb(0, 255, 0).

The HSL colour model, or hue, saturation, and lightness, is another way to represent colours.
The CSS hsl function accepts 3 values: a number from 0 to 360 for hue, a percentage from 0 to 100 for saturation, and a percentage from 0 to 100 for lightness.

The interesting twist here is that I learned how to add different colours to turn them into gradients! It actually reminded me of the very early days of Microsoft Word and its colour gradient features. It was cool to see how it was actually made.

The CSS linear-gradient function lets you control the direction of the transition along a line, and which colors are used. E.g linear-gradient(gradientDirection, color1, color2, ...);

After getting to grips with how to add colours and gradients to different parts of the website I jumped to learning how to add shadows. Adding a shadow makes the colours look a little more multidimensional and real.

Lastly, I had an introduction to the offsetX, offsetY and spreadradius properties.

That wraps up my third day of writing code, I am beginning to have a basic understanding of the CSS elements highlighted above and I am so excited to continue on this journey.

My second day writing code

Bianca Correia — Sat, 22 Jul 2023 22:05:44 +0000

I made a start on my CSS courses on freecodecamp. I am about 80% through!

Today I focused on learning CSS. CSS stands for Cascading Style Sheets and is used to style an HTML document. I learnt how to style different elements by adding different properties such as :

background colours, using the background property
align text, using the text-align property, for example
select different widths on the page by using the width property and selecting the respective number, for example, max-width: 300px if you want the max width to be 300 pixels.
border colour by using the border-colour property

CSS is so much more creative, it allowed me to see the different tweaks on the website to come to life!

After that, I explored different class selectors in order to change fonts, font styles and played around with the hover selector on links!

My first day writing code

Bianca Correia — Fri, 21 Jul 2023 22:10:52 +0000

I’m quite excited today!

I started working through the freecodecamp HTML course, it felt good to start learning how to write code, it felt like second nature reading through the instructions on each challenge!

What I learned today is:

How to add images to a web page
How to write ordered and unordered lists using the ol, ul and li tags
How to add links using the anchor tag a and the href attribute
How to add checkboxes and radio buttons using the input tag

I was particularly impressed with learning how to add elements in the head tag in order to tell the website how to behave!

I’m looking forward to continuing tomorrow 😊