DEV Community: ofameh

CSS update | Day 18/30

ofameh — Wed, 21 Aug 2024 13:52:53 +0000

So far I have been through:

Intrinsic & Extrinsic Styling
The Box Model
Color
Cascading
Selectors: including attributes, pseudo, and complex
Resources material for the above: Link to material
I am Currently taking a Flexbox crash course Link to material.

I will update when I am done, implement everything and then start Javascript properly...

DAY 15/30 !!!

ofameh — Sun, 18 Aug 2024 01:45:39 +0000

On August, 3rd I started this project-based exercise with my first project being a one-page, HTML-only portfolio website.

Here: htmlpractice1.vercel.app/

Click here to view: Link

15 Days later and many projects in between, I revamped the same site and added some CSS I learnt so far to it

Here: https://portfolioupdated-iota.vercel.app/

Click here to view: Link

15 days from static to less static.
Feedback and thoughts are much appreciated!

Disclaimer: All elements in the web pages above are strictly for educational purposes.

Thanks again to Best Codes for the web dev link, helped a lot and the idea for the disclaimer...

Day 1 post for reference: https://dev.to/ofameh/html-css-javascript-in-30-days-101010-cof

CSS PROJECT 1 | GEMINI

ofameh — Sat, 17 Aug 2024 01:54:41 +0000

Thanks to Best Codes for suggesting web.dev site to me, it helped me grab CSS basics, which I used to build Gemini...

Link to site: GEMINI

Tell me what you think in the comments
https://gemini-kappa-ten.vercel.app/

CSS Project 1

ofameh — Tue, 13 Aug 2024 20:37:17 +0000

Was advised to learn native CSS instead of Tailwind and with that, I present Project 1
Starting small, Day 1 will be to replicate this simple one-page site, and style it as shown in the image below:

HTML | 10/10 ✅ || DAY 1 TAILWIND CSS

ofameh — Tue, 13 Aug 2024 07:56:17 +0000

Excited to have completed this exercise, over the past 10 days I've been writing HTML code and building projects along side
In 10 days, I built 10 different HTML sites fully maximizing my HTML prowess

Next up is CSS(Tailwind)
Using CSS to style these sites I previously built and give them a breath of fresh air.

After CSS I'd conclude it all with intense JavaScript
All in 30 days...

The End HTML | Tailwind CSS next up

ofameh — Sat, 10 Aug 2024 14:48:02 +0000

I am here to conclude the first part of this 30 day exercise
I believe i have learnt so much HTMl and the previous projects i posted here can prove that, next up is Tailwind CSS, then Javascript and i can return to building with react...

I initially started this 30 day exercise because i lost touch with the basics and i needed a refresher, normally i write in React and when this exercise is over it will only make me a better react developer.
BE THERE!

Blog Site | Websites for Days 7 | 10

ofameh — Fri, 09 Aug 2024 21:50:06 +0000

Excited to share this site with you all
Link to site: https://blog-ofameh.vercel.app

Click to Access: BLOG SITE

Implemented everything I learnt throughout these 10 days on this...

The styling (CSS) slowed me down but I eventually got the hang of it and learnt a lot from it.

Here is the code, a little lengthy so i uploaded on notion, check it out: https://www.notion.so/Blog-Site-Code-Base-4a5bd8b6fea047d09f9857acfe75e03e?pvs=4

Next, Day 8 | 10.. Be there

WebsitesforDays | 7/10

ofameh — Thu, 08 Aug 2024 20:13:27 +0000

*Blog Site
*

For Day 7 i am building a blog site, still working on it but it's important i update you guys before the day runs out...

Want it to be fully responsive and really beautiful so it is not a one day job, today's site is a 2 day site.

Excited to show you guys the results, stay tuned!

Day 6/10- Websites for Days

ofameh — Wed, 07 Aug 2024 23:37:12 +0000

After 5 days of progressive HTML learning, I'm very happy that we are in the final phase of this all, the project-based section of this course, where I just build websites and challenge myself...

