Responsible Workit landing page using html and css

Solution retrospective
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
Project Challenges and Questions
Hello everyone! How are you doing? My name is Juan, and I'm transitioning my career to become a Frontend Developer. I've taken several courses in the field, but I believe it's crucial to put everything into consistent practice. That's why I'm here at Frontend Mentor. In order to achieve this, I've set the following goals for myself:
- I've gone through the challenge list and arranged them from easy to difficult, and I'll be completing them in that order.
- For the newbie and junior challenges, I'll be using just HTML, CSS, and JavaScript to build a solid foundation in these subjects.
- As I progress to more advanced challenges, I'll start incorporating frameworks and different tools that make sense for each project.
- Build a portfolio to show.
In this first challenge, I've already encountered a few obstacles and areas for improvement where I could use some help or feedback. They are as follows:
Header The initial challenge was positioning the central smartphone image and the side images. I used position, z-index, and screen coordinate placement for the side images. My doubts and possible areas of study for the future are: how can I make everything more responsive and less fixed as the screen size changes? Currently, I've placed the central smartphone image using an <img> tag and positioned it with margins and padding, but I'd like to make it more adaptable to screen resizing.
Footer Similarly, the main challenges in this were related to different positioning techniques and content overlap, and my solution was the same.
Organization I've attempted to follow the BEM (Block, Element, Modifier) methodology and separate my files according to the website sections. As a beginner, my challenge is to discover new ways to refactor this CSS code, making it smaller, more concise, and optimized.
I appreciate the feedback on these mentioned points and any suggestions for improvement.
Juan
Please log in to post a comment
Log in with GitHubCommunity feedback
- @juangtddev
For some reason the screenshot of FrontEnd mentor are not recognizing the fonts of the project, causing a difference.
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord