DEV Community: nerdeye

Day 3 of Coding Challenge! First CSS! Finally Some Color!

nerdeye — Wed, 26 May 2021 18:01:48 +0000

Look out world! This up-and-coming coder has added some spice to his web pages! All jokes aside, I am very excited to have been able to start learning how to style these pages. They aren't great but its a start. Thank you to Peter for sending me the Markdown format; hopefully I did it correctly but if not please let me know! Here's a breakdown of my notes:

Color: May be displayed and specified multiple ways

Name: Limited to the browser selection but colors can be used
through names (i.e. cyan)

RGB: Controls colors by adjusting the RGB color model (Red,
Green, and Blue. The color cyan can instead be written as
rgb(0,255,255)

Hexadcimal: Number systems based off the number 0-9 and A-
F(representing 10-15) Cyan would then be written as 00ffff or
in this case can be shortened to 0ff

Text:

Font-family: Gives the ability to select what font is seen. In
the case that the user's browser does not support that font
having a backup font and then the general font category gives
the user a similar experience to what you intended (i.e. font- family: Arial, Helvetica, sans-serif)

There are plenty of other ways to manipulate text including
text-align(orientation of the text), font-weight(boldness),
line-height(space between lines, standard number set at 1),
and lots more. Here's the MDN on the all the ways:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text

CSS Code:

Result:

DAY 2 of Coding Challenge! Forms and Ugly Tables

nerdeye — Mon, 24 May 2021 20:10:29 +0000

I'm very proud to say that I've written some of my first lines of code and drawn what I would say is a verryyy ugly chart. These concepts were easier to understand so I am very excited to start making these pages look spruced up with CSS! Even more importantly is the form infomation set to one day send to servers once it can be linked to Javascript

Table Notes:

thead: semantically represents the header info of the table (categories to a table)

tbody: semantically represents the body info of the table (the input info)

tr: table row

th: placed for each cell

rowspan: an attribute to manipulate how many rows the info will be between. Standard set to "1"

colspan: an attribute to manipulate how many columns the info will be between. Standard set to "1"
Code:

Result:

Forms:

button: Setting a button inside of a form will allow you to submit the form

input: this sets what type and category of info will be sent to the server
type: what kind of data is this? (i.e. text, password, color,
etc.)
id: specific to this one input. Only one named ID used per
input
name: names the form sent

label: labels the input and links it with the for attribute connected to the same input ID.

code:

result:

DAY 1 of Coding Challenge! Tags, Lists and More!

nerdeye — Fri, 21 May 2021 15:55:26 +0000

In an effort to follow in others footsteps and as I've seen suggested I've opted to tackle the Web Developer Bootcamp on Udemy.

Quick Notes of the sections learned today!
1) Tags
p paragraph tag meant to encapsulate text
h1 - h6 Title tags (only one h1 per page)
ul, ol, li Used for unordered lists, ordered lists. Place items of the lists with li
a anchor tags for links (place the url in the href)
img img tags (place url in the src)

2) Meta Tags
Needed to specific general information of HTML page
Broken into the head where the title and future CSS links go and body where the rest of the information of the page lives

3) Comments
Put anything text between  to have notes that devs can see but will not show up on the page itself. There is a hotkey shortcut for this! (ctrl / to toggle)

Whew that's a decent chunk for the day but we did it! If you have any tips or comments about the notes please let me know!

"Accountable Code" 30 Day Challenge to Start My Coding Journey

nerdeye — Wed, 19 May 2021 16:14:03 +0000

Hello World!

As time has passed and with little focus I can't say that I have been successful at coding much past that! As a newbie to this field I have come to accept that more accountability is needed for myself to remain diligently focused in progressing in learning code.

Therefore, as I begin this journey of what I'd like to call "accountable code" I plan on starting out with a 30 day challenge. The terms are simple, plan out a manageable attack strategy to start learning some web development basics and document every day for the next month of the progress that is made.

I hope that this in term can reiterate these concepts a second time and really hold me accountable for the duration of this time. I humbly understand that you can only learn so much in a given time frame but let's see together how far 'accountable coding' can go! I would love to interact with all of you as much as possible so if you have any pro tips or just want to talk, leave me a comment! Welp I'm off to start! See you folks tomorrow!

-Nerdeye