HTML and CSS type the muse of contemporary net growth. HTML defines how an internet web page is structured, and CSS defines its type. Whereas each languages are comparatively simple to be taught, as soon as you realize the fundamentals, you’ll nonetheless must sharpen your abilities with follow.
Code challenges are an effective way to sharpen your programming abilities and mix them in numerous methods. Listed here are 11 HTML and CSS code challenges that’ll show you how to take your abilities to the subsequent degree. To get began, simply decide a problem, open up a workspace, and begin coding.
Be aware that whereas these challenges are designed for inexperienced persons, you’ll nonetheless must have a fundamental understanding of HTML and CSS. For those who want a refresher, use the programs under:
1. Create a tribute web page
Select a historic determine who’s significant to you and create a webpage devoted to them. The webpage ought to embrace:
- A title or heading with the individual’s title
- A picture of the individual
- A caption for the picture
- A timeline of the individual’s life within the type of a record
This may be accomplished with solely HTML, however use CSS to offer it some type.
2. Create a Wikipedia web page
Wikipedia is among the backbones of the web, and it has a comparatively easy structure. Create a Wikipedia web page on the subject of your alternative. It ought to embrace:
- A title or heading
- A desk of contents with hyperlinks to sections throughout the web page
- Superscript quantity hyperlinks that hyperlink to the corresponding quantity within the reference part
- An ordered record of references
3. Create an HTML and CSS-only search outcomes web page
Create a mock Google search outcomes web page. It ought to embrace:
- The Google brand
- A search bar on the prime
- A listing of search outcomes with clickable hyperlinks
Right here’s an instance of what it’d appear to be.
4. Create a survey type
HTML kinds are an vital a part of many web sites. Create a type for a survey on the subject of your alternative.
Embrace quite a lot of reply choices, together with textual content fields, dropdowns, radio buttons, checkboxes, and a submit button. Don’t neglect so as to add a title, and think about using CSS to enhance the look of your type. Right here’s an instance.
5. Create a picture gallery
Picture galleries may be a vital template for a lot of web sites—like images portfolios, as an illustration. Decide a theme you want (movies, crops, structure) and create a picture gallery utilizing float or show flexbox.
This gallery ought to comprise:
- A title or heading
- 8+ clickable pictures with descriptions
- A prime navigation bar
- A footer, full with social media hyperlinks
6. Create a parallax web site
A parallax web site has a hard and fast picture within the background that stays in place when you scroll by different elements of the web page. It’s a well-liked impact in net design and offers a chic appear and feel to a web page.
Design a parallax webpage. Divide the web page into three or 4 sections. Set three or 4 background pictures and align textual content to every part. You’ll use margins, padding, and background positioning to create the impact. Right here’s an instance of a parallax web site.
7. Create a product touchdown web page
Many web sites are designed to showcase and promote merchandise. A product touchdown web page must be engaging, informative, and straightforward to learn to enchantment to customers. Your product touchdown web page ought to embrace:
- An image of the product
- A header and footer
- Columns
- A number of sections
Think about the colour scheme and be sure that parts don’t overlap one another.
8. Create a restaurant web site
A restaurant web site is much like a product touchdown web page in that it ought to showcase the restaurant and menu gadgets appealingly. It’s extra complicated, although, with pictures of various meals and drinks. First, create a responsive restaurant web site utilizing a viewport and media queries.
9. Create a chessboard
This problem teaches you methods to create and format a desk. You’ll additionally must learn to insert UNICODE characters.
Create a chessboard. The board ought to be alternating colours and an eight-by-eight grid. Listed here are the UNICODE characters you’ll want for the items.
- White King: ♔
- White Queen: ♕
- White Rook: ♖
- White Bishop: ♗
- White Knight: ♘
- White Pawn: ♙
- Black King: ♚
- Black Queen: ♛
- Black Rook: ♜
- Black Bishop: ♝
- Again Knight: ♞
- Black Pawn: ♟
10. Create an occasion or convention web site
This problem continues the theme of constructing engaging net pages. This one will embrace a registration button that hyperlinks to a registration type. You’ll additionally want particulars and pictures of the speaker or performer and venue. Describe the occasion and embrace a number of sections together with a header and footer. Think about the colour scheme and use fonts which can be readable and mirror the theme of the occasion.
11. Create a portfolio web site
Take what you’ve discovered all through the opposite challenges and create a portfolio web site. The web site ought to mirror your abilities.
Embrace a web page along with your resume, work samples, a photograph, and a prime menu with hyperlinks to an about web page, contact web page, and some other pages you’d like to incorporate. Within the footer, embrace your contact info and hyperlinks to your related social media accounts.
Constructing your HTML and CSS abilities
Code challenges are only one technique to construct your HTML and CSS abilities. You can even brush up with programs like Study HTML, Study CSS, and Study Intermediate CSS. These programs construct on each other, although you possibly can at all times leap into an intermediate class if you have already got base data of CSS.
Talent Paths are one other nice technique to be taught particular abilities. Our Study Find out how to Construct Web sites Talent Path walks you thru HTML and CSS, together with responsive design and accessibility. You’ll finish the category with a sophisticated web site that you should utilize in your portfolio. We even have a standalone course on responsive design.
For those who really feel assured in your HTML and CSS abilities, it might be time to be taught one other language. Our course on JavaScript builds on HTML and CSS that will help you make web sites much more responsive and dynamic. When you be taught JavaScript, we provide a course on Constructing Interactive JavaScript Web sites that brings all these abilities collectively.
This weblog was initially printed in November 2021 and has been up to date to incorporate extra HTML and CSS challenges for inexperienced persons.
Whether or not you’re seeking to break into a brand new profession, construct your technical abilities, or simply code for enjoyable, we’re right here to assist each step of the way in which. Take a look at our weblog submit about how to decide on the very best Codecademy plan for you to find out about our structured programs, skilled certifications, interview prep sources, profession providers, and extra.