A simple user-login & Signup page

Link to project User Page

HTMl for Sign up page-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Signup Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h2>User Login Page</h2>
    </header>
    <section>
      <main style="text-align: center;">
      <br/>
      <br/>
      <b> <h3> Enter Login Details </h3> <br/>
      </main>
      <article  class="container">
      <br/>
      <form>
      <b> <label for="email"> Email </label> <b> <br/>
      <input type="email" id="email" name="email"> <br/>
      <br/>
      <b> <label for="password"> Password </label> </b> <br/>
      <input type="password" id="password" name="password"> <br/>
      <br/>
      <button>Submit</button> <br/>
      </form> 
      <br/>
      <p>
      Don't Have An Account? <a href="signup.html">Sign Up</a>
      </p>
      </article>
    </section>
    <section>

    </section>
  </body>
</html>

HTML for Sign Up page-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Signup Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h2>User Signup Page</h2>
    </header>
    <section>
      <main style="text-align: center;">
      <br/>
      <br/>
      <b> <h3> Enter Signup Details </h3> <br/>
      </main>
      <article  class="container">
      <br/>
      <form>
      <b> <label for="fname"> First Name </label><br/> 
      <input type="text" id="fname" name="fname"><br/>  
      <br/> 
      <b> <label for="lname"> Last Name </label> <br/>   
      <input type="text" id="lname" name="lname"> <br/>
      <br/> 
      <b> <label for="email"> Email </label> <b> <br/>
      <input type="email" id="email" name="email"> <br/>
      <br/>
      <b> <label for="password"> Password </label> </b> <br/>
      <input type="password" id="password" name="password"> <br/>
      <br/>
      <button>Submit</button> <br/>
      </form> 
      <br/>
      <p>
      Already Have An Account? <a href="index.html">Sign In</a>
      </p>
      </article>
    </section>
    <section>

    </section>
  </body>
</html>

CSS styles-

/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

/* Body styles */
body {
  background-color: antiquewhite;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  flex-direction: column;
}

/* Header styles */
header {
  text-align: center;
  margin-bottom: 20px; /* Add some space between the header and the content */
}

/* Article styles */
article {
  border: 1px solid black;
  padding: 20px; /* Add some padding inside the border */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: Tahoma, sans-serif;
  background-color: antiquewhite; /* Add background color for better visibility */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add some shadow for better look */
}

/* h3 styles */
h3 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
}

Simple interactive user login & signup website...

Day 5/10 | HTML

ofameh — Wed, 07 Aug 2024 18:35:01 +0000

Today, I built a website
Putting together the cumulative knowledge from the last 5 days, I built a functional recipe book site, with a touch of CSS for styling.

Link to site-

