John Paul Ledio Regaton

Hello everyone!

This marks the Day 1 of my learning journey of becoming Full-Stack Web Developer, which is exciting because this is my first day of documenting my learning progress. In the following weeks I will just focus on learning HTML and CSS.

What I learned:

I understand better the role of SEO in the website and why it matters. For a reason they help your webpage to become discoverable and rank better in search results, this will help you to deliver your website to target users and to understand by search engines like Google to know what is your website all about. Common elements used are meta element, title element and content and description.

I understand the boilerplate of HTML that will serve as my guide in creating documents. Using this, I can now distinguish which belong to head elements and body elements. As a beginner this is useful to avoid confusion and manage the HTML structure.

I understand the importance of optimizing media elements for the website since this may affect the content load of the website especially when there are many users who visit your website daily or who have unstable internet connectivity for some users.

I understand using video elements and audio elements for the website. I learned that you need to consider the different formats for your video and audio since not all browsers support the certain file formats so it is important to consider using multiple sources. I also study the iframe element which you can use as embedded content to paste external sources to your website like google maps or Youtube videos.

What I Built:

I built a simple landing page using HTML which contains video and audio elements, embedded source content like Youtube video courses, basic meta elements containing SEO and applying basic semantics HTML.

Image of source code in Visual Studio Code of the project

An image about the webpage of the project using HTML

An image about the webpage of the project using HTML

Challenges:

I struggled in remembering the syntax well and how to apply them properly, since some syntax are confusing by function itself and using them, for example, the difference between href and src and when to properly use them, this is sample question that comes to my mind- “Can link element can use scr and script can use href?” As a beginner I found it confusing.

Key Takeaways:

Understand the elements and attributes better such as how to properly use them and when to use them. This will help you as you move forward to advanced concepts.

Learn from your mistakes and use them to improve your project.

Tomorrow's Goal:

I will still continue working on building my foundation in HTML and build projects alongside it before moving to CSS.

Thanks for reading!

See you in Day 2

Resources

GitHub Profile

https://github.com/JohnPaul-dev30

Project Source Code

https://github.com/JohnPaul-dev30/mini-projects/tree/main/frontend/building-a-professional-landing-page.html