Weekly Progress Report: Insights of Week-1

Introduction -

Hello everyone!

This week marks the beginning of my Web Development journey, as I started learning through "Sigma Web Development course" by Haris Ali Khan aka CodeWithHarry on YouTube, gained some foundational knowledge, and started practicing. Let's see where it goes.

How am I going to approach Web Development?

Frontend→ Projects→ Backend→ Framework→ Database→ more Projects→ Hosting/Deployment

So, for now, I'm focusing on the Frontend.

Things I Learned:

• Client-Server-Browser Interaction:

  As clients, we send a request to the browser. The browser then forwards this request to the servers. After the server responds, the browser processes the response and displays it to us.

• What does frontend actually mean? -It's about how the website looks. (Html and CSS are standard languages for frontend)

• What does backend actually mean? -It's about how the server processes requests.

• Frameworks -tools that help us use languages more easily and quickly.

• Various HTML Tags. (void elements, list elements, table tags, etc.)

• SEO (Search Engine Optimization) method Core Web Vitals (mainly LCP, FID, CLS) are important to remember when building a website.

  LCP- Largest Contentful Paint (loading time)

  FID- First Input Delay (interactivity ready time)

  CLS- Cumulative Layout Shift (Visual Stability)

  They greatly help make your website more visible and improve its ranking.

• SEO elements:

  -Title tag: If it accurately reflects your website content, then it's a good SEO practice.

  -Meta description tags: Brief info of our website when they appear on search engine, nowadays it's automatically generated by search engines from your content.

• Post and Get request in a form, and more sub tags of a form tag.

• Inline elements take up only the necessary width of a page, while block elements take up the entire width of a page.

• IDs are unique identifier and classes can be assigned to multiple elements.

• IDs can also be used as Linking.

• Sub attributes of Audio and Video tags (controls, autoplay, loop, muted, preload)

  Using preload is a good practice, I think.

• SVG (used to draw shapes, icons, logos, graphs, animations, and more directly in HTML — using code, not images.)

• got to know about iframe tag. (not compatible with all websites, like they have some security issues).

Steps I did:

• Basic Html structure, linking CSS and JavaScript in it.

• Built a bookmark website.

• used ordered/unordered list tags and table tags to make an example table.

• After learning SEO terminology, I inspected and checked out well-known websites and generated their Lighthouse report -which shows the Core Web Vitals parameters.

• Made a SEO friendly website.

• Made a form template of registering a user.

• ID and Class identifying by using CSS.

• Used audio and video tags and added attributes to them.

• Did two quizzes.

Challenges I Faced:

No major challenges were faced this week!

Just a small issue—I couldn't align the SVG icon with the heading (YouTube). I know I can fix it by adding some CSS.

The basic concepts were very easy and enjoyable to learn.

Source Codes:

https://github.com/avinashh-gh/SourceCodes-WebDev

GitHub Profile- avinashh-gh

LinkedIn Profile-701181368

P.S. This is the first blog I've ever written.