HTML Block of code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Recipe Book</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Ofameh's Recipe Book</h1>
    </header>
    <nav>
      <ul>
        <li>
          <button onclick="location.href='#breakfast';">Breakfast</button>
        </li>
        <li>
          <button onclick="location.href='#lunch';">Lunch</a></button>
        </li>
        <li>
          <button onclick="location.href='#dinner';">Dinner</a></button>
        </li>
        <li>
          <button onclick="location.href='#breakfast';">Dessert</a></button>
        </li>
        <li>
          <button onclick="location.href='#contact';">Contact</a></button>
        </li>
      </ul>
    </nav>
    <main>
      <section id="breakfast">
        <h2>Breakfast Recipes</h2>
        <article>
          <h3>Pancakes</h3>
          <img src="./images/pancake.jpg" alt="Pancakes" />
          <h4>Ingredients:</h4>
          <ul>
            <li>2 cups all-purpose flour</li>
            <li>2 tablespoons sugar</li>
            <li>2 teaspoons baking powder</li>
            <li>1 teaspoon baking soda</li>
            <li>1/2 teaspoon salt</li>
            <li>2 cups buttermilk</li>
            <li>2 large eggs</li>
            <li>1/4 cup melted butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>In a bowl, mix the dry ingredients together.</li>
            <li>In another bowl, whisk the wet ingredients together.</li>
            <li>Combine the dry and wet ingredients and mix until smooth.</li>
            <li>Heat a griddle over medium heat and grease it lightly.</li>
            <li>
              Pour batter onto the griddle and cook until bubbles form on the
              surface.
            </li>
            <li>Flip and cook until golden brown on the other side.</li>
          </ol>
        </article>
      </section>
      <section id="lunch">
        <h2>Lunch Recipes</h2>
        <article>
          <h3>Grilled Cheese Sandwich</h3>
          <img
            src="./images/grilled_cheese.jpg"
            alt="Grilled Cheese Sandwich"
          />
          <h4>Ingredients:</h4>
          <ul>
            <li>2 slices of bread</li>
            <li>2 slices of cheese</li>
            <li>Butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Butter one side of each slice of bread.</li>
            <li>
              Place one slice of bread, buttered side down, on a skillet over
              medium heat.
            </li>
            <li>
              Top with cheese and the other slice of bread, buttered side up.
            </li>
            <li>
              Cook until the bread is golden brown and the cheese is melted,
              flipping once.
            </li>
          </ol>
        </article>
      </section>
      <section id="dinner">
        <h2>Dinner Recipes</h2>
        <article>
          <h3>Spaghetti Bolognese</h3>
          <img
            src="/images/spaghetti_bolognesse.webp"
            alt="Spaghetti Bolognese"
          />
          <h4>Ingredients:</h4>
          <ul>
            <li>200g spaghetti</li>
            <li>2 tablespoons olive oil</li>
            <li>1 onion, chopped</li>
            <li>2 garlic cloves, minced</li>
            <li>400g ground beef</li>
            <li>1 can of tomatoes</li>
            <li>2 tablespoons tomato paste</li>
            <li>1 teaspoon dried oregano</li>
            <li>Salt and pepper to taste</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Cook the spaghetti according to package instructions.</li>
            <li>
              Heat olive oil in a pan and sauté the onion and garlic until
              softened.
            </li>
            <li>Add the ground beef and cook until browned.</li>
            <li>
              Stir in the tomatoes, tomato paste, and oregano. Simmer for 20
              minutes.
            </li>
            <li>Season with salt and pepper.</li>
            <li>Serve the sauce over the spaghetti.</li>
          </ol>
        </article>
      </section>
      <section id="dessert">
        <h2>Dessert Recipes</h2>
        <article>
          <h3>Chocolate Cake</h3>
          <img src="./images/chocolate_cake.jpg" alt="Chocolate Cake" />
          <h4>Ingredients:</h4>
          <ul>
            <li>1 and 3/4 cups all-purpose flour</li>
            <li>1 and 1/2 cups sugar</li>
            <li>3/4 cup cocoa powder</li>
            <li>1 and 1/2 teaspoons baking powder</li>
            <li>1 and 1/2 teaspoons baking soda</li>
            <li>1 teaspoon salt</li>
            <li>2 large eggs</li>
            <li>1 cup milk</li>
            <li>1/2 cup vegetable oil</li>
            <li>2 teaspoons vanilla extract</li>
            <li>1 cup boiling water</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Preheat your oven to 350°F (175°C) and grease a cake pan.</li>
            <li>In a large bowl, combine the dry ingredients.</li>
            <li>
              Add the eggs, milk, oil, and vanilla, and beat on medium speed for
              2 minutes.
            </li>
            <li>Stir in the boiling water (batter will be thin).</li>
            <li>Pour the batter into the prepared pan.</li>
            <li>
              Bake for 30-35 minutes, or until a toothpick inserted into the
              center comes out clean.
            </li>
          </ol>
        </article>
      </section>

      <section id=contact>
        <h2> Contact Us </h2>
        <article>
          <b> Want More Recipes </b> <br/>
         <label for="subscribe"> Subscribe to our newsletter </label>
         <input type="checkbox" id="subscribe" name="subscribe"> <br/>
         <br/>
         Shoot us an email: <a href="mailto:osowoofameh@gmail.com" target="_blank"> <button> Email </button> </a> <br/>
         <br/>
         Catch Us on X: <a href="https://x.com/trader_mkk" target="_blank"> <button> Twitter </button></a>
         <br/>
        </article>
      </section>
    </main>
    <footer>
      <p>
        <b>
          &copy; 2024 Ofameh <br />
          All rights reserved.</b
        >
      </p>
    </footer>
  </body>
