Snipper Landing Page

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

Newsletter Popup Template

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

Meeet Waitlist Template

Multi Step Form 

{"ops":[{"insert":"Perfect for practicing layouts, flex/grid and scrollable components.\n"}]}

Chirp Landing Page

Web Developer Portfolio

{"ops":[{"insert":"Perfect for practicing modular components and responsive design.\n"}]}

Personal Blog

Javascript30 Navbar

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!


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

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.

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 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!

Great job 🔥My only comment is that the testimonial section looks so squished on tablet. 

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?

Live project link seems to be working fine for me

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.

Hey there, could you please let me know what assets were missing so I can update the files, everything's included from my end but i'd love to double-check, thanks! :) 

the icons or svgs on the features section are missing, as you can see on the live project that I've submitted I substitute the twitter icon for those.

I don't know how to work with svg can you help?

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

Hi, good job 👏, but the menu doesn't work on mobile devices.

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 files dont contain the 6th avatar, is there any way i can get it please?

New Link:
https://bluedeepart.github.io/codewell-challenge/

https://github.com/yewinag/news-letter-ui

Had to post twice because this f****** platform dosent have options to edit your submits...

In general, I was just changed name on Github so i had to change name on my github pages.

Good to see the page, but in laptop screen size I see twitter logo coinciding with button.

got the link to the live site wrong...... here's the correct link eivo-chirp.netlify.app

you can use animate on scroll, here is the github repo:
https://github.com/michalsnik/aos

If you pay the $8 monthly, you get the figma files. This file is kind of like photoshop where you can extract images (i.e. the 6th avatar). You can also find the width and height of things, the line height etc. You can use the ruler tool to to measure distances. 

Alternatively, you can also snippet tool the extract and save it as an image and import it into your html, give it a class and change the width and height to replicate it to the best of your ability.

You changed the width of body that resulted in inresponsiveness of your website. Use padding in body for gap

Hi SauravHeavyCoder
Thank you for the feedback provided. much appreciated
I will try it in the future and if i understand you correctly i should rather use a 10% padding on the left and right and not a fixed width of 80% with a margin of 0 and auto.


Hover animation on navbar links is so cool. How you do it?

Nice work 👍
you didn't put the icons in the second section though

Nice bro. Just update your live website link.

You didn't set up GitHub Pages to see the website live.

sorry for this ill be deleting this i've made a mistake in choosing the right link


Very great work and neat codes but you should try to reduce the width of the hero-image img so the hero image wont overlap the footer at full screen for desktop.
Also you can try reducing the (*) padding so the gradle menu in it can align well with the rest in the drop down menu 
great work!!! whoever you are

sorry the Repositorie is deleted by mistake check my another submission.
thankyou

Please Download first then open document 

hi bro how your code in live project please help me the way to live my code .....

Great work Nathan. Just a few simple suggestions from my side. First of all I use a 1920 wide display and I feel the font size is a little small, and it would be even better if it is bigger. In your website the main header's width is small which makes it awkward to see, try using width: 100% and control that with max-width so that it would be responsive. The last thing I noticed is that in the image part the second image is bigger than the first one,  try object-fit: cover in your code. Hope you find it helpful...✌

You did so well. I want to know a few things about Bootstrap5.

Bro, a major part of making fronted is to make it as responsive as possible. 
eg : http://magabee.rf.gd/100daysofcode-2/53-snipper-landing-page/

I had issues when I viewed the page on my mobile phone, it all changed from what it was on the developers tool screen size for mobile, the issue now is, I don't know the specific breakpoints in my source code that I'll track modified and correct so that the page won't have issues.
I don't know what breakpoints to track, how can I do that

Hello Nicholas, you should have tried hiding the get-in-touch button for the mobile design, asides that, the code is Perfect.


Also the link you provided to view the source code isn't for this developer portfolio challenge, try making an adjustment, as I'd also like to see the code and check for the possible ways I've made mistakes while writing my own code for the same challenge.

Moreover, what was the breakpoints you used in designing for mobile and desktop?

The designs I Made for my mobile doesn't seem like the mobile design when I published the challenge and viewed it on a mobile phone, I'd like to know how you did yours or if you experience the same difficulty.
Thank you

I did web design and responsive design (for tablets and mobile phones)

My attempt at responsive development.

Snipper Landing Page - My First Codewell Challenge

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

Request review NewsletterPopupTemplate

Snippet Template Solution

Short and sweet

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

Newsletter Popup

Snipper Landing Page.

Newsletter popup template challenge

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

Newsie - Codewell challenge

{"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"}]}

Meeet Challenge Solution

Fun, love this platform

Snipper Template complete 

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

React Tailwind css

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

Chirp Landing Page using simple SASS

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

Newsletter popup with email validation

{"ops":[{"insert":"pls, help review my work. your feedbacks are very important to me\n"}]}

