Photo by Hide Obara on Unsplash
Html & CSS Recap - Part 1
Let's break the tutorial loop and regain the powers of HTML & CSS by building stuff.
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 ๐.
# 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
andindex.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>
tagHeader
<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
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.