Snipper Landing Page

{"ops":[{"insert":"A blog page perfect for practicing both Flex and Grid. Beginner level.\n"}]}

Unifeed Blog Page

{"ops":[{"insert":"Perfect to practice creating % based containers and using flex or grid.\n"}]}

Newsletter Popup Template

{"ops":[{"insert":"Great template to practice your CSS transform and flex skills.\n"}]}

Hosterr Waitlist Page

{"ops":[{"insert":"Perfect to practice your responsive design, flex and/or grid skills.\n"}]}

Accountable Social Media Feed

{"ops":[{"insert":"A fun and simple project to practice responsiveness and positioning.\n"}]}

Meeet Waitlist Template

Love the work you've done and the fact that it's responsive. My only 2 comments is that the image technically isn't 'stuck' at the bottom and that the items in the footer change to a hamburger menu on mobile. Other than that, great job!


Well done! My only comment is that it isn't completely responsive on mobile, there's margin on the left of the blog posts after the main one.

What problems are you having when trying to use the font face? My only comment is to use align-items: center; on this class 'articles__secondary--container' to center the text with the image, other than great job, very responsive!

Thank you moeminm !
I dowloaded the font face Manrope, but it's as if it wasn't taken into account and the code uses Verdana instead :

@font-face {
  font-family: "Manrope";
  src: url("./fonts/Manrope-VariableFont_wght.ttf") format ("truetype");
}

* {
  margin: 0;
  font-family: "Manrope", "Verdana", "Times New Roman";
}

<b>I actually haven't noticed the hamburger menu on mobile - thanks for pointing it out!</b>

Did you import the font? Check this article out https://css-tricks.com/snippets/css/using-font-face/

Alternatively, you can just link the font in the <head> using this: 

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap" rel="stylesheet">

and adding font-family: 'Manrope', sans-serif; in the CSS.

No comments design-wise, looks like you've done a good job of replicating the actual design! I'll leave the code to someone more experienced.

Got the same feedback as yours, everything looks great except the hamburger menu, maybe you could even add a placeholder to the email field.

Great job!

I think you've nailed it, I do recommend increasing the line height to make it more readable, text feels too squished together!

Great work, my only comment is to make the padding 1rem all around instead of 2 and 1.

Looks REALLY good. My 2c are as follows: The image on the second post seems VERY stretched out on Safari (looks fine on Chrome and Firefox). For the live stream on the right, ideally the live, viewer count, and title should be actually components instead of an image. 

Other than that, great job! 

Also just wanted to add that I've seen your other Codewell challenges and you seem to have a really good grasp on converting designs to actual websites in terms of dimensions, keep at it man!

Thanks for the advice and encouragement. It was a pleasure to read that my work is being done well. I will seek to improve it even more. Thank you very much man 😀

Looks really good, I don't have any comments design-wise! Great job :D

Looks like you've done a wonderful job, my only comment is to remove the underlines under the buttons! Can you let me know which image was missing from the asset file so I can update it? Thank you!

ahh yes I forgot the underline thank you! and the hero images for the tablet and mobile I only had the desktop image.

unless the figma design is a little off shows different assets for desktop tablet and mobile.

Thanks for reporting this, will look into it and update the Figma files! 

Correct link to live demo
https://competent-elion-cbde7a.netlify.app

Hi. Great work. I dwelled into this for a while. I'm reckon there might be an autonomous way but here is a simplified syntax.

<h1>Meet New Entrepre<span style="z-index: 4;margin: 0;">neurs</span></h1>

Instead of using two spans, just use one and remove all the margins from that span. 

Great job, my only comment is to have the hamburger menu switch to an 'X' icon when active!

You've done a great job on desktop! Remove the underlines and you should be fine... But the mobile view is similar is similar to desktop and just looks as if it has been shrunken down. Take a bit more time to make it like the original.

👋Hi vishalbrdr!

For the "View live project" link, it's a GitHub repo link.

Have uploaded your project to Netlify or GitHub page?

Nice work!
Here are some thoughts from looking at this.
I liked your semantic use of html elements including the time element.
I think the width on the header is a bit suprising:     width: clamp(374px, 86vw, 1240px);
I think some padding around it might be simpler (20px for mobile, 40px for tablet and up).

The input is not an input. Positioning the button in an input is tricky though.
The min-width for the media query on the final large screen grid layout is 1024px. Which a few hundred pixels less than the actual width of all the content so it overflows for some screen sizes and messes up your header too.



Live project link seems to be working fine for me

Hi, did you have a problem with your images?

Mine has a weird background thing, I can't get rid of.

Great work!
I can't for the life of me get rid of the weird background thing my images have


First thing Ur Twitter logo is fixed change it. And responsiveness is sucked first divide everything in parts and make it full responsive first like logo first then the main section then the footer.

Great! but the menu shows to unfolded in mobile version 

Really good job man. Try to cap the size of the image on the right side though. Just so it doesn't overflow on larger screens. Maybe flexbox would help make the positioning easier?

