Training Day 24

Industrial Training – Day 24 Blog

Today is the  Day 24 of my industrial training journey, Today I focused on completing the middle part of the landing page—specifically the features section.

The task involved converting a visual design into a responsive and structured HTML/CSS layout. I started by analyzing the section structure, which typically includes three main features with icons, headings, and descriptions. I used semantic tags like <section>, <div>, and <article> to maintain proper HTML5 structure.

Each feature block was styled using Flexbox to align content horizontally on larger screens and stacked vertically for mobile responsiveness. I applied consistent spacing, background colors, and hover effects to make the design clean and user-friendly.

Typography and font styling were implemented to match the design guide. I also ensured mobile responsiveness, testing on different screen sizes to avoid content breaking or overlapping. Minor adjustments were made with media queries for tablet and phone views.

By the end of the day, the features section looked exactly like the design mockup. I also learned how to handle layout spacing more efficiently and gained better control over alignment using gap, padding, and margin.

Comments

Post a Comment

Popular posts from this blog

Day 34

 Industrial Training – Day 34 Topic: JavaScript Control Statements Date: 1st August 2025 Today in my industrial training, I learned about control statements in JavaScript, which are used to make decisions and control the flow of the program. I started with conditional statements : if if...else if...else if...else switch These helped me write logic to make decisions based on conditions. For example, checking if a user is eligible to vote. Next, I worked on loops : for while do...while Loops helped me execute code multiple times. I practiced printing number sequences and iterating through arrays. I also learned about: break (to exit a loop early) continue (to skip one iteration) I wrote small programs using these statements for better understanding. 
Read more

Training Day 25

 Industrial Training – Day 25  Today marked the 25th day of my industrial training journey, and I successfully completed the final part of my current project – the User Review or Testimonials section. This section plays a key role in building user trust, as it highlights positive feedback from previous clients or users of the service. To create this part, I used clean and responsive HTML and CSS. I designed multiple review cards that display the user's name, photo, star rating, and their feedback. I ensured that each review card had a modern, minimalistic look with proper padding, margins, and shadow effects to make them visually appealing. For mobile responsiveness, I used media queries to adjust the layout – reviews appear in a single column on smaller screens and in a grid on larger ones. I also used flexbox and grid properties to ensure alignment and spacing were consistent. One of the challenges I faced was making the layout look uniform despite having reviews of differen...
Read more

Industrial Training Day 16

Industrial Training Day 16 Blog Today is the 16 Day of my industrial training, and I’m glad to share that I have successfully completed my project. On this final stretch, I focused on reviewing the entire website layout and refining the last few minor changes to ensure a clean, responsive, and user-friendly design. I went through each section of the project, tested it across different screen sizes, and made small adjustments wherever necessary — especially to spacing, font sizes, and alignments. I carefully revised the responsiveness of the control panel section, realigned images and icons, and ensured that all content displayed properly on both desktop and mobile devices. A few color inconsistencies and spacing issues were resolved to enhance the visual appeal. I also validated the code for proper HTML semantics and CSS structure to keep it organized and efficient. Additionally, I optimized some of the image sizes and tested the website on multiple browsers to check compatibility. ...
Read more