Chirp Landing Page with Bootstrap and JavaScript

Fantastic Practice!

Snipper Landing Page Challenge

Chirp Solution by Abdulsalamhibee

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

First Challenge 

Newsletter Popup | HTML CSS Sass

{"ops":[{"insert":"This is a clone of the chirp Template \n"}]}

Chirp Template clone

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

Newsletter Template - Mobile first

{"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

{"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

Multistep form concept with Drag and Drop API

Completed this website using html and css.

Chirp landing page made with html , css and Bootstrap

Snippet_Template_Starter_Files

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

newsletter popup

Landing Page

Mi solucion al reto

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

news-letter-card

{"ops":[{"insert":"Your feedback and suggestion are welcome!🤗\n"}]}

Chirp Landing Page using Bootstrap and SASS

chirp landing  page

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

Snipper-Landing-Page

Snipper - Gorgeous Code Snippets solution by psplawski

Chirp Landing Page Using Bootstrap and CSS

I used animations, top down approach and mobile first design, grid flexbox and object fit

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

Meeet-waitlist-template

Chirp Landing page using CSS grid and Flexbox

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

Snipper-landing-page

{"ops":[{"insert":"Made using Bootstrap 5.1. Any feedback will be welcome.\n"}]}

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

Katalina G / CW-Snippet-Template

{"ops":[{"insert":"it was little bit hard, i used scss\n"}]}

Chirp solution

Chirp Starter files

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

PRIMER DESAFIO RESUELTO 

Chirp

{"ops":[{"insert":"just learning little by little hope you like it\n"}]}

web.

{"ops":[{"insert":"This is my first project here. So, any feedback are welcome\n"}]}

Responsive Newsletter Popup

Chirp template @  Jules

{"ops":[{"insert":"This Challenge was easy \n"}]}

Newsletter

{"ops":[{"insert":"Built with pure HTML and CSS, also responsive on mobile\n"}]}

Chirp landing page done

{"ops":[{"insert":"Responsive landing page built with Svelte Kit and Tailwind CSS.\n"}]}

Snipper (Svelte Kit + Tailwind CSS)

{"ops":[{"insert":"Any comments and suggestions will be appreciated! Thank you everyone!\n"}]}

chirp 

{"ops":[{"insert":"Easy challenge, any feedback is still welcome tho\n"}]}

Popup newsletter built with HTML, CSS and JS

The challenge on responsiveness and positioning

Chirp Site 

{"ops":[{"insert":"I used poppon font in the project.\nand this is my first chalenge :)\n"}]}

Chirp project

{"ops":[{"insert":"Personal Blog by Deepart\n"}]}

Personal Blog by Deepart

newsletter challenge

Snipper Landing page solution. Pure css

{"ops":[{"insert":"Developed using CSS Flexbox.\n\nI used modal to visualize the PopUp.\n"}]}

Newsletter Popup Starter Files

Personal solution for the "Snipper Landing Page" challenge

Snipper Template Starter

{"ops":[{"insert":"I used SASS to make code easier.\n"}]}

Newsletter Popup 

Chirp Landing Page | My First Challenge

Newsletter-Popup-Starter

Meeet

meeet-template-starter

{"ops":[{"insert":"this was a super a fun little challenge, I really enjoyed it.\n"}]}

Meeet Template Challenge solution

{"ops":[{"insert":"That's an amazing project. "},{"attributes":{"align":"center"},"insert":"\n"}]}

Newsletter Popup Template.

chirp-starter-files

{"ops":[{"insert":"I used reactjs & scss to make styling \n"}]}

news-letter

{"ops":[{"insert":"reactjs and scss\n"}]}

news-letter-ui

Meeet Waitlist Template | Responsive | HTML CSS

Chirp Landing page using HTML SCSS and JS

Chirp Starter Challenge

{"ops":[{"insert":"I used vanilla CSS and HTML to complete the challenge. Used Flexbox. \n"}]}

Challenge Completed using HTML and CSS 

{"ops":[{"insert":"Amazing Project.\n"}]}

Meeet-Social

Took me sometime to nail the size right on various displays.

{"ops":[{"insert":"Used basic CSS styling with Flexbox. \n"}]}

{"ops":[{"insert":"A simple HTML & CSS solution\t\n"}]}

Snippet Template

Snipper Template

{"ops":[{"insert":"Is everything okay? or you have feedback?\n"}]}

Newsletter-Popup-Template

{"ops":[{"insert":"It was a great project.\n"}]}

Newsletter Popup Design

{"ops":[{"insert":"This was a great project. I used CSS basic and flexbox.\n"}]}

{"ops":[{"insert":"Successfully completed this Challenge using css flex-box.\n"}]}

Portofolio(only flex -no-responsive yet)

Portfolio

Web-Developer-Portfolio-Project