I did just the website on desktop to start. I haven't done the rest yet, but I think it looks nice!

Yeah It is amazing thanks for the help in the footer part I didn't know how to do it so I had a look at your code thanks I do really appreciate your help

  background-repeat: no-repeat;
  background-size: cover;

para que el fondo no se repita se vea como el diseño,
saludos desde mexico.

My attempt at responsive development.

Snipper Landing Page - My First Codewell Challenge

Unifeed

{"ops":[{"insert":"Please help me review my source code\n"}]}

Request review NewsletterPopupTemplate

Unifeed blog page using React

Snippet Template Solution

Basic vanilla landing page

Short and sweet

{"ops":[{"insert":"Simple solution.\n"}]}

Newsletter Popup

Accountable

{"ops":[{"insert":"Comments and suggestions are welcome.\n"}]}

Hosterr Landing Page

Snipper Landing Page.

Build Using SCSS

Newsletter popup template challenge

{"ops":[{"insert":"Purely used the Bootstrap 5 base classes to structure and style the form.\n"}]}

Newsie - Codewell challenge

Hosterr page with Bootstrap 5

{"ops":[{"insert":"I had fun trying to make this responsive and as pixel close as the designs\n"}]}

Newsletter Solution

{"ops":[{"insert":"Developed popup Template\n"}]}

{"ops":[{"insert":"Easy with bootstrap grid :D.\n"}]}

Unifeed Blog

Meeet Challenge Solution

Fun, love this platform

Hosterr Starter Landin page with  HTML, CSS, JavaScript &  GSAP

{"ops":[{"insert":"This is an awesome challenge.\n"}]}

Completed using Bootstrap

Snipper Template complete 

{"ops":[{"insert":"Build with React framework, using styled components with tailwind css\n"}]}

React Tailwind css

{"ops":[{"insert":"Hosterrr Landing page.\n"}]}

Hosterrr

{"ops":[{"insert":"Newsletter popup with email validation using javascript. Flexbox.\n"}]}

Newsletter popup with email validation

finishes this with HTML, CSS and JS

Hosterr Waitlist Page with HTML, CSS and JS

{"ops":[{"insert":"This was encode with practically effective HTML and CSS language........\n"}]}

Hosterr website design 

Hosterr waitlist landing page

Done with Grid and Flex box

{"ops":[{"insert":"Challenge built with HTML, CSS and JavaScript\n\t\t\t\n"}]}

Unifeed Blog 

Finished This Challenge with HTML CSS and JS

Free Hosterr Waitlist Page

Fantastic Practice!

Snipper Landing Page Challenge

Tailwind grid experiment

{"ops":[{"insert":"This is my first attempt at creating a responsive  website. \n"}]}

First Challenge 

Newsletter Popup | HTML CSS Sass

{"ops":[{"insert":"Hi everyone, I appreciate any feedback, thanks 😊\n"}]}

Newsletter Template - Mobile first

{"ops":[{"insert":"I made it with Html Sass and some JavaScript\n"}]}

{"ops":[{"insert":"Anyone can comment :)\n"}]}

Unifeed Blog Template with HTML and CSS

{"ops":[{"insert":"I don't know if my work is correct, I'm just a newbie in web development\n"}]}

Newsletter Popup Template Using HTML And CSS

Hosterr Waiting Page by nadineamanda.com

Tailwind, grid, flex, typescript

Unifeed Blog Page (HTML&CSS)

{"ops":[{"insert":"I hope your feedback\n"}]}

Snipper landing page with HTML And Tailwind CSS

{"ops":[{"insert":"gulp-sass browser-sync \n"}]}

Snippet Template challenge codewell

Completed this website using html and css.

{"ops":[{"insert":"Any feeback will be appreciated.\n"}]}

Unifeed Blog Template using Bootstrap 5.1

Snippet_Template_Starter_Files

{"ops":[{"insert":"no interesting parts since challenges was pretty simple\n"}]}

newsletter popup

Landing Page

{"ops":[{"insert":"any suggestions?\n"}]}

news-letter-card

Unifeed Blog - Template (Challenge)

{"ops":[{"insert":"I would love to hear your feedback 😁\n"}]}

{"ops":[{"insert":"Hosterr page using Grid and flexboxx\n"}]}

Hosterr Page using Grid

Hosterr Website

{"ops":[{"insert":"Snipper Landing Page made using HTML, CSS, JavaScript.\n"}]}

Snipper-Landing-Page

Snipper - Gorgeous Code Snippets solution by psplawski

{"ops":[{"insert":"Made with HTML and CSS\n"}]}

Meeet-waitlist-template

{"ops":[{"insert":"Snipper Landing Page\nMade with pure HTML&CSS\n"}]}

Snipper-landing-page

{"ops":[{"insert":"Feel free to ask for any questions, it was a fun challenge!\n"}]}

Katalina G / CW-Snippet-Template

{"ops":[{"insert":"CUALQUIER DUDA DE COMO LO HICE PREGUNTAR\n\n"}]}