Hello, I'm Monika, a dedicated front-end developer on a journey to merge my passion for technology with my ongoing pursuit of a Bachelor's in Electronics and Communication Engineering at RMK College of Engineering and Technology. Alongside my academic pursuits, I immerse myself in the dynamic world
I’m currently learning...Passionate about web development, I'm currently immersed in learning React while honing my skills in HTML, CSS, and JavaScript. With a focus on creating engaging and user-friendly interfaces, I strive to merge creativity with functionality in every project I undertake. Eager to explore the endless p
I didn't have major problems doing the mobile layout.
What challenges did you encounter, and how did you overcome them?I still struggle a lot with Grid CSS and had trouble setting the height on wider screens.
What specific areas of your project would you like help with?Any tips with Grid CSS will be of great help.
Congratulations on achieving by finding the better solution despite facing challenges along the way! Your perseverance and dedication have led you to overcome obstacles and accomplish your goals.
Aiming to become strong in CSS Grid:
1.Understanding Grid Fundamentals: Learn about grid containers and grid items: Understand the basic structure of CSS Grid layouts where elements are placed inside a container that has been defined as a grid. grasp the concept of rows and columns: Get familiar with the grid's row and column structure, and how elements are placed within these tracks. Explore basic properties: Start with properties like display: grid, grid-template-columns, grid-template-rows, grid-column, grid-row, etc., to define the grid structure and place items within it. 2.Mastering Grid Properties:
Dive into advanced properties: Learn about properties such as grid-template-areas, grid-gap, justify-items, align-items, justify-content, align-content, etc., to fine-tune the layout and alignment of grid items. Understand flexible sizing: Explore units like fr (fractional unit) and minmax() for creating flexible layouts that adapt to various screen sizes. Experiment with auto-placement: Utilize grid-auto-flow to control how items are automatically placed within the grid, either in rows or columns, and how they behave when the grid container size changes. 3.Creating Responsive Layouts:
Practice responsive design: Learn how to create responsive layouts using media queries alongside CSS Grid. Use features like auto-fill, auto-fit, and minmax () to create grids that adapt to different screen sizes. Explore nested grids: Understand how to nest grids within grids to create more complex layouts while maintaining flexibility and responsiveness. Experiment with combining Grid and Flexbox: Understand the strengths of both layout systems and learn how to combine them effectively to build more versatile and intricate layouts. By focusing on these, you'll develop a strong foundation in CSS Grid concepts and be well-equipped to create a wide range of layouts efficiently and responsively. Remember to practice regularly, experiment with different properties and techniques.
Next time i need to work with buttons. On mobile view looks very good, but desktop not exactly.
What challenges did you encounter, and how did you overcome them?Buttons are biggest challenged. I try do this with nav>a, but finally i did nav>li>a. I think easiest way will be nav>p but im not sure this is correct.
What specific areas of your project would you like help with?How to make buttons easy way?
"Your solution Looks Great!"
As you mentioned that you encountered a problem while creating buttons, I have Given my way of approach to that button below
code: Html: <div class="socialmedia"> <div><a href="#">GitHub</a></div> <div><a href="#">Frontend Mentor</a></div> <div><a href="#"> LinkedIn</a></div> <div><a href="#">Twitter</a></div> <div><a href="#">Instagram</a></div> </div>
CSS: .socialmedia{ display:flex; flex-direction:column; margin-top:2px; gap:20px; } .socialmedia div{ background-color:hsl(0, 0%, 20%); height:43px; width:350px; border-radius:5px;; text-align:center; } .socialmedia div a{ text-decoration:none; color:white; margin:10px; font-size:14px; font-weight:600; } .socialmedia div:hover{ background-color:hsl(75, 94%, 57%); cursor:pointer; caret-color:black; color:black; }
I hope these suggestions are helpful to you. Let me know if you have any other questions or concerns.
I am proud of learning how to use grid and that compliting this challange.
What challenges did you encounter, and how did you overcome them?I encounterd many challanges about grid. It was really hard to understand grid, I am still trying to understand grid better but for now it is really hard and also centering the content was one of the problems. This challange needed simple grid skills so I did it.
What specific areas of your project would you like help with?Other than that I have no questions, But Please Give me FeedBacks and suggestions. tell me about my mistakes In the code. Also what can be written better in the code, So I can get better at coding and improve my skills. Thanks!
Congratulations on achieving by finding the better solution despite facing challenges along the way! Your perseverance and dedication have led you to overcome obstacles and accomplish your goals.
Aiming to become strong in CSS Grid:
display: grid, grid-template-columns, grid-template-rows, grid-column, grid-row, etc., to define the grid structure and place items within it.2Mastering Grid Properties:
grid-template-areas, grid-gap, justify-items, align-items, justify-content, align-content, etc., to fine-tune the layout and alignment of grid items.fr (fractional unit) and minmax() for creating flexible layouts that adapt to various screen sizes.grid-auto-flow to control how items are automatically placed within the grid, either in rows or columns, and how they behave when the grid container size changes.3.Creating Responsive Layouts:
auto-fill, auto-fit, and minmax () to create grids that adapt to different screen sizes.By focusing on these, you'll develop a strong foundation in CSS Grid concepts and be well-equipped to create a wide range of layouts efficiently and responsively. Remember to practice regularly, experiment with different properties and techniques.
I learned new pseudoclass.
What challenges did you encounter, and how did you overcome them?I can't change color of the cursor, after :hover, and cant find the solution.
What specific areas of your project would you like help with?I dont know for now.
"Your Solution Looks Great and similar to the design"
"If you want to change the appearance of the cursor, like the mouse pointer, it's not possible with CSS alone. Browser settings typically determine the cursor's appearance."
The layout and how it turned out
What challenges did you encounter, and how did you overcome them?Responsiveness of the site and organizing each section into containers to match the design closely as possible
What specific areas of your project would you like help with?Any feedback is appreciated
As a beginner, you've taken a commendable step by creating work similar to the sample provided also your Code looks neat . To further master your practice and enhance your skills, I recommend diving into more challenges. Push yourself to explore different styles, subjects, and techniques. Experiment with various mediums and approaches to broaden your artistic horizons.
This is my first time using media queries; I need to enhance the semantics of both CSS and HTML to make styling the containers more organized.
What challenges did you encounter, and how did you overcome them?To understand how to adapt to mobile devices, one of the most commonly used solutions is using media queries, which is what I implemented.
What specific areas of your project would you like help with?The best way to adapt to various screen sizes, in this case using media queries with comparison operators
To Overcome media queries related issues:
1.Understand the Concept: Grasp the concept of media queries, which enable you to apply CSS rules based on various device characteristics like screen size, orientation, etc.
Learn Syntax: Familiarize yourself with the syntax of media queries in CSS, which typically start with @media followed by the specific conditions and CSS rules enclosed within curly braces also Breakpoints.
Practice Responsiveness: Practice creating responsive designs by using media queries to adjust layout, font sizes, margins, etc., for different screen sizes and devices.
Experiment: Experiment with different breakpoints and conditions to understand how media queries affect the layout and styling of your web pages.
Test Across Devices: Test your responsive designs across various devices and screen sizes to ensure they adapt correctly.
Stay Updated: Stay updated with new features and best practices in CSS media queries to leverage the latest techniques for responsive web design.
Resources and Documentation: Utilize online resources, tutorials, and CSS documentation to deepen your understanding and mastery of media queries.