</html>

CSS Block of code-

 body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header,
main,
footer {
  padding: 20px;
  margin: 10px;
}

header {
  background-color: black;
  color: white;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

nav ul li {
  margin: 0 10px;
}

section {
  margin-bottom: 20px;
}

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
}

Putting together all I have learnt so far on day 5 to build this has been fulfilling to me because the whole point of this exercise is project-based learning.
So actually doing this for 5 days and being able to build a site as good as that means a lot to me

That being said, Days 6 - 10 will feature what I call websites for days, here each day I will build a site which will progressively get harder and more complex.
Be there!

Day 5/10 | HTML

ofameh — Wed, 07 Aug 2024 18:34:57 +0000

Today, I built a website
Putting together the cumulative knowledge from the last 5 days, I built a functional recipe book site, with a touch of CSS for styling.

Link to site- Ofameh_Recipe_Site

HTML Block of code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Recipe Book</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Ofameh's Recipe Book</h1>
    </header>
    <nav>
      <ul>
        <li>
          <button onclick="location.href='#breakfast';">Breakfast</button>
        </li>
        <li>
          <button onclick="location.href='#lunch';">Lunch</a></button>
        </li>
        <li>
          <button onclick="location.href='#dinner';">Dinner</a></button>
        </li>
        <li>
          <button onclick="location.href='#breakfast';">Dessert</a></button>
        </li>
        <li>
          <button onclick="location.href='#contact';">Contact</a></button>
        </li>
      </ul>
    </nav>
    <main>
      <section id="breakfast">
        <h2>Breakfast Recipes</h2>
        <article>
          <h3>Pancakes</h3>
          <img src="./images/pancake.jpg" alt="Pancakes" />
          <h4>Ingredients:</h4>
          <ul>
            <li>2 cups all-purpose flour</li>
            <li>2 tablespoons sugar</li>
            <li>2 teaspoons baking powder</li>
            <li>1 teaspoon baking soda</li>
            <li>1/2 teaspoon salt</li>
            <li>2 cups buttermilk</li>
            <li>2 large eggs</li>
            <li>1/4 cup melted butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>In a bowl, mix the dry ingredients together.</li>
            <li>In another bowl, whisk the wet ingredients together.</li>
            <li>Combine the dry and wet ingredients and mix until smooth.</li>
            <li>Heat a griddle over medium heat and grease it lightly.</li>
            <li>
              Pour batter onto the griddle and cook until bubbles form on the
              surface.
            </li>
            <li>Flip and cook until golden brown on the other side.</li>
          </ol>
        </article>
      </section>
      <section id="lunch">
        <h2>Lunch Recipes</h2>
        <article>
          <h3>Grilled Cheese Sandwich</h3>
          <img
            src="./images/grilled_cheese.jpg"
            alt="Grilled Cheese Sandwich"
          />
          <h4>Ingredients:</h4>
          <ul>
            <li>2 slices of bread</li>
            <li>2 slices of cheese</li>
            <li>Butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Butter one side of each slice of bread.</li>
            <li>
              Place one slice of bread, buttered side down, on a skillet over
              medium heat.
            </li>
            <li>
              Top with cheese and the other slice of bread, buttered side up.
            </li>
            <li>
              Cook until the bread is golden brown and the cheese is melted,
              flipping once.
            </li>
          </ol>
        </article>
      </section>
      <section id="dinner">
        <h2>Dinner Recipes</h2>
        <article>
          <h3>Spaghetti Bolognese</h3>
          <img
            src="/images/spaghetti_bolognesse.webp"
            alt="Spaghetti Bolognese"
          />
          <h4>Ingredients:</h4>
          <ul>
            <li>200g spaghetti</li>
            <li>2 tablespoons olive oil</li>
            <li>1 onion, chopped</li>
            <li>2 garlic cloves, minced</li>
            <li>400g ground beef</li>
            <li>1 can of tomatoes</li>
            <li>2 tablespoons tomato paste</li>
            <li>1 teaspoon dried oregano</li>
            <li>Salt and pepper to taste</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Cook the spaghetti according to package instructions.</li>
            <li>
              Heat olive oil in a pan and sauté the onion and garlic until
              softened.
            </li>
            <li>Add the ground beef and cook until browned.</li>
            <li>
              Stir in the tomatoes, tomato paste, and oregano. Simmer for 20
              minutes.
            </li>
            <li>Season with salt and pepper.</li>
            <li>Serve the sauce over the spaghetti.</li>
          </ol>
        </article>
      </section>
      <section id="dessert">
        <h2>Dessert Recipes</h2>
        <article>
          <h3>Chocolate Cake</h3>
          <img src="./images/chocolate_cake.jpg" alt="Chocolate Cake" />
          <h4>Ingredients:</h4>
          <ul>
            <li>1 and 3/4 cups all-purpose flour</li>
            <li>1 and 1/2 cups sugar</li>
            <li>3/4 cup cocoa powder</li>
            <li>1 and 1/2 teaspoons baking powder</li>
            <li>1 and 1/2 teaspoons baking soda</li>
            <li>1 teaspoon salt</li>
            <li>2 large eggs</li>
            <li>1 cup milk</li>
            <li>1/2 cup vegetable oil</li>
            <li>2 teaspoons vanilla extract</li>
            <li>1 cup boiling water</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Preheat your oven to 350°F (175°C) and grease a cake pan.</li>
            <li>In a large bowl, combine the dry ingredients.</li>
            <li>
              Add the eggs, milk, oil, and vanilla, and beat on medium speed for
              2 minutes.
            </li>
            <li>Stir in the boiling water (batter will be thin).</li>
            <li>Pour the batter into the prepared pan.</li>
            <li>
              Bake for 30-35 minutes, or until a toothpick inserted into the
              center comes out clean.
            </li>
          </ol>
        </article>
      </section>

      <section id=contact>
        <h2> Contact Us </h2>
        <article>
          <b> Want More Recipes </b> <br/>
         <label for="subscribe"> Subscribe to our newsletter </label>
         <input type="checkbox" id="subscribe" name="subscribe"> <br/>
         <br/>
         Shoot us an email: <a href="mailto:osowoofameh@gmail.com" target="_blank"> <button> Email </button> </a> <br/>
         <br/>
         Catch Us on X: <a href="https://x.com/trader_mkk" target="_blank"> <button> Twitter </button></a>
         <br/>
        </article>
      </section>
    </main>
    <footer>
      <p>
        <b>
          &copy; 2024 Ofameh <br />
          All rights reserved.</b
        >
      </p>
    </footer>
  </body>
</html>

CSS Block of code-

  body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header,
main,
footer {
  padding: 20px;
  margin: 10px;
}

header {
  background-color: black;
  color: white;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

nav ul li {
  margin: 0 10px;
}

section {
  margin-bottom: 20px;
}

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
}

That being said, Days 6 - 10 will feature what I call websites for days, here each day I will build a site which will progressively get harder and more complex.
Be there!

Hint | Day 5

ofameh — Mon, 05 Aug 2024 23:02:04 +0000

Day 5/10 being the half of this 10-day journey, I will touch up on HTML media, learn plugins & Youtube then build a full HTML site based on the knowledge I have gathered these 5 days

At the start of this exercise, I named it project-based learning and this is what I intend to do, learn in real-time by building projects and not just taking tutorial upon tutorial
Yes, the certificates are good, but the hands-on expertise cannot be bought.

Good night Dev community, see you guys tomorrow