Frontend Mentor - Recipe page

Welcome! 👋

Thanks for checking out this front-end coding challenge.

Frontend Mentor challenges help you improve your coding skills by building realistic projects.

To do this challenge, you need a basic understanding of HTML and CSS.

The challenge

Your challenge is to build out this recipe page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.

Want some support on the challenge? Join our community and ask questions in the #help channel.

Frontend Mentor - Social links profile solution

This is a solution to the Social links profile challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

I join frontend Mentor to do the real world challenge to provide to learn and grow as a Front End Developer. This is Challenge number 4 of beginner's level.

The challenge

Build a responsive recipe page and get it looking as close to the design as possible.

Screenshot

Links

• Solution URL: Solution Github Repository
• Live Site URL: My solution live site

My process

• First I go over design and design system files in figma.
• Mobile first workflow.
• Next add media query for larger screen sizes.
• Use 508 Accessibilty Extention

Built with

• Semantic HTML5 markup
• CSS custom properties
• Mobile-first workflow

What I learned

• Incremental growth(4 builds completed).
• Learning agile(Being able to build a new component almost everyday towards completing my beginner level).
• Next time I'd like to decrease development time by 30mins.

Continued development

My Focus

• code for good quality User experience
• Good Quality and scaleable code

Useful resources

• Minfy CSS online - I asked co-pilot to evaluate my code and it suggested minifying it. This is a site that you can paste you css in and it minify it for you.

• vs code on git and github - This helped me successfully get my github and tought how to branch edit and merge back to main repository

• Set GH pages for you a live site on github - This is an amazing article which helped me finally understand how to set up gh pages on github.

Author

• Website - My Linkedin
• Frontend Mentor - @okayishmael
• Bluesky - @ishmaelsunday.bsky.social

Acknowledgments

N/A