Hey Folks! writing this blog as a reflection on my learnings, I am enrolled in a Frontend Developer Career Path by Scrimba. Scrimba is an interactive coding platform where one can learn about modern web tech and get a headstart in web development

FDCP: Scrimba Program

So Lets BEGIN! 💁‍♂️

So we are going to learn some fundamental concepts through this project in HTML and CSS.

Figma Design for the Homepage we are going to build 👇.

https://www.figma.com/file/2QuGfAOcHaZJ6aHXfuamnK/Hometown-Homepage?node-id=0%3A1

# Setup

For the demo purpose we are going to use code sandbox
You can opt for your preferable code editor like VScode, Atom, etc, or can continue with code sandbox
will start the project by creating index.html and index.css files in our hometown folder.

./hometown-project
        | - index.html
        | - index.css

Html Structure

From the given Figma design we can break our homepage into 3 sections

Header section, Main Section, Contact Section. so let's write semantic HTML for 3 sections into <body> tag

Header

<header>
    <h2 class="title">Visit Torshov</h2>
    <p class="text">
      Enjoy culture and sports in this vibrant district close to the center of
      Oslo.
    </p>
 </header>

Main

we are going to follow a specific HTML structure for our individual activity component so that we can further apply CSS efficiently.

Activity structure

<div class="activity">
      <img class="activity-img" src="" alt="">
      <h4 class="activity-title"></h4>
      <p class="activity-text"></p>
</div>

overall main section

     <section class="activities">
      <h2>Top three activities to do at Torshov</h2>

      <div class="activity">
        <img
          class="activity-img"
          src="https://images.unsplash.com/photo-1562329265-95a6d7a83440?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1070&q=80"
          alt="theatre"
        />
        <h4 class="activity-title">
          Attend a show or a concert
        </h4>
        <p class="activity-text">
          The Torshov Theatre is a great place to spend your night out.
        </p>
      </div>

      <div class="activity">
        <img
          class="activity-img"
          src="https://images.unsplash.com/photo-1519331379826-f10be5486c6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
          alt="a beautiful park"
        />
        <h4 class="activity-title">
          Go for a piknic in the local park
        </h4>
        <p class="activity-text">
          The Torshov Park is perfect for piknic, getting some tan, or just
          chilling out.
        </p>
      </div>

      <div class="activity">
        <img
          class="activity-img"
          src="https://images.unsplash.com/photo-1622225074638-1d80c0388697?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1086&q=80"
          alt="field-playground"
        />
        <h4 class="activity-title">Play sports at the Lilleborg field</h4>
        <p class="activity-text">
          Play volleyball, football, or basketball, or lift some weights.
        </p>
      </div>
    </section>

Contact Section

   <div class="contact">
      <div class="card">
        <img
          src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=399&q=80"
          alt="user guide"
        />
        <div class="card-content">
          <h2 class="card-title">Your guide</h2>
          <p class="card-intro">
            “I have lived at Torshov for over 30 years, so I can show you all of
            its best parts and hidden secrets.”
          </p>
          <h4 class="card-subtitle">
            Per Harald Borgen
          </h4>
        </div>
      </div>
    </div>

🎉🎉html layout completed

Final Html structure would look like this
https://x0xodp.csb.app/

Summary of this Blog

keypoints to note is use of semantic html tags like header, section
Also have a look at classnames, alt tag for images and why they are used
resource to learn more about semantic html semantic html

Once you are ready with html structure, we will begin with adding CSS to our homepage 🎨

To keep this blog Short will continue the css part into part-2 of this blog where we are going to see basic concepts of css like inheritance, reset, flexbox, utility classes etc

That's all for this blog let's meet again in Part 2 -CSS Basics

Thank You 💖

Let's break the tutorial loop and regain the powers of HTML & CSS by building stuff.

Dheeraj Purohit's Blog