You are browsing as a guest. Sign up (or log in) to start making projects!

@JJ on Dragon Warrior Game

2h 39m 55s logged

Dev Log# 2 Part - (1/2) Had to retype everything due to the 4,000 character limit 😭

LOL THIS ONE IS GONNA BE A BIG CHUNK. (This will also help y’all with the personal engagement piece when you rate this project.)

I was away on Day 2, so I couldn’t really code. For Days 3 and 4, I focused on getting my HTML and CSS fundamentals down before I write another journal. AND BEFORE I TALK ABOUT WHAT I LEARNED, I want to talk about my experience.

Back in middle school, I did a little bit of Python, and it’s been fun seeing how HTML and CSS use human-like words instead of looking like random bits and symbols. You want to change the background color? Just go into styles.css and change the color. That’s it. Easy. Sauce.

While I’m still learning, I’ve already started brainstorming a few projects I want to make to test my knowledge:

  1. I’m thinking of creating a personal portfolio site. Just a simple “Hello, this is my first website, here’s my journey” type of thing.

  2. During my first project, when I worked with the Slack bot, I became really interested in APIs. From what I’ve seen, JavaScript works really well with them, so I think it would be fun to make something like a weather tracker or a top news dashboard. I want something that uses JavaScript to fetch information and bring it onto my screen.

  3. Calculator app (a lot of people make this lol).

  4. Tic-Tac-Toe. One of those classic beginner projects.

Anyways, here’s the big dump for y’all to show the new terms and concepts I’ve learned over the past two days.

HTML

When you use <a href="link.com">, it is generally expected that the link opens in the same tab. However, this can be changed.

Using target="_blank" forces the webpage to open in a new tab.

There’s also the concept of Relative URLs vs. Absolute URLs. A relative URL points to another file within your project, such as about.html. An absolute URL includes the full web address, such as https://example.com, which tells the browser to navigate to a website.

<head> is for information and settings that the browser uses behind the scenes.

  • Favicon = the little image that appears beside the website title.
  • Title = the name of the webpage shown on the browser tab.

<body> is the part of the webpage that users actually see.

You can use mailto: in a link, and it will open the user’s default email application to send an email.

I learned how to make a table:

  • tr = table row
  • td = table data (a table cell)

(I learned the hard way that it’s usually easier to organize layouts using div containers.)

Speaking of div, it’s basically a container for your code. Let’s say you’re making a dropdown menu—you can place all the related code inside a single div to keep everything organized.

I also learned about lists:

  • ul = unordered list
  • ol = ordered list
  • li = list item

Description lists:

  • dl = description list
  • dt = description term
  • dd = description definition

Block elements stay on their own line and take up available width, while inline elements flow with the content around them.

iframe is used to display another webpage inside your webpage, although some websites prevent themselves from being embedded.

For symbols, one method is to use HTML entities. For example:

&#9829; = ♥

I also learned about HTML forms:

There are two common methods for sending data:

  • POST = sends data without showing it in the URL.
  • GET = the default method if none is specified. It sends data through the URL, making it visible in browser history and the address bar.

There’s stuff in the Comment section aswell ~ continued.

0
3

Comments 1

@JJ

DevLog #2 (Part 2/2)

CSS

Opacity → controls how transparent an element is.

.class → a way of grouping elements into categories.

* → the universal selector. It applies styles to all elements.

h1, p → you can separate selectors with commas to apply the same CSS rules to multiple elements.

Margin → the space outside an element.

margin: inherit; → if a parent element (such as a div) has a margin, a child element can inherit that same margin value.

Border → the outline around an element.

Different border styles:

Dotted → dotted border. Solid → solid line. Dashed → dashed border. Groove → 3D grooved effect. Ridge → 3D ridged effect. Inset → inward bevel effect. Outset → outward bevel effect.

border: none; → removes the border.

border-style: hidden; → hides the border.

border-width → controls border thickness.

max-width → helps elements scale properly across different screen sizes.

max-height → limits how tall an element can become.

Outline → similar to a border, but separate from it.

outline-offset → controls the space between the outline and the element.

text-align → controls text alignment (left, right, center, etc.).

text-align: justify; → spreads text evenly across the available width.

text-align-last → controls the alignment of the last line of text.

Example:

text-align-last: center;

This centers the final line.

text-decoration → things like underlines, overlines, and line-through effects.

text-transform → changes capitalization (uppercase, lowercase, capitalize).

text-indent → indents the first line of text.

letter-spacing → controls the spacing between letters.

font-family → controls which font is used. If you want custom fonts, you can import them (for example, from Google Fonts) and declare them in your HTML.

font-weight → controls how bold or light the font appears.

font-size → controls text size.

Icons → often imported similarly to custom fonts through icon libraries.

:hover → applies styles when the mouse cursor moves over an element.

display: none; → completely hides an element.

h1 b {} → applies styles to every b tag inside an h1.

h1 > b {} → applies styles only to b tags that are direct children of an h1.

Finally, I learned how to create a dropdown menu by combining a lot of these concepts together.

I’ve decided that every time I make a post, I’ll upload the entire folder to Vercel and create a new link. That way, the people rating the project can actually see the amount of learning and the changes I’ve made over time, rather than thinking I just copied and pasted elements together. It’ll basically act as a timeline of my progress throughout the project. The website is VERY, VERY, VERY messy right now. It’s basically just an empty space to showcase all the progress I’ve made so far.

https://log-2-devlog.vercel.app/