Last Month i Joined The Side Hustle As an Intern Which Allowed Me To Learn And Put My Skills Into Pratice. This was a new and exciting opportunity for me to test my knowledge and skills in real life. As It Created A Hurdle Of Increasing My Learning Curve And And Putting My Problem Solving Skills To Test.The skills I have Gained and the knowledge I am taking away are immeasurable, The Industry Exposure I Received during my internship will always be a valuable guide for me in the future.

A Bit About Sidehustle Internship

Each Week We Are Given A Test and A Task To Complete So As To Evaluate Us on Topics Taught

You Can View Week One Task Here A Tribute To Mandela

Below Is the Challenge For The Second Week

Frontend Mentor - Fylo dark theme landing page solution

This is a solution to the Fylo dark theme landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Overview
My process
Author
Acknowledgments

Overview

The challenge

Users should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page

Screenshot

Desktop View

My process

Built with

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow

What I learned

i Was Able To Learn, Sharpen and Increase My Frontend Skills(Grid, Flexbox, Positioning, Responsive Web Development Etc) and Problem Solving Skills With These Project, it was Quite Handful Especially When Building With Just HTML and CSS And Considering The Responsiveness On All Mobile Platform.

A Piece of Html I Really like

<div class="card">
  <div class="text">
    Fylo has improved our team productivity by an order of magnitude. Since
    making the switch our team has become a well-oiled collaboration machine.
  </div>
  <div class="details">
    <img src="images/profile-2.jpg" alt="" />
    <div class="name">
      <h5>Bruce McKenzie</h5>
      <p>Founder & CEO, Huddle</p>
    </div>
  </div>
</div>

it Css

.card {
  border: 1px solid hsl(219, 30%, 18%);
  background-color: hsl(219, 30%, 18%);
  padding: 2em;
  width: auto;
  border-radius: 5px;
  margin-bottom: 1.7em;
  box-shadow: 2px 3px 15px rgb(41, 38, 38);
}

Continued development

i Really Look Forward To Learning

Scss
Less
React And React Native
And The Mern Stack

Useful resources

Resource 1 How to Use SVG Images in CSS and HTML
This helped me for Understand some details about SVG Images. I really liked this pattern and will use it going forward.
Resource 2 Selecting Breakpoints - The Options - This is an amazing article which helped me finally understand Breakpoints. I'd recommend it to anyone still learning this concept.

Author

Linkedin - Odebisi Solomon
Github - Odebisi Solomon

Acknowledgments

I Would Really Like To thank Sidehustle Internship Team For The Opportunity to Grow and Learn At The Same Time, i would Also Love To Say a Big Thank To FrontEnd Mentors For A Providing Great Project like This To Work On!

Kral_Conomoh