DEV Community: Daniela Garcia

Part 2: Learning HTML

Daniela Garcia — Fri, 12 Jul 2024 03:54:37 +0000

July 6, 2024

I am working on Codeacademy's HTML Fundamentals Lesson and have learned a few HTML concepts:

Start an HTML file with the <!DOCTYPE html> declaration. This allows the browser to interpret the file as containing html content and works with the correct version of HTML.
The next line should contain the <html> element. Add all of the code between the html open and closing tags.
Information which will not be shown/rendered on the web page is contained inside between the <head> open and closing tags.
Use the <title> element inside of the head to display the web page name on the browser's tab.
Use <a> anchor elements to add links to internal/external pages.
You can organize your code (spacing/indentation) however you like and it won't reflect on the web page (unless you are nesting incorrectly, which is why indenting and spacing to create readable code is important!).
Use the following syntax to comment out code or information from the html file: " . The content inside of this code will not be visible on the web page.

Command Line Interface Project

Daniela Garcia — Fri, 12 Jul 2024 03:44:43 +0000

July 11, 2024 | 10:36 pm

Link to my app: https://github.com/dgarcia13-99/Coffee-order-app

For the CLI Project, I decided to create a coffee shop app that allows a user to view the coffee menu, place an order, and view their order status. Creating this app has been both challenging and rewarding. I was excited to develop an interactive application while utilizing my newfound knowledge of Ruby. I learned quite a lot about creating a Class while working on this project and intend on practicing these concepts.

One of the major challenges I faced while working on this project was determining which information and steps to prioritize. I found myself creating methods that would require a ton of additional steps, so I decided to simply my project so that I can add to it later on. Additionally, I felt constrained by my limited experience and relying on concepts from the Ruby reference.

Despite these challenges, seeing the app come together and function as intended was immensely satisfying. It may not be perfect, and I acknowledge that there are areas where I could improve the efficiency of my code. Yet, the fact that the app works and fulfills its basic functionalities is a testament to my progress in learning Ruby.

Looking ahead, I am eager to continue refining the coffee shop app. I see it as an opportunity not only to enhance my understanding of Ruby but also to explore more advanced concepts and best practices. By persistently iterating on this project, I aim to build upon my skills and develop code that is not only functional but also well-structured and maintainable.

Learning HTML Elements

Daniela Garcia — Sun, 07 Jul 2024 04:44:07 +0000

July 6, 2024 | 10:15 pm

Today I worked on Codeacademy's Learn HTML Fundamentals and learned quite a bit of the components of a web page. HTML, also known as Hypertext Markup Language, is the skeleton of a web page; we use elements, such as body elements, paragraphs, divisions, and headings to populate, organize, and style the page.

We'll create these elements by 'tagging' them using this symbol: <>. To add content like pictures, text, etc. you add an _opening tag with the name of the type of element inside the <> symbol, place the content after this tag, and use a closing tag preceded by a forward slash to create the element that will be presented on the page.

While all of this information is important for the understanding of markup language, I think the most important portion of the lesson is the mention of 'hierarchy' with tags. Nesting tags inside the content of other tags forms a relationship between the elements. The child is the element nested inside another element. This element becomes the parent element, and its child inherits the parent's functionality. Thus, nesting/organization should be considered while adding content to the web page.

Summary of things I learned today:

Organize a web page using elements : paragraphs, lists, divisions, body, headings, etc.
Headings come in different sizes, from the largest size of 1 to smallest size of 6, to allow for subheadings.
Divs, or divisions, are one of the most important components of a web page. They organize elements into separate blocks of content so they are more easily styled and manipulated. This allows this block of code to be manipulated differently and separately from other elements.
Attributes allow for the identification of elements. At times, an element will be used more than once, so we'll customize the element so the developer can easily identify how certain elements are organized.
Use em and strong tags to italicize and highlight text (inline markup).
Use br to create line breaks and space text.
Use ul to bulletpoint an unordered list, where the list items are not organized in a particular order. You'll need to use a li tag for each list item.
Use ol to bulletpoint an ordered list, where the list items are organized in a particular order. Similar to unordered lists, you'll need to use a li tag for each list item.
Use img to add an image to a web page. This tag is self closing, so you wont need a closing tag. Instead, set the source (src) attribute inside the img tag equal to the link to the image and finish by adding a forward slash before the > symbol. To add a description/caption for the image, use the alt attribute inside the image tag and set it equal to the text that will be displayed as a caption.
Use video to add a video to the web page. Set the source equal to the link to the video. Use the appropriate closing tag. To customize the size and functionality of the video define the width, height, and controls attributes.