Responsive Order Summary Component | Frontend Mentor Challenge | Day 1

preview_player
Показать описание
This is day 1 of the 15-day frontend mentor challenge. Today we will convert the design of an order summary component into responsive HTML & CSS.

💥Codepen Link:

✨15 Days of Frontend Mentor Challenges Playlist Link:

👉Frontend Mentor Challanges:

Keyword: order summary component frontend mentor challenge, coding challenge

#mrcoder #challenges
  1. Mr Coder
  2. frontend mentor challenges
  3. frontend
  4. coding challenges
  5. frontend mentor newbie challenges
  6. Order Summary Component
Рекомендации по теме
Responsive Order Summary 0:38:38

Responsive Order Summary Component | Frontend Mentor Challenge | Day 1

Learn HTML CSS 0:56:15

Learn HTML CSS Complete Course - Project 01/07 - Responsive Order Summary Component

Learn HTML CSS 1:02:02

Learn HTML CSS Complete Course - Project 01/07 - Responsive Order Summary Component Part 2

Master Media Queries 0:09:44

Master Media Queries And Responsive CSS Web Design Like a Chameleon!

Create Timeline Design 0:15:04

Create Timeline Design For Website Using HTML & CSS | Responsive Web Design

🔴Live Create A 1:23:32

🔴Live Create A Order Summary Component With Next.Js, Tailwindcss, Responsive & more #tailwindcss...

Responsive Product preview 0:33:44

Responsive Product preview card component | Frontend mentor Challenge

Single Price Grid 0:07:20

Single Price Grid Component | Frontend Mentor Challenge | Responsive Design

Curso REACT DESDE 0:25:02

Curso REACT DESDE 0 - Práctica STYLED COMPONENTS

Lesson 2 Summary 0:00:21

Lesson 2 Summary - Responsive Web Design Fundamentals

Stats preview card 0:23:26

Stats preview card component responsive card using html and css | web development tutorial

Vitaly Friedman - 0:54:05

Vitaly Friedman - Responsive design workflow: clever tricks and techniques

HTML & CSS 0:16:00

HTML & CSS Hands-On Beginner Course: Create a Responsive Summary Card | Project #002 Part 2

Responsive website design 0:19:37

Responsive website design using HTML & CSS | web development tutorial

HTML & CSS 1:13:21

HTML & CSS Hands-On Beginner Course: Create a Responsive Summary Card | Project #002 Part 1

Responsive Intro Component 0:01:42

Responsive Intro Component with Signup Form | Frontend Mentor Challenge

Responsive Shopping cart 0:40:59

Responsive Shopping cart for eCommerce website HTML CSS JS

Building responsive CSS 0:29:07

Building responsive CSS components - Talk.CSS #24 max-content Edition

Transforming a Design 1:30:42

Transforming a Design into a Fully Responsive App in an Hour

React Responsive Admin 0:34:11

React Responsive Admin Dashboard with Source Code | Build Your Own Admin Panel in React JS

Responsive CSS Travel 0:24:36

Responsive CSS Travel Cards Using HTML & CSS Part 1 | Flexbox Tutorial

Stats Preview Card 0:01:22

Stats Preview Card | Frontend Mentor Challenge | Responsive Design

Responsive Login Form 0:32:44

Responsive Login Form React Js || 2023 || HTML/CSS

Make Responsive 3-column 0:31:15

Make Responsive 3-column Preview Card Component | HTML CSS

Комментарии
Автор

🔴Did you guys have done any challenges from frontendmentor.io? Please let me know!

MrCoderYt
Автор

Thank you for including the codepen code. I'm new to coding and it really helps to be able to see the code so I can research the different properties.

kristingalea
Автор

Useful video. As a backend developer I suffer when building something with css. Your video is helping me. I have done 2 projects from frontend mentor so far. I will continue.

kamal-ahmed
Автор

I'm doing this challenge now, but I can't display the background image when I reviewed. Why does it happen?

janzuru
Автор

The image in the mobile screen gets cut off.... how to fix so whole image fits?

leamsiever
Автор

THANKS for your work, what theme you use in vscode

starjuda
Автор

Thank you very much for this share, it's the first challenge I made and I didn't undertand the way, Ive done before search on Yt, I've made a lot of mistakes but I'm beginner. Your video help me to understand better and already, to see how proceed, nice !

patriciasaccaggipats
Автор

I'm new to programming. You made Change/proceed to payment/cancel order into a link. Some other youtuber put that text into a box.

Suppose you click change, and another tab opens up, then it should be a link right? But if you click change/proceed to payment/cancel order and the website stays the same but only loads new questions such as change to what payment plan, then it should all be boxes right?

WhiteOwl
Автор

Thank u Very much, dude! Your video help me alot

danielrody
Автор

The code is clear and understandable.Thank you very much bro❤️

mr.ismayilovh
Автор

I got a problem with the background image process can you help me out!

sweetsrini
Автор

Please my CSS code doesn't apply. What could be the issue?

tceecreations
Автор

Thanks for sharing your process. Will there be a junior difficulty?

Автор

Dang, that was so easy and fast. I am a beginner and I spend like 4 hours :(. I'll have to practice

davidshelamolvera-maldonad